1学习内容

综合运用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>rjj1125</span></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="#">官方QQ</a> </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 0pxrgba(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 0pxrgba(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 0pxrgba(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;
}