<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#all{
width: 1349px;
height: 2932px;
/* https://blog.youkuaiyun.com/Ariel_201311/article/details/79947377 针对写好的网页会岁流浪起的界面变小而变乱 */
}
*{
margin: 0;
padding: 0;
}
#header{
width: 100%;
height: 40px;
background-color: #f2f2f2;
display:flex;
color: #666;
align-items:center;
font-size: 14px;
}
.header_left{
margin-left: 69.5px;
width: 255px;
height: 40px;
display:flex;
justify-content:space-between;
align-items:center;
}
.header_right{
margin-right: 69.5px;
margin-left: 425px;
display:flex;
justify-content:space-between;
width: 515px;
height: 40px;
/* 弹性盒子居中 */
align-items:center;
}
/* 以前总结 弹性盒子一定要给宽高 要确认好每一个盒子 */
#contenter{
width: 100%;
height: 2600px;
display: flex;
}
.con_left{
width: 69.5px;
height: 1200px;
/* background-color:lawngreen; */
}
.content{
width: 1210px;
height: 1200px;
}
.ShouSuo{
width: 1210px;
height: 89px;
/* background-color: aqua; */
margin-top: 21px;
}
.ShouSuo1{
width: 1210px;
height: 57px;
/* background-color: red; */
display: flex;
align-items: center;
}
.Log{
width: 165px;
height: 57px;
/* background-color: chocolate; */
background-image: url(1.png);
background-repeat: no-repeat;
background-size: 100%;
}
.DiZhi{
width: 32px;
height: 21px;
/* background-color:navy; */
margin-left: 54px;
margin-right: 88px;
}
.ShouSuoX{
width: 452px;
height: 14px;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 12px;
/* background-color: brown; */
border: 2px #cda45a solid;
}
.ShouSuoAnNiu{
width: 100px;
height: 40px;
background-color: #cda45a;
border: 0;
margin-left: -2px;
color: white;
font-size: 20px;
}
#TuiPei{
width: 149px;
height: 40px;
background-image: url(2.png);
background-repeat: no-repeat;
background-size: 90%;
margin-left: 20px;
}
.ShouSuo2{
width: 1210px;
height: 19px;
display:flex;
align-items: center;
}
.ShouSuo2Item{
margin-right: 20px;
font-size:14px;
color: #b4b4b4;
}
.FenLei{
width: 1210px;
height: 434px;
display:flex;
/* background-color: #cda45a; */
}
.Fenlei_left{
width: 233px;
height: 434px;
background-color: #313131;
}
.Fenlei_right{
width: 977px;
height: 434px;
/* background-color: aqua; */
}
li{
list-style: none;
}
div>ul>li{
display:flex;
justify-content:space-between;
/* background-color: #313131; */
height: 49.5px;
align-items:center;
padding-left: 16px;
}
ul{
color: white;
}
ul>li>ul{
display:flex;
}
ul>div.QuanBuFenlei{
height: 44px;
line-height: 44px;
background-color:#cda55a;
padding-left: 16px;
font-size: 18px;
}
ul>li>ul>li{
color: #b4b4b4;
font-size: 12px;
margin-right: 4px;
}
ul>li>ul:last-child{
margin-right: 10px;
}
.Fenlei_right_top{
height: 44px;
/* background-color: chocolate; */
border-bottom: 2px #cda55a solid;
}
.Fenlei_right_top>span{
line-height: 44px;
margin-right: 62px;
/* margin-left: 10px; */
}
.Fenlei_right_top>span:first-child{
margin-left: 32px;
}
.Fenlei_right_buttom{
height: 388px;
padding-top: 1px;
display:flex;
}
.Fenlei_right_buttom_left{
width: 713px;
height: 373px;
background-image: url(3.png);
background-repeat: no-repeat;
background-size: 100%;
margin-left: 10px;
/* margin-top坍塌,用paading-top隔离下 */
margin-top: 16px;
}
.Fenlei_right_buttom_right{
width: 236px;
height: 371px;
/* background-color: aqua; */
margin-top: 16px;
margin-left: 20px;
}
.Fenlei_right_buttom_right_1{
width: 236px;
height: 165px;
background-image: url(4.png);
background-repeat: no-repeat;
background-size: 100%;
}
.Fenlei_right_buttom_right_2{
width: 236px;
height: 195px;
background-image: url(5.png);
background-repeat: no-repeat;
background-size: 100%;
margin-top: 11px;
}
.ReYinDianYinBT{
width: 1210px;
height: 24px;
display: flex;
justify-content:space-between;
/* background-color:cadetblue; */
margin-top: 50px;
}
.ReYinDianYinBTLeft{
width: 96px;
height: 24px;
/* background-color: aqua; */
font-size: 24px;
margin-top: -5px;
}
.ReYinDianYinBTRight{
width: 269px;
height: 24px;
/* background-color: aqua; */
display: flex;
justify-content:space-between;
margin-top: 5px;;
font-size: 14px;
}
.ReYinDianYin{
margin-top: 21px;
width: 1210px;
/* 180 */
height: 265px;
display: flex;
justify-content:space-between;
}
.ReYinDianYinIn{
width: 180px;
/* 180 */
height: 355px;
/* 265+90 */
/* background-color: aquamarine; */
text-align: center;
}
.ReYinDianYinIn1{
width:180px ;
height: 265px;
background-image: url(img/11.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
.ReYinDianYinIn12{
width:180px ;
height: 265px;
background-image: url(img/12.jpg);
background-repeat: no-repeat;
background-size: 100% 120%;
}
.ReYinDianYinIn13{
width:180px ;
height: 265px;
background-image: url(img/13.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-size: 100% 120%;
}
.ReYinDianYinIn14{
width:180px ;
height: 265px;
background-image: url(img/14.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-size: 100% 120%;
}
.ReYinDianYinIn15{
width:180px ;
height: 265px;
background-image: url(img/15.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-size: 100% 120%;
}
.ReYinDianYinIn16{
width:180px ;
height: 265px;
background-image: url(img/16.jpg);
background-repeat: no-repeat;
background-size: 100%;
background-size: 100% 120%;
}
.ReYinDianYinIn2{
padding-top: 20px;
padding-bottom: 16px;
}
.ReYinDianYinIn3{
margin: 0 auto;
width: 120px;
height: 34px;
line-height: 34px;
border: 1px solid #BF954D;
border-radius: 2px;
font-size: 14px;
color: #BF974D;
text-align: center;
}
/* 休闲复用热映的代码,不适用的开始改 */
.ReYinDianYinInXiuXian{
width: 222px;
/* 180 */
height: 271.2px;
/* 265+90 */
/* background-color: aquamarine; */
text-align: left;
color: #666;
font-size: 14px;
}
.ReYinDianYinIn1XiuXian{
width:222px ;
height: 155px;
background-image: url(img/21.jpg);
background-repeat: no-repeat;
background-size: 120% 100%;
}
.ReYinDianYinIn1XiuXian2{
width:222px ;
height: 155px;
background-image: url(img/22.jpg);
background-repeat: no-repeat;
background-size: 120% 100%;
}
.ReYinDianYinIn1XiuXian3{
width:222px ;
height: 155px;
background-image: url(img/23.jpg);
background-repeat: no-repeat;
background-size: 120% 100%;
}
.ReYinDianYinIn1XiuXian4{
width:222px ;
height: 155px;
background-image: url(img/24.jpg);
background-repeat: no-repeat;
background-size: 120% 100%;
}
.ReYinDianYinIn1XiuXian5{
width:222px ;
height: 155px;
background-image: url(img/25.jpg);
background-repeat: no-repeat;
background-size: 120% 100%;
}
.ReYinDianYinIn2XiuXian{
text-align: left;
font-size: 18px;
margin-top: 17px;
margin-bottom: 7px;
color: black;
}
.ReYinDianYinIn2XiuXian2{
width: 222px;
height: 16px;
display: flex;
justify-content:space-between;
margin-top: 9px;
margin-bottom: 9px;
}
.ReYinDianYinIn2XiuXian2Left{
width:86px ;
height: 12px;
background-image: url(img/2001.png);
background-repeat: no-repeat;
background-size: 100%;
}
.LvYouBT{
margin-top: 74px;
width: 1210px;
height: 24px;
/* background-color: blueviolet; */
display: flex;
justify-content:space-between;
/* background-color:cadetblue; */
/* margin-top: 50px; */
}
.LvYouBTLeft{
width: 96px;
height: 24px;
/* background-color: aqua; */
font-size: 24px;
margin-top: -5px;
}
/* 写漏了一个class 很尴尬 */
.ReYinDianYinBTRightRight{
font-size: 14px;
}
.LvYou{
width: 1210px;
height: 340px;
display:flex;
justify-content:space-between;
margin-top: 18px;
}
.LY1{
width:387px ;
height: 340px;
background-image: url(img/31.jpg);
background-repeat: no-repeat;
background-size:100%;
}
.LY2{
width:387px ;
height: 340px;
background-image: url(img/32.jpg);
background-repeat: no-repeat;
background-size:100%;
}
.LY3{
width:387px ;
height: 340px;
background-image: url(img/33.jpg);
background-repeat: no-repeat;
background-size:100%;
}
/* 结婚复用了旅游的代码,稍稍改掉一些不同的 */
.JieHun3{
width:387px ;
height: 340px;
display:flex;
/* 这里想到了一个非常好用的东西 弹性布局也是可以布局上下的 */
justify-content:space-between;
flex-direction: column;
}
.JieHun31{
width:387px ;
height: 158px;
background-image: url(img/43.jpg);
background-repeat: no-repeat;
background-size:100%;
}
/* 商场的标题复用了 */
.SC{
width: 1210px;
height: 33px;
display: flex;
justify-content:space-between;
margin-top: 3px;
}
.SCItem{
width: 199px;
height: 33px;
/* background-color: #cda55a; */
line-height: 33px;
color: #666;
font-size: 14px;
}
#footer{
/* margin: 0 auto; */
/* margin-top: 1px; */
/* padding-top: 47px; */
width: 1349px;
height: 289.9px;
/* padding-bottom: 40px; */
background-color: #f2f2f2;
}
.footer_top{
width: 1210px;
height: 150px;
/* background-color: aqua; */
margin: 0 auto;
padding-top: 47px;
padding-bottom: 30px;
display: flex;
/* flex-wrap: nowrap; */
}
.footer_top1{
width: 242px;
height: 150px;
/* background-color: brown; */
}
.footer_top_1_1{
font-size: 14px;
color: #666;
margin-top: 10px;
}
.footer_top_1_1_2{
font-size: 16px;
color: black;
margin-bottom: 20px;
}
#wangbeihao{
width: 277px;
height: 48px;
background-color: aqua;
background-image: url(img/wb.png);
background-repeat:no-repeat;
background-size: 100%;
margin: 0 auto;
}
</style>
</head>
<body><div id="all">
<div id="header">
<div class="header_left">
<span>Hi,欢迎来到百度糯米</span>
<span>请登入</span>
<span>免费注册</span>
</div>
<div class="header_right">
<span>个人中心</span>
<span>最近浏览</span>
<span>|</span>
<span>糯米app</span>
<span>我是商家</span>
<span>|</span>
<span>帮助中心</span>
<span>食品安全</span>
</div>
</div>
<div id="contenter">
<div class="con_left"></div>
<div class="content">
<div class="ShouSuo">
<div class="ShouSuo1">
<div class="Log"></div>
<div class="DiZhi"><span>苏州</span></div>
<input type="text" class="ShouSuoX">
<input type="submit" value="搜索" class="ShouSuoAnNiu">
<div id="TuiPei"></div>
</div>
<div class="ShouSuo2">
<span style="margin-left:336px;" class="ShouSuo2Item">上门按摩</span>
<span class="ShouSuo2Item">钢琴试学班</span>
<span class="ShouSuo2Item">合合餐饮店</span>
<span class="ShouSuo2Item">拔罐减肥</span>
<span class="ShouSuo2Item">刮痧</span>
</div>
</div>
<div class="FenLei">
<div class="Fenlei_left">
<ul><div class="QuanBuFenlei">
<span>全部分类</span>
</div>
<li>
<span>酒店</span>
<ul>
<li>苏州</li>
<li>/</li>
<li>北京</li>
<li>/</li>
<li>上海</li>
</ul>
</li>
<li><span>旅游</span>
<ul>
<li>目的地攻略</li>
<li>/</li>
<li>行程计划</li>
</ul>
</li>
<li><span>电影</span>
<ul>
<li>看影片</li>
<li>/</li>
<li>找影院</li>
</ul>
</li>
<li><span>休闲娱乐</span>
<ul>
<li>足疗按摩</li>
<li>/</li>
<li>演出赛事</li>
</ul>
</li>
<li><span>结婚</span>
<ul>
<li>婚纱摄影</li>
<li>/</li>
<li>婚庆服务</li>
</ul>
</li>
<li><span>生活服务</span>
<ul>
<li>配镜</li>
<li>/</li>
<li>婚纱摄影</li>
</ul>
</li>
<li><span>美食</span>
<ul>
<li>小吃快餐</li>
<li>/</li>
<li>甜品</li>
<li>/</li>
<li>蛋糕</li>
</ul>
</li>
<li><span>丽人</span>
<ul>
<li>美容</li>
<li>/</li>
<li>美发SPA</li>
<li>/</li>
<li>美甲</li>
</ul>
</li>
</ul>
</div>
<div class="Fenlei_right">
<div class="Fenlei_right_top">
<span>首页</span>
<span>酒店</span>
<span>出行</span>
<span>电影</span>
<span>结婚</span>
<span>外卖</span>
</div>
<div class="Fenlei_right_buttom">
<div class="Fenlei_right_buttom_left"></div>
<div class="Fenlei_right_buttom_right">
<div class="Fenlei_right_buttom_right_1"></div>
<div class="Fenlei_right_buttom_right_2"></div>
</div>
</div>
</div>
</div>
<div class="ReYinDianYinBT">
<div class="ReYinDianYinBTLeft"><span>热映电影</span></div>
<div class="ReYinDianYinBTRight">
<div class="ReYinDianYinBTRightLeft">
<span>看影片</span>
<span>/</span>
<span>找影院</span>
<span>/</span>
<span>看票房</span>
</div>
<div class="ReYinDianYinBTRightRight">查看全部</div>
</div>
</div>
<div class="ReYinDianYin">
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn1"></div>
<div class="ReYinDianYinIn2"><span>海王</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn12"></div>
<div class="ReYinDianYinIn2"><span>大人物</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn13"></div>
<div class="ReYinDianYinIn2"><span>来电狂响</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn14"></div>
<div class="ReYinDianYinIn2"><span>命运之夜-天之杯</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn15"></div>
<div class="ReYinDianYinIn2"><span>白蛇:缘起</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
<div class="ReYinDianYinIn">
<div class="ReYinDianYinIn16"></div>
<div class="ReYinDianYinIn2"><span>大黄蜂</span></div>
<div class="ReYinDianYinIn3"><span>选座购票</span></div>
</div>
</div>
<hr style="margin-top:118px;color:#ebebeb;height: 1px;">
<!-- 休闲娱乐复用了热映电影的代码 -->
<div class="ReYinDianYinBT">
<div class="ReYinDianYinBTLeft"><span>休闲娱乐</span></div>
<div class="ReYinDianYinBTRight" style="width: 342px;">
<div class="ReYinDianYinBTRightLeft" style="width: 269px;" >
<span>KTV</span>
<span>/</span>
<span>足浴按摩</span>
<span>/</span>
<span>轰趴馆</span>
<span>/</span>
<span>运动健身</span>
</div>
<div class="ReYinDianYinBTRightRight">查看全部</div>
</div>
</div>
<div class="ReYinDianYin">
<div class="ReYinDianYinInXiuXian">
<div class="ReYinDianYinIn1XiuXian"></div>
<div class="ReYinDianYinIn2XiuXian"><span>夜泊水疗馆</span></div>
<div class="ReYinDianYinIn2XiuXian2">
<div class="ReYinDianYinIn2XiuXian2Left"></div>
<div class="ReYinDianYinIn2XiuXian2Right"><span>132条评论</span></div>
</div>
<div class="ReYinDianYinIn2XiuXian2">
<div><span>温泉洗浴</span><span>|</span><span>枫桥地区</span></div>
<div><span>已售2798</span></div>
</div>
<div class=""><span>¥68/人</span></div>
</div>
<div class="ReYinDianYinInXiuXian">
<div class="ReYinDianYinIn1XiuXian2"></div>
<div class="ReYinDianYinIn2XiuXian"><span>音乐风</span></div>
<div class="ReYinDianYinIn2XiuXian2">
<div class="ReYinDianYinIn2XiuXian2Left"></div>
<div class="ReYinDianYinIn2XiuXian2Right"><span>132条评论</span></div>
</div>
<div class="ReYinDianYinIn2XiuXian2">
<div><span>温泉洗浴</span><span>|</span><span>枫桥地区</span></div>
<div><span>已售2798</span></div>
</div>
<div class=""><span>¥68/人</span></div>
</div>
<div class="ReYinDianYinInXiuXian">
<div class="ReYinDianYinIn1XiuXian3"></div>
<div class="ReYinDianYinIn2XiuXian"><span>星空艺术馆</span></div>
<div class="ReYinDianYinIn2XiuXian2">
<div class="ReYinDianYinIn2XiuXian2Left"></div>
<div class="ReYinDianYinIn2XiuXian2Right"><span>132条评论</span></div>
</div>
<div class="ReYinDianYinIn2XiuXian2">
<div><span>温泉洗浴</span><span>|</span><span>枫桥地区</span></div>
<div><span>已售2798</span></div>
</div>
<div class=""><span>¥68/人</span></div>
</div>
<div class="ReYinDianYinInXiuXian">
<div class="ReYinDianYinIn1XiuXian4"></div>
<div class="ReYinDianYinIn2XiuXian"><span>嗨秀派对KTV</span></div>
<div class="ReYinDianYinIn2XiuXian2">
<div class="ReYinDianYinIn2XiuXian2Left"></div>
<div class="ReYinDianYinIn2XiuXian2Right"><span>132条评论</span></div>
</div>
<div class="ReYinDianYinIn2XiuXian2">
<div><span>温泉洗浴</span><span>|</span><span>枫桥地区</span></div>
<div><span>已售2798</span></div>
</div>
<div class=""><span>¥68/人</span></div>
</div>
<div class="ReYinDianYinInXiuXian">
<div class="ReYinDianYinIn1XiuXian5"></div>
<div class="ReYinDianYinIn2XiuXian"><span>百乐门贩量式KTV</span></div>
<div class="ReYinDianYinIn2XiuXian2">
<div class="ReYinDianYinIn2XiuXian2Left"></div>
<div class="ReYinDianYinIn2XiuXian2Right"><span>132条评论</span></div>
</div>
<div class="ReYinDianYinIn2XiuXian2">
<div><span>温泉洗浴</span><span>|</span><span>枫桥地区</span></div>
<div><span>已售2798</span></div>
</div>
<div class=""><span>¥68/人</span></div>
</div>
</div>
<div class="LvYouBT">
<div class="LvYouBTLeft"><span>旅游</span></div>
<div class="ReYinDianYinBTRightRight" style="margin-top: 5px;"><span>查看全部</span></div>
</div>
<div class="LvYou">
<div class="LY1"></div>
<div class="LY2"></div>
<div class="LY3"></div>
</div>
<!-- 结婚复用旅游的代码 -->
<div class="LvYouBT">
<div class="LvYouBTLeft"><span>结婚</span></div>
<div class="ReYinDianYinBTRightRight" style="margin-top: 5px;"><span>查看全部</span></div>
</div>
<div class="LvYou">
<div class="LY1" style="background-image: url(img/41.jpg);"></div>
<div class="LY2" style="background-image: url(img/42.jpg);"></div>
<div class="JieHun3">
<div class="JieHun31"> </div>
<div class="JieHun31" style="background-image: url(img/44.jpg);"> </div>
</div>
</div>
<!-- 复用个标题 热门商场-->
<div class="LvYouBT">
<div class="LvYouBTLeft" style="font-size:16px;"><span>热门商场</span></div>
</div>
<div class="SC">
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
</div>
<div class="SC">
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
</div>
<div class="SC">
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
</div>
<div class="SC">
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem">久光百货</div>
<div class="SCItem" style="margin-bottom:1px;padding-bottom:1px;"></div>
</div>
</div>
<div class="con_left"></div>
</div>
<div id="footer">
<div class="footer_top">
<div class="footer_top1">
<div class="footer_top_1_1 footer_top_1_1_2">用户帮助</div>
<div class="footer_top_1_1">常见团购问题</div>
<div class="footer_top_1_1">开放API</div>
</div>
<div class="footer_top1">
<div class="footer_top_1_1 footer_top_1_1_2">用户帮助</div>
<div class="footer_top_1_1">常见团购问题</div>
<div class="footer_top_1_1">开放API</div>
</div>
<div class="footer_top1">
<div class="footer_top_1_1 footer_top_1_1_2">用户帮助</div>
<div class="footer_top_1_1">常见团购问题</div>
<div class="footer_top_1_1">开放API</div>
</div>
<div class="footer_top1">
<div class="footer_top_1_1 footer_top_1_1_2">用户帮助</div>
<div class="footer_top_1_1">常见团购问题</div>
<div class="footer_top_1_1">开放API</div>
<div class="footer_top_1_1">开放API</div>
</div>
<div class="footer_top1">
<div class="footer_top_1_1 footer_top_1_1_2">用户帮助</div>
<div class="footer_top_1_1">常见团购问题</div>
<div class="footer_top_1_1">开放API</div>
<div class="footer_top_1_1">开放API</div>
</div>
</div>
<div id="wangbeihao"></div>
</div>
</div></body>
</html>
<!-- 百度糯米 未得凌云(技)艺,不想登天梯 https://su.nuomi.com/ -->
css 60分很简单,100分很难