上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【商品栏及右侧垂直导航】
文章目录
电商项目实战第六节: 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仓库和对整个前端项目的大目录来方便大家下载和查看相关的文章,感谢关注☺