模块三 静态网页制作
主要注意事项
header部分：
<div class=header>
Nav导航部分通常用ul li a嵌套的模式
版心设置左右,分别设置左右浮动的形式
左侧：
<div class="header">
<div class="inner-c header-c">
<!-- header左侧 -->
<div class="header-left">
右侧：
<!-- header右侧 -->
<div class="header-right">
<!-- 右侧的导航 -->
content部分
包含 mian hot-product hot-phone三个部分
mian的左侧列表用ul li a嵌套的模式
<ul class="nav3">
<li><a href="#">全部商品分类</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">智能硬件</a></li>
<li><a href="#">耳机/音箱</a></li>
<li><a href="#">路由器/移动电源</a></li>
<li><a href="#">保护套/后盖/贴膜</a></li>
<li><a href="#">数据线/电源适配器</a></li>
<li><a href="#">周边配件</a></li>
</ul>
hot-product 部分
同理，采用ul嵌套li标签，然后在li中插入图片，注意图片大小，li的宽度吗加间距不能超过总宽度，不然会有一个li被挤压到第二行，无法做到一行5个li
如右图：需要在li中在嵌套ul li的形式
一个li中包含四个小图标
<li>
<ul class="p1">
<li class="M"><img src="images/1450855246-61162.png" alt=""><p>M码通道</p></li>
<li class="huanxin"><img src="images/1450855279-64872.png" alt=""><p>以旧换新</p></li>
<li class="yiwaibao"><img src="images/1450855198-58056.png" alt=""><p>魅族意外保</p></li>
<li class="huigoudan"><img src="images/1451960447-93534.png" alt=""><p>回购单查询</p></li>
</ul>
</li>
hot-phone部分
先设置文字p和图片的公共部分，然后再进行特定文字的样式设置，下方为某一个li标签。
<li class="note3">
<div class="label">
<div>热卖</div>
</div>
<div class="info">
<img src="images/CnQOjVf6EfOAKlj2AAvhVMfnh40856_180x180.png" alt="">
<p class="type">魅蓝note3</p>
<p class="date">11日-12日 限量开售</p>
<p class="price">￥799</p>
</div>
</li>
为所有li标签内的img和p都设置居中的公共样式：
.hot-phone .detail li .info p{
text-align: center;
}
.hot-phone .detail li .info img{
text-align: center;
margin: 35px;
}
补充：ul的属性名是detail，此时文字和图片都进行了居中（热卖是另一部分，这里忽略）,效果如下：
设置图片以及下方三行文字的居中.png
为居中的三行文字再设置样式，其属性值分别为 type date price
.hot-phone .detail li .info .type{
font-size: 14px;
}
.hot-phone .detail li .info .date{
font-size: 12px;
line-height: 21px;
color: #999999;
}
.hot-phone .detail li .info .price{
color: #E02B63;
font-size: 16px;
line-height: 27px;
}
此时的样式为：
最终的样式.png
footer copyright部分
注意盒子宽高的设置，版心inner-c之前设置过width：1370px，margin：0 auto；的样式，后面footer-c和copy-right-c就不用设置宽度了
/* 公共样式 */
.inner-c {
width: 1370px;
margin: 0 auto;
}
其他需要注意的知识点
1.长文字隐藏
文字隐藏.jpg
首先设置文字的最大宽度
.content .hot-company .detail li .top .info{
max-width: 248px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
2.盒子重叠现象，注意清除浮动
clear：both;
