Menu of Gradia using flexbox and using normal CSS instead of drawing canvas
OK, I MADE THAT RIGHT ON TIME!!
Maybe I should creat some more web pages and I find that f**king HTML code is incredible and attractive. So I wrote an ugly page for an unlucky virtual restaurant…
The final png effect picture：
________________________________________________________________________
___________________________________________________________________________
the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>连士熙menu</title>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<!-- <div style="height: 151px;width: 100%;"></div> -->
<!-- fill the place of the fixed nav -->
<nav>
<!-- it has a border at the bottom -->
<a id="logolink" class="firstOfHeader" href="http://blog.****.net/sidnee">
<img src="image/logo.png" alt="logo">
<span style="margin-left: 10%;">Gratia</span>
</a>
<a class="notfirsthead firstNev" href="http://blog.****.net/sidnee">About</a>
<a class="notfirsthead" href="http://blog.****.net/sidnee">Menu</a>
<a class="notfirsthead" href="http://blog.****.net/sidnee">Gallery</a>
<a class="notfirsthead lastNev " href="http://blog.****.net/sidnee">Contact</a>
</nav>
<!-- if has a background image -->
<div class="header">
<div style="width: 100%;height: 40px;margin: 0;padding: 0"></div>
<h1>MENU</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="image_3_a_line">
<div class="image_3_a_line_firstdiv">
<img src="image/Main Dishes.png" alt="Main Dishes" name="Main Dishes" width="100%">
<h1><b>MAIN DISHES</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
<div class="image_3_a_line_seconddiv">
<img src="image/Soups.png" alt="Soups" name="Soups" width="100%">
<h1><b>SOUPS</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
<div class="image_3_a_line_thirddiv">
<img src="image/Hamburgers.png" alt="Hamburgers" name="Hamburgers" width="100%">
<h1><b>HAMBERGERS</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
</div>
<div class="blank"></div>
<div class="image_3_a_line">
<div class="image_3_a_line_firstdiv">
<img src="image/Desserts.png" alt="Desserts" name="Desserts" width="100%">
<h1><b>DESSERTS</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
<div class="image_3_a_line_seconddiv">
<img src="image/Barbecue.png" alt="Barbecue" name="Barbecue" width="100%">
<h1><b>BARBECUE</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
<div class="image_3_a_line_thirddiv">
<img src="image/Salads.png" alt="Salads" name="Salads" width="100%">
<h1><b>SALADS</b></h1>
<p>Lorem ipsum dolor sit amet,consectetur adipiscing elit.</p>
</div>
</div>
<footer style="width: 100%;">
<div style="width: 100%;height:131px;margin-top: 200px;">
<div class="logo">
<div class="fill"></div>
<div class="content"><img src="image/logo.png" alt="Logo" name="logo" width="81px" height="81px" style="margin-left: 25px;margin-top: 25px;"></div>
<div class="fill"></div>
</div>
</div>
<h3 style="text-align: center;margin-top: 30px;">Gratia Restaurant</h3>
<p style="text-align: center;">Copyright 2016.All rights reserved by symu</p>
<div style="width: 9%;height: 20px; margin: auto; border-bottom-color: #CCCCCC; border-bottom-style: solid; border-bottom-width: 1px;"></div>
<div style="text-align: center;margin-bottom: 200px;margin-top: 40px;">
<a class="last" href="http://blog.****.net/sidnee"><img src="image/FB.png" alt="Facebook" style="margin-right: 1%;"></a>
<a class="last" href="http://blog.****.net/sidnee"><img src="image/TR.png" alt="Twitter" ></a>
<a class="last" href="http://blog.****.net/sidnee"><img src="image/IG.png" alt="Image" style="margin-left: 1%;"></a>
</div>
</footer>
</body>
</html>
and it has some ugly inline css in it.
CSS code:
body{
width: 100%;
margin: 0;
padding: 0;
min-width: 1170px;
background: linear-gradient(#FFFFFFFF,#edeff1FF 20%,#FFFFFFFF 90%);
}
@font-face {
font-family:Myfamily;
src:url('crimson_text.otf');
}
p{
font-family: Myfamily;
font-size: 20px;
color: #8b909d;
}
nav{
width: 100%;
display: flex;
display: -webkit-flex;
align-items: center;
border-bottom: 1px solid ;
border-bottom-color: #CCCCCC;
/*position: fixed;
top: 0;left: 0;
background-color: #FFFFFFFF;*/
}
nav img{
width: 25px;
height: 25px;
}
nav span{
font-weight: bold;
font-size: 20px;
margin-left: 3%;
}
.inline-block{
display: inline-block;
}
.firstOfHeader{
text-align: center;
display: flex;
display: -webkit-flex;
align-items: center;
margin-left: 3%;
margin-right: 5%;
margin-top: 55px;
margin-bottom: 55px;
width:7%;
font-weight: bold;
text-decoration: none;
height: 40px;
padding-left: 1%;
color: black;
}
a.notfirsthead{
font-size: 90%;
font-weight: bold;
text-decoration: none;
color: black;
display: inline-block;
margin-top: 60px ;
margin-bottom: 60px;
margin-left: 0;
margin-right: 0;
width: 5%;
}
a.lastNev{
margin-right: 3%;
}
a.firstNev{
margin-left: 62%;
/*2%+10%+5%+61%+5%*4+2 */
}
a.notfirsthead:hover{
color: #FFCC33;
}
a.firstOfHeader:hover{
background-color: #DDDDDD;
cursor: pointer;
}
.header{
width: 30%;
height: 180px;
background:
url('../image/background.png')
no-repeat center center;
text-align: center;
margin: 100px 35%;
padding: 0;
background-size: 100% 100%;
/*background-size: 30% 10.7%;*/
/*the first is width*/
}
.header h1{
font-size: 40px;
width: 100%;
margin-top: 0;
margin-bottom: 20px;
margin-left: 0;
margin-right: 0;
font-weight: bold;
height: 50px;
}
.header p{
display: inline-block;
height: 20px;
width: 100%;
margin: 0 0 50px 0;
}
.image_3_a_line{
display: flex;
display: -webkit-flex;
flex-direction: row;
text-align: center;
}
.image_3_a_line_firstdiv{
background-color: white;
width: 28%;
margin: 0 3% 0 5%;
padding: 0;
}
.image_3_a_line_seconddiv{
background-color: white;
width: 28%;
margin: 0 3% 0 0;
padding: 0;
}
.image_3_a_line_thirddiv{
background-color: white;
width: 28%;
margin: 0 5% 0 0;
padding: 0;
}
div.image_3_a_line h1{
font-size: 40px;
font-weight: bold;
width: 100%;
margin: 50px 0;
padding: 0;
text-align: center;
}
div.image_3_a_line p{
width: 80%;
margin: 0 10% 80px 10%;
}
div.blank{
width: 100%;
height: 120px;
/*background-color: #ededed;*/
}
footer div.logo{
display: flex;
display: -webkit-flex;
align-items: flex-start;
width: 100%;
}
footer div.logo div.content:hover {
background-color: #C4C4C4FF;
}
.logo div.fill{
height: 65px;
width: 45%;
padding: 0;
border-bottom-color: #CCCCCC;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.logo div.content{
width: 131px;
height: 131px;
margin: auto;
border-color: #CCCCCC;
border-style: solid;
border-width: 1px;
border-radius: 50%;
}
and it is quite long and ugly and the most important IT IS EXTREMELY and INCURABLY TEDIOUS !! But I don’t want to change it. hahahaha…
I am Just writing this miserable and disgusting thing to amuse myself. But if you finish reading it here ,it means you truly want learn something.
fortunately，I have discover some details of the amazing markup language:
1.
The margin or padding(padding is uncertain)of the element in the top of his father element is going to be the father’s margin. it means the top border of the content of this son-element is always coinciding with the top border of its father’s top border(if your padding is 0). So how can you solve this unexpected problem?Think about it.if you have some better idea,just ignore mine!Mine is to create an blank div just fits the area of margin you want to create…
2.
don’t use empty space in the css selector!! “div.fucking” is different from “div .fucking”!
and “a:hover {}” is the correct coding way that your browser can recognize,but "a :hover {}"is not!