前端项目01 品优购项目 DAY05DAY 05 品优购项目学习目标：网页尾部的书写品优购首页布局 footer底部

DAY 05 品优购项目

学习目标：网页尾部的书写

品优购首页布局

footer底部制作

footer页面底部盒子通栏给一个高度灰色的背景（不需要给宽度）
footer里面首先一个大的版心
版心里面包含1号盒子 mod_service 服务模块 module模块的意思
版心里面包含2号盒子 mod_help 帮助模块
版心里面包含3号盒子 mod_copyright 版权模块

元素的显示和隐藏：style='display:none;'

<div class='footer'>
<div class='w'></div>
</div>

.footer {
    height:416px;
    /*对于整个盒子的高度来说，可以先看整个盒子的高度，大盒子与小盒子之间有间隙，所以需要加上padding值，需要将最开始测量的高度减去padding值*/
    background-color:#f5f5f5;
    padding-top:30px;
}

对于footer来说，主要是从上至下分为三个板块来划分，分别为mod_service、mod_help、mod_coppyright

mod_sevrice模块

对于mod_sevrice模块，横着排布，对于设置宽度，可以利用切片工具快速切分，切片工具先框选整个范围，之后再利用切片划分工具，进行垂直划分，只需填入需要划分的个数，就可以得到X等分；之后再测量宽度，即可得到数据的设定。

<div class="footer">
    <div class="w">
        <div class="mod_service">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</div>

行内元素给大小的时候，需要先转换。但是浮动的盒子是可以直接给大小的，不需要转换

.mod_service {
    height: 79px;
    background:pink;
    border-bottom: 1px solid #ccc;
}
.mod_service li {
/*浮动的盒子是可以直接给大小的，不需要转换*/
    float: left;
    width: 240px;
    height: 79px;
}

对于mod_service模块来说，我们可以看到对于其5个小盒子里面的划分来说，横着划分为两个盒子，更方便分析。主要原因在于横着第二个盒子，其还包含了上下两部分，不方便直接横着分析。

        <div class="mod_service">
            <ul>
                <li>
                    <i class="mod_service_icon mod_service_zheng">
                    </i>
                    <div class="mod_service_tit">
                        <h5>正品保障</h5>
                        <p>正品保障，提供发票</p>
                    </div>
                </li>
                <li>
                    <i class="mod_service_icon mod_service_su">
                    </i>
                    <div class="mod_service_tit">
                        <h5>极速物流</h5>
                        <p>极速物流，迅速送达</p>
                    </div>
                </li>
                <li>
                    <i class="mod_service_icon mod_service_wu">
                    </i>
                    <div class="mod_service_tit">
                        <h5>无忧售后</h5>
                        <p>7天无理由更换</p>
                    </div>
                </li>
                <li>
                    <i class="mod_service_icon mod_service_te">
                    </i>
                    <div class="mod_service_tit">
                        <h5>特色服务</h5>
                        <p>私人定制服务</p>
                    </div>
                </li>
                <li>
                    <i class="mod_service_icon mod_service_bang">
                    </i>
                    <div class="mod_service_tit">
                        <h5>帮助中心</h5>
                        <p>您的小帮手</p>
                    </div>
                </li>
            </ul>
        </div>

.mod_service_icon {
    /*浮动的盒子 可以直接给大小 不需要转换*/
    float: left;
    width: 50px;
    height: 50px;
    margin-left: 35px;
    /*背景图片是给定的所有图标的图片，在选择是哪个图标时，我们只需要找准在整个图片上我们需要那个图标的位置即可，在选择那个图标的位置时，可以先将其框选住之后，右键的信息，点左上角，即可得到其XY坐标*/
    background: url(../img/icons.png) no-repeat;
}
.mod_service_zheng {
    /*对于背景图片位置的选择来说，为什么要使用负数，这点我不是很理解*/
    background-position: -253px -3px;
}
.mod_service_tit {
    float: left;
    margin-left: 5px;
}
.mod_service_tit h5 {
    margin: 5px 0;
}

mod_help 模块

对于mod_help模块来说，与mod_service模块类似，可以直接划分为X块，之后再进行内部具体形式的设置。对于mod_help模块来说，我们可以看到每个模块都是一个大标题下面划分出需要并列的内容，这种形式就可以利用dt、dd来书写。

        <div class="mod_help">
            <dl>
                <dt>购物指南</dt>
                <dd>
                    <a href="#">购物流程</a>
                    <a href="#">会员介绍</a>
                    <a href="#">生活旅行/团购</a>
                    <a href="#">常见问题</a>
                    <a href="#">联系客服</a>
                </dd>
            </dl>
            <dl class="mod_help_item mod_help_app">
            <!--对于需要两个类名限制的样式，可以直接并列，中间用空格隔开即可-->
                <dt>常见问题</dt>
                <dd>
                    <img src="upload/erweima.png" alt="">
                    <p>品优购客户端</p>
                </dd>
            </dl>
        </div>

.mod_help_app dt,.mod_help_app p {
    padding-left: 15px;
}

.mod_help_app img {
    margin: 7px 0;
}

插入图片要放到upload中

mod_copyright 模块

对于该部分来说，直接横向划分为两个模块，即分别为一连串链接和一处信息。

        <div class="mod_copyright">
            <p class="mod_copyright_links">
                <a href="#">关于我们</a>
                <i>|</i>
            </p>
            <p class="mod_copyright_info">地址<br>邮编</p>
        </div>

段落换行
行高即设置的是行与行之间的距离

.mod_copyright {
    text-align: center;
}
.mod_copyright_links {
    margin: 20px 0 15px 0;
}
.mod_copyright_info {
    height: 5px;
}

前端项目01 品优购项目 DAY05

DAY 05 品优购项目

品优购首页布局

footer底部制作