电商项目实战第六节: 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=""><imgsrc="./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仓库和对整个前端项目的大目录来方便大家下载和查看相关的文章，感谢关注☺

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

电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
上一节:电商项目实战第四节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[轮播图特效] 文章目录 [考拉海购网站]之[商品栏及右侧垂直导航] 第一步,页面布局分布情况分析第二步,根据页面 ...
前端电商项目实战，如何从 0 开始创造一个【考拉海购官网】？（共6节教程）
文章目录声明一,关于页面还原度效果比较二,第一组演示图是考拉海购官网的三,第二组演示图是本次教程从0开发的四,教程目录(共6节) 五,全部代码下载地址新手提示 (1)如何从github ...
电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】
文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局第二步,建立基本的文本目录及文件第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码第四步, ...
电商项目实战第二节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【搜索框那一栏】
上一节:电商项目实战第一节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[顶部导航] 文章目录 [考拉海购网站]之[搜索框那一栏] 第一步,分析布局第二步,在html代码里面补全需要的标 ...
电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】
上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局第二步,写需要的html标签 i ...
拓荒会员电商“无人区”，考拉海购能否拿下“新船票”？
文 | 陈小江来源 | 螳螂财经(ID:TanglangFin) 考拉海购"变"了. 近日,考拉海购宣布战略升级--在现有跨境业务基础上All in会员电商.这是考拉融入阿里经济 ...
网易考拉海购更名网易考拉全面进军综合电商市场
近日,国内领先的跨境进口零售电商平台网易考拉海购宣布更名为"网易考拉",正式宣告进军综合电商市场.与品牌更名同步,"网易考拉"全新的品牌标识及全新Slogan ...
java spu sku_SpringBoot电商项目实战 — 商品的SPU/SKU实现
最近事情有点多,所以系列文章已停止好多天了.今天我们继续Springboot电商项目实战系列文章.到目前为止,整个项目的架构和基础服务已经全部实现,分布式锁也已经讲过了.那么,现在应该到数据库设计及代 ...

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

文章目录

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

第一步，分析布局

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

index.html文件代码

第三步，写CSS样式优化html

index.css文件代码

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

最新文章

热门文章