模块三 静态网页制作

主要注意事项

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;