页面展示：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
img{
width:100%;
height: 100%;
}
.header{
/*height: 38px;*/
color: #b0b0b0;
background: #333;
}
.header .container{
width: 1128px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
/*height: 38px;*/
/*line-height: 38px;*/
}
.header .acount{
float: right;
color: white;
/*height: 38px;*/
/*line-height: 38px;*/
}
.header a{
color: #b0b0b0;
line-height: 40px;
display: inline-block;
font-size: 12px;
margin-right: 5px;
}
.second{
color: #333;
background-color: #fff;
min-width: 1226px;
}
.second .container{
width: 1128px;
margin: 0 auto;
}
.second .logo{
float: left;
width: 200px;
height: 100px;
margin-top: 22px;
}
.second .menu{
float: left;
width: 700px;
height: 100px;
line-height: 100px;
font-size: 16px;
}
.second .acount{
float: right;
width: 150px;
height: 100px;
margin-top: 22px;
}
.second a{
display: inline-block;
padding: 0 10px;
color: #333;
text-decoration: none;
}
.second a:hover{
color: chocolate;
}
.silder{
}
.silder .container{
width: 1226px;
height: 460px;
margin: 0 auto;
}
.news{
margin-top: 14px;
}
.news .container{
width: 1226px;
margin: 0 auto;
margin-top: 14px;
}
.news .chan{
float: left;
width: 244px;
height: 170px;
background: #5f5750;
}
.news .list-item{
float: left;
width: 316px;
height: 170px;
margin-left: 10px;
}
.news .chan .item{
height: 82px;
width: 76px;
float: left;
padding: 2px;
margin-bottom: 3px;
display: block;
}
.news a{
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.news a:hover{
color: rgba(255, 255, 255, 1);
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a >小米商城</a>
<a >MIUI</a>
<a >loT</a>
<a >云服务</a>
<a >天星数科</a>
<a >有品</a>
<a >小爱开放平台</a>
<a >企业团购</a>
<a >资质证照</a>
<a >协议规则</a>
<a >下载app</a>
<a >智能生活</a>
</div>
<div class="acount">
<a>登录</a>
<a>注册</a>
<a>消息通知</a>
<a>购物车</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="second">
<div class="container">
<div class="logo">
<a href="https://www.mi.com/index.html" title="小米官网" style="display: inline-block">
<img src="/static/小米图标.png" style="height: 56px " alt="">
</a>
</div>
<div class="menu">
<a href="https://www.mi.com/index.html">Xiaomi手机</a>
<a href="https://www.mi.com/index.html">Remi手机</a>
<a href="https://www.mi.com/index.html">电视</a>
<a href="https://www.mi.com/index.html">笔记本</a>
<a href="https://www.mi.com/index.html">平板</a>
<a>家电</a>
<a>路由器</a>
<a>服务中心</a>
<a>社区</a>
</div>
<div class="acount">
<a>搜索</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="silder">
<div class="container">
<img src="/static/中间图片.png ">
</div>
</div>
<div class="news">
<div class="container">
<div class="chan">
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 15px;margin-right: 12px;margin-top: 14px">
<span>小米秒杀</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 15px;margin-right: 12px;margin-top: 14px">
<span>企业团购</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 18px;margin-right: 15px;margin-top: 14px">
<span>F码通道</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 15px;margin-right: 12px;margin-top: 14px">
<span>米粉卡</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 15px;margin-right: 12px;margin-top: 14px">
<span>以旧换新</span>
</a>
</div>
<div class="item">
<a href="https://www.mi.com/index.html">
<img src="/static/图标.png" style="width: 30px;height: 24px;margin-left: 15px;margin-right: 12px;margin-top: 14px">
<span>花费充值</span>
</a>
</div>
<div class="clear: both"></div>
</div>
<div class="list-item">
<img src="/static/1.png">
</div>
<div class="list-item">
<img src="/static/2.png">
</div>
<div class="list-item">
<img src="/static/3.png">
</div>
<div class="clear: both"></div>
</div>
</div>
</body>
</html>知识点总结：
- body标签，默认会有一个边距，造成页面的四边都有白色的间隙，如何去除？
body{ margin: 0; }不加之前：
去掉间隙后：
- 内容居中
文本居中【文本在这个区域居中】
.c2{ background-color: pink; width: 300px; height: 300px; }<div class="c2"> <div style="width: 100px;text-align: center">SHH</div> </div>
区域居中【自己要有宽度+margin-left:auto ;margin-right:auto】
- 父亲没有高度或者没有宽度，被孩子支撑起来
- 如果存在float,一定要加：
<div style="clear: both"></div>
- a标签是行内标签，行内标签的高度、内外边距，默认无效。要用
display: inline-block;
- 垂直方向居中
文本+line-height
图片+边距
- a标签默认有下划线，去掉：
text-decoration: none;
