电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】

完成后的动态效果演示 >>>
在这里插入图片描述
如果你已经从第一节教程看到了这，恭喜你，这个教程学完这最后一节就结束了

第一步，分析布局

该部分布局共分为5个组件:
（1）一个 ul > li 水平栏
（2）一个图片
（3）一个 dl 列表
（4）一个二维码
（5）一个页脚
在这里插入图片描述

第二步，根据布局写html标签

index.html文件代码

   <hr style="height:0.5px;border:none;background-color: #ddd;" />
    <!-- 底部官方信息 -->
    <div class="aboutLinks">
        <div class="provide">
            <ul class="zdty">
                <li><span class="cricle">正</span><span>
                        <h2>正品承诺</h2>
                        <p>正品保障 假一赔十</p>
                    </span></li>
                <li><span class="cricle">低</span><span>
                        <h2>低价保障</h2>
                        <p>缩减中间环节 确保低价</p>
                    </span></li>
                <li><span class="cricle">退</span><span>
                        <h2>30天无忧退货</h2>
                        <p>国内退货 售后无忧</p>
                    </span></li>
                <li><span class="cricle">邮</span><span>
                        <h2>满88包邮</h2>
                        <p>部分特殊商品除外</p>
                    </span></li>
            </ul>
        </div>
        <div class="bottomInfo">
            <ul>
                <li>
                    <div class="aboutImg" src="./88330630-0c6e-4653-9f0a-92e9ae5a2f42_420_130.png" alt=""></div>
                    <div class="aboutUs">
                        <span class="subscribeUs">关注我们</span>
                        <span class="weibo">
                            <div class="tipImg1"><i></i>
                                <div></div>
                            </div>
                        </span>
                        <span class="weixin">
                            <div class="tipImg2"><i></i>
                                <div></div>
                            </div>
                        </span>
                    </div>
                </li>
                <li>
                    <dl>
                        <dt>考拉保障</dt>
                        <a href="#">
                            <dd>假一赔十</dd>
                        </a>
                        <a href="#">
                            <dd>廉正举报</dd>
                        </a>
                        <a href="#">
                            <dd> </dd>
                        </a>
                        <a href="#">
                            <dd> </dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>新手指南</dt>
                        <a href="#">
                            <dd>购物流程</dd>
                        </a>
                        <a href="#">
                            <dd>支付方式</dd>
                        </a>
                        <a href="#">
                            <dd>通关税费</dd>
                        </a>
                        <a href="#">
                            <dd>常见问题</dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>售后服务</dt>
                        <a href="#">
                            <dd>售后政策</dd>
                        </a>
                        <a href="#">
                            <dd>退货流程</dd>
                        </a>
                        <a href="#">
                            <dd>特色服务</dd>
                        </a>
                        <a href="#">
                            <dd>联系客服</dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>物流配送</dt>
                        <a href="#">
                            <dd>配送方式</dd>
                        </a>
                        <a href="#">
                            <dd>配送服务</dd>
                        </a>
                        <a href="#">
                            <dd>运费标准</dd>
                        </a>
                        <a href="#">
                            <dd>物流跟踪</dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>商家服务</dt>
                        <a href="#">
                            <dd>招商合作</dd>
                        </a>
                        <a href="#">
                            <dd>销售联盟</dd>
                        </a>
                        <a href="#">
                            <dd>商家成长</dd>
                        </a>
                        <a href="#">
                            <dd>物流跟踪</dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dt>关于我们</dt>
                        <a href="#">
                            <dd>联系我们</dd>
                        </a>
                        <a href="#">
                            <dd>CEO邮箱</dd>
                        </a>
                        <a href="#">
                            <dd>线下店</dd>
                        </a>
                        <a href="#">
                            <dd></dd>
                        </a>
                    </dl>
                </li>
                <li>
                    <div style="position: relative;margin-left: 40px;">
                        <img style="width: 108px;height: 108px;margin-top: 16px;;" src="./二维码图片_4月22日05时03分30秒.png"
                            alt="">
                        <span style="position:absolute;top: 130px;transform: translateX(12px);">扫描下载手机版</span>
                    </div>
                </li>

            </ul>
        </div>
    </div>
    <footer>
        <br>
        <p>隐私政策 - 考拉海购</p>
        <p>增值电信业务经营许可证：浙B2-20160288 自营经营者信息 （浙）网械平台备字[2018]第00007号</p>
        <p class="gonganInfo"><img src="./f28aa8ee818a42bf832341f605eccefb.png" alt=""><span> 浙公网安备 33010802002216号
                阿里巴巴版权所有©2003-2020互联网药品信息服务资格证书编号（浙）-2017-0027 浙ICP备16011229号</span></p>
        <p class="Img"> <img src="./d720d83b55a04b6f932ea845c673c5bf.png" alt=""><img
                src="./TB1rcIoq.Y1gK0jSZFCXXcwqXXa-65-70.png" alt=""></p>
        <br>
    </footer>

写完后的效果 >>>
在这里插入图片描述

第三步，写CSS样式优化html

这里有个细节之处，就是鼠标移动到微博微信图标上时，会显示一个二维码，我们用hover选择器进行鼠标移动到上面后的显示设置
在这里插入图片描述

index.css文件代码

/* -------------------底部信息----------------- */
/* 底部信息正品承诺的父级，进行宽度和高度进行定型 */
.provide {
    width: 1100px;
    height: 100px;
    border-bottom: 1px solid #ddd;
    margin-left: 170px;
}

/* 正低退邮 */
.zdty {
    width: 1100px;
    height: 100px;
    margin-top: 50px;
    margin-left: -80px;
}

/* 对正低退邮4个li进行设置 */
.zdty li {
    list-style: none;
    display: inline-block;
    margin-left: 84px;
}

/* 正低退邮 4个 字的外圈包裹为圆 */
.zdty li .cricle {
    float: left;
    display: block;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 25px;
    border: 2px solid rgb(209, 209, 209);
}


/* 正低退邮 4个 字的右侧文字内容，因为是同级元素，这里使用相邻兄弟选择器，这样减少了class的量（名字太多，实在想不起怎么起名字了） */
.zdty li .cricle+span {
    float: right;
    margin-top: -18px;
    margin-left: 14px;
}

.zdty li .cricle+span h2 {
    height: 16px;
}

.zdty li .cricle+span p {
    margin-top: -6px;
    font-size: 14px;
    line-height: 22px;
}

/* 底部信息*/
.bottomInfo {
    width: 1100px;
    height: 263px;
}

.bottomInfo ul {
    position: relative;
    width: 1100px;
    margin-top: 20px;
    margin-left: 154px;
}

.bottomInfo ul li {
    display: block;
    float: left;
    margin-left: -24px;
}

.bottomInfo ul li {
    width: 130px;
    height: 128px;
    top: 0px;
}

/* 底部信息，右侧的二维码定位 */
.bottomInfo ul li:first-child .aboutImg {
    display: block;
    width: 210px;
    height: 43px;
    margin-top: 18px;
    background-image: url('./88330630-0c6e-4653-9f0a-92e9ae5a2f42_420_130.png');
    background-size: 210px auto;
}

/* 关于我们 */
.bottomInfo ul li:first-child .aboutUs {
    position: relative;
    display: block;
    width: 140px;
    height: 40px;
    margin-top: 10px;
    z-index: 9999;
}

/* 关注我们的文字行高定位设置 */
.bottomInfo ul li:first-child .aboutUs .subscribeUs {
    display: block;
    float: left;
    line-height: 42px;
}

/* 底部信息微博icon */
.bottomInfo .aboutUs .weibo {
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    margin-left: 12px;
    background-size: 32px 32px;
    margin-top: 4px;
    background-image: url('./微博.png');
    cursor: pointer;

}

/* 底部信息微信icon */
.bottomInfo .aboutUs .weixin {
    display: block;
    float: left;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    background-size: 32px 32px;
    margin-top: 4px;
    background-image: url('./微信.png');
    cursor: pointer;
}

/* 左下角微博微信二维码提示图片 */
.bottomInfo ul li:first-child .tipImg1 {
    display: none;
    width: 142px;
    height: 142px;
    transform: translateX(-48px) translateY(24px);
}

.bottomInfo ul li:first-child .tipImg2 {
    display: none;
    width: 142px;
    height: 142px;
    transform: translateX(-48px) translateY(24px);
}

.bottomInfo ul li:first-child .tipImg1 i ,
.bottomInfo ul li:first-child .tipImg2 i{
    display: block;
    width: 0;
    height: 0;
    margin-left: 54px;
    border: 10px solid transparent;
    border-bottom: 10px solid rgb(238, 238, 238);
}

.bottomInfo ul li:first-child .tipImg1 div,
.bottomInfo ul li:first-child .tipImg2 div {
    width: 120px;
    height: 120px;
    border: 1px solid #ddd;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-image: url('./二维码图片_4月22日05时03分30秒.png');
    background-color: #fff;
    padding: 2px;
}

.bottomInfo .aboutUs .weibo:hover>.tipImg1 {
    display: block;
}

.bottomInfo .aboutUs .weixin:hover>.tipImg2 {
    display: block;
}

/* 底部信息，部分，这里因为第一个是考拉的logo，占据宽度比较大
所以后面的间距都不太统一，从这里开始单独设置第二个元素，方面后面的信息都相对页面居中 */
.bottomInfo ul li:nth-child(2) {
    margin-left: 110px;
}

/* 对dl列表里的样式进行设置 */
.bottomInfo dl a{
    color: #000;
    cursor: pointer;
}

/* 鼠标移动到dd上时，触发a标签响应，a标签出现下划线 */
.bottomInfo ul li dl a:hover{
    text-decoration: underline !important;
}

.bottomInfo ul li dt {
    height: 29px;
    line-height: 29px;
    font-size: 18px;
    font-weight: 400;
    margin-left: 40px;
    margin-bottom: 10px;
}

.bottomInfo ul li dd {
    height: 29px;
    line-height: 29px;
}


/* ------------页脚部分--------- */
footer {
    color: #c2c2c2;
    background-color: #333333;
    text-align: center;
}

/* 页脚公安备案信息 */
footer .gonganInfo {
    position: relative;
    display: block;
    margin-top: -10px;
    width: 100%;
    height: 20px;

    text-align: center;
}

/* 页脚公安备案图案 */
footer .gonganInfo img {
    width: 20px;
    height: 20px;
    margin-top: -58px;
    /* 因为图方便，我这里直接采用CSS的Y轴变换来调整图像位置水平居中 */
    transform: translateY(6px);
}


footer .gonganInfo span {
    height: 28px;
    line-height: 28px;
}

/*备案图标*/
footer .countryIcon {
    width: 20px;
    height: 20px;
    margin-top: 10px;
}

/*备案小图标*/
footer img {
    border-radius: 4px;
    height: 30px;
    margin-left: 16px;
}
/*备案小图标*/
footer .Img {
    margin-left: -18px;
}

相关文件及代码文件路径情况（这些文件我会在明天全部上传到github上，方便你全部下载该项目，感谢关注我，文章会即时更新）
在这里插入图片描述
完成，最终截图 >>>

整个前端的项目到这里就结束了，这是一个电商网站首页的项目，内容覆盖了许多的html标签；还有css的定位，美化；js的轮播图控制，js控制样式，从第一节到本节的所有代码和图形资源，我都会上传到我的github上，即时更新，预计下午的时候会更新Github仓库和对整个前端项目的大目录来方便大家下载和查看相关的文章，感谢关注☺

数据库爆破专家

发布了38 篇原创文章 · 获赞 68 · 访问量 1万+

私信关注