Menu of Gradia using flexbox and using normal CSS instead of drawing canvas

最新推荐文章于 2026-01-08 23:43:28 发布

原创最新推荐文章于 2026-01-08 23:43:28 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文分享了一个使用HTML和CSS创建的虚拟餐厅菜单网页案例，详细展示了页面布局、样式设置及遇到的问题与解决方案。

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.youkuaiyun.com/sidnee">
				<img src="image/logo.png" alt="logo">
				<span style="margin-left: 10%;">Gratia</span>
			</a>
			<a class="notfirsthead firstNev" href="http://blog.youkuaiyun.com/sidnee">About</a>
			<a class="notfirsthead" href="http://blog.youkuaiyun.com/sidnee">Menu</a>
			<a class="notfirsthead" href="http://blog.youkuaiyun.com/sidnee">Gallery</a>
			<a class="notfirsthead lastNev " href="http://blog.youkuaiyun.com/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.youkuaiyun.com/sidnee"><img src="image/FB.png" alt="Facebook" style="margin-right: 1%;"></a>
				<a class="last" href="http://blog.youkuaiyun.com/sidnee"><img src="image/TR.png" alt="Twitter" ></a>
				<a class="last" href="http://blog.youkuaiyun.com/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!