综合运用HTML、CSS知识制作静态网页。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京吃食府title>
<link rel="stylesheet" href="css/index.css ">
head>
<body>
<div class="header wrapper ">
<h1>
<a href="./index.html"><img src="resource/logo_0.png"> a>
h1>
<div class="nav">
<ul>
<li><a href="./index.html">首页a>li>
<li><a href="#">菜谱a> li>
<li><a href="#">本店介绍a>li>
ul>
div>
<div class="search">
<input type="text" placeholder="请输入关键字">
<button>button>
div>
<div class="user">
<img src="resource/header.jpg">
<span>rjj1125span>
div>
div>
<div class="banner">
<div class="wrapper">
<div class="left">
<ul>
<li><a href="#">北平风味<span>>span> a>li>
<li><a href="#">川渝风味<span>>span> a>li>
<li><a href="#">闽南风味<span>>span> a>li>
<li><a href="#">西北风味<span>>span> a>li>
ul>
div>
<div class="right">
<h2>我的菜单h2>
<div class="content">
<dl>
<dt>北平风味dt>
<dd>驴打滚dd>
dl>
<dl>
<dt>川渝风味dt>
<dd>重庆小面dd>
dl>
<dl>
<dt>闽南风味dt>
<dd>灌汤包dd>
dl>
div>
<a href="#" class="more">全部菜单a>
div>
div>
div>
<div class="foods wrapper">
<h2>美食推荐h2>
<ul>
<li><a href="#">驴打滚a> li>
<li><a href="#">驴打滚a> li>
<li><a href="#">驴打滚a> li>
ul>
<a href="#" class="change">修改美食a>
div>
<div class="showFood wrapper">
<div class="title" >
<h2>美食推荐h2>
<img src="resource/logo_7.jpg">
<a href="#">查看全部a>
div>
<div class="content cleafix">
<ul>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
<li>
<a href="#">
<img src="resource/驴打滚.jpg">
<h3>驴打滚h3>
<p><img src="resource/logo_2.jpg"><span>火爆span> 1125人已购买p>
a>
li>
ul>
div>
div>
<div class="foot">
<div class="wrapper">
<div class="left">
<img src="resource/logo.jpg">
<p>京吃食府致力于让世人享受最地道的美味。
<br>2022年RJJ inc.保留所有权利。
p>
div>
<div class="right">
<dl>
<dt>关于京吃dt>
<dd><a href="#">了解京吃a> dd>
<dd><a href="#">加入京吃a> dd>
<dd><a href="#">廉洁举报a> dd>
dl>
<dl>
<dt>帮助中心dt>
<dd><a href="#">账户管理a> dd>
<dd><a href="#">购买指南a> dd>
<dd><a href="#">订单操作a> dd>
dl>
<dl>
<dt>服务支持dt>
<dd><a href="#">售后政策a> dd>
<dd><a href="#">自助服务a> dd>
<dd><a href="#">相关下载a> dd>
dl>
<dl>
<dt>关注我们dt>
<dd><a href="#">官方QQa> dd>
<dd><a href="#">官方微信a> dd>
<dd><a href="#">联系我们a> dd>
<dd><a href="#">公益基金会a> dd>
dl>
div>
div>
div>
<div class="bottom">
让全世界美食爱好者感受中华美食的魅力!
div>
body>
html>
/*去除默认内外边距和防止添加盒子内外边距撑大盒子*/
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*去除列表开头标点*/
li{
list-style: none;
}
/*去除超链接下划线*/
a{
text-decoration: none;
}
/*双伪元素防止浮动错误和避免塌陷*/
.cleafix:before,
.cleafix:after{
content: "";
display: table;
}
.cleafix:after{
clear: both;
}
body{
background-color: #f3f5f7;
}
.wrapper{
width: 1200px;
margin: 0 auto;
}
.header{
height: 57px;
margin: 30px auto;
box-shadow: 0px 2px 3px 0px
rgba(118,118,118,0.2);
}
h1{
float: left;
}
.nav{
float: left;
margin-left: 70px;
height: 57px;
}
.nav li{
float: left;
margin-right: 26px;
}
.nav li a{
display: block;
padding: 0 9px;
height: 57px;
line-height: 57px;
font-size: 18px;
color: black;
}
.nav li a:hover{
border-bottom: 2px solid #808080;
}
.search{
float: left;
margin-left: 59px;
width: 452px;
height: 52px;
border: 1px solid #808080;
}
.search input{
float: left;
padding-left: 20px;
width: 400px;
height: 50px;
border: 0;
font-size: 18px;
}
.search input::placeholder{
font-size: 16px;
color: #bfbfbf;
}
.search button{
float: left;
width: 50px;
height: 50px;
background-image: url(../resource/search.jpg);
border: 0;
}
.user{
float: right;
margin-right: 50px;
height: 50px;
line-height: 57px;
}
.user img{
/*调节图片垂直对齐方式,middle:居中*/
vertical-align: middle;
}
.user span{
color: #808080;
}
/*------------------------*/
.banner{
height: 420px;
}
.banner .wrapper{
height: 420px;
background-image: url(../resource/background_1.jpg);
}
.banner .left{
float: left;
padding: 0 20px;
width: 190px;
height: 420px;
background-color: rgba(0,0,0,0.3);
/*line控制文字属性,可继承*/
line-height: 105px;
}
.banner .left span{
float: right;
}
.banner .left a{
font-size: 20px;
color: white;
}
.banner .left a:hover{
color: black;
}
.banner .right{
float: right;
margin-top: 50px;
width: 200px;
height: 300px;
background-color: white;
}
.banner .right h2{
height: 48px;
background-color: grey;
text-align: center;
line-height: 48px;
font-size: 18px;
color: white;
}
.banner .right .content{
padding: 0 18px;
}
.banner .right .content dl{
padding: 12px 0;
border-bottom: 2px solid grey;
}
.banner .right .content dt{
font-size: 16px;
color: black;
}
.banner .right .content dd{
font-size: 14px;
color: #4e4e4e;
}
.banner .right .more{
display: block;
margin: 4px auto 0;
width: 180px;
height: 40px;
border: 1px solid black;
font-size: 16px;
color: black;
font-weight: 700;
text-align: center;
line-height: 40px;
}
/*---------------------*/
.foods{
margin-top: 10px;
padding: 0 30px;
height: 60px;
background-color: white;
box-shadow: 0px 2px 3px 0px
rgba(118,118,118,0.2);
line-height: 60px;
}
.foods h2{
float: left;
font-size: 20px;
color: grey;
}
.foods ul{
float: left;
margin-left: 30px;
}
.foods ul li{
float: left;
}
.foods li a{
border-left: 1px solid #bfbfbf;
padding: 0 30px;
color: black;
}
.foods .change{
float: right;
color: grey;
font-weight: 700;
}
/* -------------------------*/
.showFood{
margin-top: 25px;
}
.showFood .title{
height: 80px;
}
.showFood .title h2{
float: left;
margin-top: 40px;
font-size: 25px;
color: black;
font-weight:400;
}
.showFood .title img{
padding-left: 385px;
}
.showFood .title a{
float: right;
margin-right: 30px;
margin-top: 50px;
font-size: 18px;
color: #bfbfbf;
}
.showFood .content li{
float: left;
margin-right: 15px;
margin-top: 5px;
width: 228px;
height: 270px;
background-color: white;
box-shadow: 0px 2px 3px 0px
rgba(118,118,118,0.2);
}
.showFood .content li:nth-child(5n){
margin-right: 0;
}
.showFood .content li h3{
padding: 20px 80px;
font-size: 20px;
font-weight: 400;
color: #4e4e4e;
}
.showFood .content li p img{
margin: -4px 1px;
padding-top: 10px;
}
.showFood .content li p{
padding: 0 30px;
font-size: 14px;
color: #bfbfbf;
}
.showFood .content li span{
color: red;
font-size: 16px;
padding-right: 10px;
}
/*-----------------------------------*/
/*要清楚浮动的影响,内容类加入clearfix清除*/
.foot{
margin-top: 40px;
padding-top: 30px;
height: 350px;
background-color: white;
}
.foot .left{
float: left;
}
.foot .left p {
margin: 20px 0 15px;
color: #808080;
}
.foot .right{
float: right;
}
.foot .right dl{
float: left;
margin-left: 120px;
}
.foot .right dt{
font-size: 16px;
margin-bottom: 40px;
}
.foot .right dd{
padding: 10px;
}
.foot .right dd a{
font-size: 14px;
color: dimgrey;
}
.foot .right dd a:hover{
padding-bottom: 5px;
border-bottom: 1px solid #4e4e4e;
color: #4e4e4e;
}
.bottom {
padding-left: 480px;
padding-bottom: 50px;
background-color: white;
font: 700 25px 楷体;
color: #bfbfbf;
}