简易美食网页制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>美食页面</title>
<link rel="shortcut icon" href="images/xlogo.png">
<link rel="stylesheet" href="css1.css">
</head>
<body>
<header>
<div class="language_change">
<select name="language">
<option>简体中文</option>
<option>English</option>
</select>
<select name="currency">
<option>人民币</option>
<option>Dollor</option>
</select>
</div>
<div class="title"><p>爱尚美食</p></div>
<!-- <div class="logo"><a href=""><img src="images/logo.jpg" alt=""></a></div> -->
<!-- <div class="logo"> -->
<div class="login_register"><a href="">登陆</a>|<a href="">注册</a></div>
<div class="shop_cart"><a href=""><img src="images/cart.png" alt="">购物车</a></div>
</header>
<!-- 导航栏 -->
<menu>
<ul>
<li><a href="">首页</a></li>
<li><a href="">主食</a></li>
<li><a href="">荤菜</a></li>
<li><a href="">素材</a></li>
<li><a href="">甜品</a></li>
<li><a href="">小吃</a></li>
</ul>
</menu>
<!-- 中间部分 -->
<article>
<!-- 第一部分 -->
<div class="topic1">
<h1>每日推荐</h1>
<!--搜索 -->
<div class="search">
<input type="text">
<input type="button" value="站内搜索">
</div>
<ul>
<li>
<a href=""><img src="images/可乐鸡翅.jpg" alt=""></a>
<span>28yuan</span>
<h5>可乐鸡翅</h5>
</li>
<li>
<a href=""><img src="images/蛋糕.jpg" alt=""></a>
<span>15yuan</span>
<h5>提拉米苏</h5>
</li>
<li>
<a href=""><img src="images/糖醋排骨.jpg" alt=""></a>
<span>28yuan</span>
<h5>糖醋排骨</h5>
</li>
<li>
<a href=""><img src="images/龙虾.jpg" alt=""></a>
<span>75yuan</span>
<h5>龙虾</h5>
</li>
</ul>
</div>
<!-- 第二部分 -->
<div class="topic2">
<h1>优惠菜品</h1>
<ul>
<li>
<a href=""><img src="images/生蚝.jpg" alt=""></a>
<span>49yuan</span>
<h5>蒜蓉生蚝</h5>
</li>
<li>
<a href=""><img src="images/东坡肉.jpg" alt=""></a>
<span>49yuan</span>
<h5>东坡肉</h5>
</li>
<li>
<a href=""><img src="images/蛋糕1.jpg" alt=""></a>
<span>15yuan</span>
<h5>丝抹蛋糕</h5>
</li>
<li>
<a href=""><img src="images/披萨.jpg" alt=""></a>
<span>50yuan</span>
<h5>芝士</h5>
</li>
</ul>
<div class="div1"></div>
<div class="div2"><a href=""><img src="images/m.png" alt=""></a></div>
<h2>微信公众号</h2>
<div class="div4"></div>
</div>
<!-- 第三部分 -->
<div class="topic3">
<h1>今日套餐</h1>
<ul>
<li>
<a href=""><img src="images/咖喱饭.jpg" alt=""></a>
<span>439yuan</span>
<h5>咖喱鸡饭</h5>
</li>
<li>
<a href=""><img src="images/套餐.jpg" alt=""></a>
<span>28yuan</span>
<h5>排骨饭</h5>
</li>
<li>
<a href=""><img src="images/蛋糕2.jpg" alt=""></a>
<span>20yuan</span>
<h5>千层蛋糕</h5>
</li>
<li>
<a href=""><img src="images/蛋糕3.jpg" alt=""></a>
<span>25yuan</span>
<h5>水果蛋糕</h5>
</li>
</ul>
<div class="div3"></div>
<h3>特别提示</h3>
<div class="div4"></div>
<p>请客人保管好自己的财<br>产安全和账户密码。</p>
</div>
</article>
<!-- 末尾部分 -->
<div class="c" align="center">
<a href="">关于我们</a>|<a href="">联系我们</a><a href="">
加入收藏</a>|<a href="">留言板</a>
<p>版权所有©2019爱尚美食 Email: ASMS@163.com</p>
<p>地址:衡阳市珠晖区衡阳师范学院 联系方式:88888888</p>
</div>
</body>
</html>
*{
margin:0 auto;
padding: 0px;
}
body{
height: 100%;
width: 100%;
}
header{
background-color: #f6f6f6;
width: 1200px;
height: 80px;
margin:0 auto;
position: relative;
}
header div{
float: left;
}
/*.logo{
height: 20px;
width: 20px;
margin-top: 10px;
margin-left: 12px;
position: absolute;
}*/
.title{
font-family: "华文行楷";
font-weight: bold; /*加粗*/
font-size: 68px;
text-align: center;
line-height: 80px;
margin-top: 5px;
margin-left: 27%;
color: #333;
}
.language_change select{
margin-left: 10px;
height: 24px;
}
a{
text-decoration: none;
color: #06f;
}
a:hover{
color: #f00;
}
/*.logo{
background-image: url(images/logo.jpg);
background-size: 300px 300px;
}*/
.login_register{
float: right;
margin-right: 10px;
}
.shop_cart{
float: right;
margin-right: 40px;
padding-left:22px;
}
li{
list-style: none;
}
menu{
background-color: #f6f6f6;
height: 70px;
width: 1200px;
}
menu ul{
float: left;
margin-left: 12%;
}
menu ul li{
height: 35px;
width: 150px;
margin-left:30px;
background-color: #fdea66;
float: left;
margin-left: 12px;
text-align: center;
line-height: 35px;
}
menu ul li a{
font-weight: bold;
color: #333;
font-size: 20px;
height: 40px;
width: 90px;
display: block; /*点击呈块状*/
letter-spacing: lem; /*字间距*/
}
menu ul li a:hover{
color: #f0c; /*点击后呈现的颜色*/
}
article{
width: 100%;
}
.topic1{
height: 300px;
width: 1200px;
background-color: #f6f6f6;
}
.search{
float: right;
margin-right: 30px;
width: 230px;
height: 180px;
background-color: #fdea66;
text-align: center;
}
.search input{
margin-top: 60px;
margin-left: 35px;
height: 30px;
width: 160px;
border:3px solid #06f;
float: left;
background-color: #fee;
}
.search input:last-child{
margin-top: 15px;
margin-left: 65px;
height: 30px;
width: 110px;
border:3px solid #06f;
float: left;
color: #06f;
letter-spacing: 0.2em;
font:bold 22px "华文行楷";
}
/*第一部分*/
.topic1 h1{
font-family: "华文行楷";
font-size:38px;
color: #06f;
}
.topic1 ul{
margin-left: 30px;
position: absolute;
}
.topic1 ul li{
float: left;
margin-right: 20px;
}
.topic1 ul li img{
height: 150px;
width: 200px;
}
.topic1 ul li img:hover{
border:5px solid #f00;
}
.topic1 ul li span{
font-family: "华文行楷";
text-align: center;
font-size: 20px;
color: #f00;
display: block;
}
.topic1 ul li h5{
font-family: "华文行楷";
text-align: center;
font-size: 22px;
color: #6c0;
}
/*第二部分*/
.topic2{
height: 300px;
width: 1200px;
background-color: #f6f6f6;
}
.topic2 h1{
font-family: "华文行楷";
font-size:38px;
color: #06f;
}
.div1{
width: 230px;
height: 245px;
background-color: #fdea66;
float: right;
position: relative;
margin-right:30px;
}
.div2
{
position:absolute;
text-align:right;
margin-left: 970px;
margin-top: 60px;
}
.div4
{
width: 230px;
border-bottom: 2px solid #06f;
margin-left: 940px;
margin-top: 56px;
position:absolute;
}
.topic2 h2{
float: right;
text-align: center;
font-family: "华文行楷";
font-weight: bold;
font-size:38px;
color: #06f;
margin-left: 970px;
margin-top: 10px;
position:absolute;
}
.topic2 a img{
height: 170px;
width: 170px;
float: right;
}
.topic2 ul{
margin-left: 30px;
position: absolute;
}
.topic2 ul li{
float: left;
margin-right: 20px;
}
.topic2 ul li img{
height: 150px;
width: 200px;
}
.topic2 ul li img:hover{
border:5px solid #f00;
}
.topic2 ul li span{
font-family: "华文行楷";
text-align: center;
font-size: 20px;
color: #f00;
display: block;
}
.topic2 ul li h5{
font-family: "华文行楷";
text-align: center;
font-size: 22px;
color: #6c0;
}
/*第三部分*/
.topic3{
height: 300px;
width: 1200px;
background-color: #f6f6f6;
}
.div3{
width: 230px;
height: 150px;
background-color: #fdea66;
float: right;
position: relative;
margin-right:30px;
}
.topic3 h3{
margin-right: 30px;
text-align: center;
font-family: "华文行楷";
font-weight: bold;
font-size:38px;
color: #06f;
position: absolute;
margin-left: 970px;
margin-top: 10px;
}
.div5
{
width: 230px;
border-bottom: 2px solid #06f;
margin-left: 940px;
margin-top: 70px;
position:absolute;
}
.topic3 p{
text-align: center;
font-family: "华文行楷";
font-weight: bold;
font-size:22px;
color: #06f;
position: absolute;
margin-left: 945px;
margin-top: 90px;
}
.topic3 h1{
font-family: "华文行楷";
font-size:38px;
color: #06f;
}
.topic3 ul{
margin-left: 30px;
position: absolute;
}
.topic3 ul li{
float: left;
margin-right: 20px;
}
.topic3 ul li img{
height: 150px;
width: 200px;
}
.topic3 ul li img:hover{
border:5px solid #f00;
}
.topic3 ul li span{
font-family: "华文行楷";
text-align: center;
font-size: 20px;
color: #f00;
display: block;
}
.topic3 ul li h5{
font-family: "华文行楷";
text-align: center;
font-size: 22px;
color: #6c0;
}
.c{
margin-top: 25px;
}
最终界面
溫馨提示: 由于界面太大就截为两幅图片