第七天 小米官网实战
思路：从上到下 从左到右 从大到小
图片及样式
页面样式
所需图片
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商城</title>
<link rel="icon" href="favicon.ico">
<!-- 先重置样式 -->
<link rel="stylesheet" href="css/reset.css">
<!-- 再引自己写的 -->
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- 广告条 -->
<a class="adv1" href=""></a>
<!-- 导航栏 -->
<div class="nav">
<div class="navIn md">
<div class="left">
<a href="//www.mi.com/index.html">小米商城</a>
<span>|</span>
<a href="//www.miui.com/">MIUI</a>
<span>|</span>
<a href="//www.mi.com/index.html">小米商城</a>
<span>|</span>
<a href="//iot.mi.com">IoT</a>
<span>|</span>
<a href="//i.mi.com/">云服务</a>
<span>|</span>
<a href="//airstar.com/home">天星数科</a>
<span>|</span>
<a href="//youpin.mi.com/">有品</a>
<span>|</span>
<a href="//xiaoai.mi.com/">小爱开放平台</a>
<span>|</span>
<a href="//qiye.mi.com/">企业团购</a>
<span>|</span>
<a href="//www.mi.com/aptitude/list/?id=41">资质证照</a>
<span>|</span>
<a href="//www.mi.com/aptitude/list/">协议规则</a>
<span>|</span>
<a href="//www.mi.com/appdownload/">
下载app</a>
<span>|</span>
<a href="https://xiaomishare.mi.com/?from=micom">智能生活</a>
<span>|</span>
<a href="javascript:;">Select Location</a>
<span>|</span>
</div>
<div class="right">
<a class="logIn" href="">登录</a>
<span>|</span>
<a class="registor" href="">注册</a>
<span>|</span>
<a class="registor" href="">消息通知</a>
<a class="shopCar" href="">购物车</a>
</div>
</div>
</div>
<!-- 灰色区域 -->
<div class="grayArea">
<div class="grayAreaIn md">
<!-- 广告条 -->
<a class="adv2" href=""></a>
<div class="title">
<h3 class="phone">手机</h3>
<a class="all" href="">查看全部</a>
</div>
<div class="main">
<div class="left"></div>
<div class="right">
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
<li>
7
</li>
<li>
8
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
css
reset.css
*{
margin: 0;
padding: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
}
input,button{
outline: none;
}
index.css
body{
font-size: 14px;
color: #333;
}
/* 版心 */
.md{
width: 1226px;
margin: 0 auto;
}
/* 广告条 */
.adv1{
background: url("../images/adv1.jpg") center center no-repeat;
background-size: cover;
display: block;
height: 120px;
}
/* 导航栏 */
.nav{
width: 100%;
background: #333;
height: 40px;
}
.nav .left{
float: left;
}
.nav .right{
float: right;
}
.nav a{
background: rgba(0,0,0,0,);
color: #757575;
height: 40px;
line-height: 40px;
font-size: 12px;
}
.nav span{
margin: 0 3px;
}
.navIn .right .shopCar{
width: 120px;
height: 40px;
margin-left: 20px;
}
.navIn .right .shopCar:hover{
background:#fff;
color:#ff6700;
}
/* 灰色区域 */
.grayArea{
height: 500px;
background:#f5f5f5;
}
.adv2{
display: block;
background: url("../images/adv2.jpg") center center no-repeat;
background-size: cover;
height: 140px;
margin-bottom: 20px;
}
.title{
height: 58px;
line-height: 58px;
}
.title .phone{
float: left;
font-size: 22px;
font-weight: 200;
}
.title .all{
float: right;
font-size: 16px;
color: #424242;
}
.main{
height: 614px;
}
.main .left{
width: 234px;
height: 614px;
float: left;
background: url("../images/phone1.jpg") center center no-repeat;
background-size: cover;
}
.main .right{
width: 992px;
height: 614px;
float: right;
}
.main .right li{
width: 234px;
height: 300px;
background: orchid;
margin:0 0 14px 14px;
float: left;
}
