写天猫尾部部分

效果图

这个尾部部分分为三部分，分别是

售后保障部分

天猫支付方式等部分

友商链接，标识部分

整体书写的代码

 <!-- 尾部部分 --><!-- 尾部大盒子部分 --><div class="footer"><!-- 图片盒子部分 --><div class="tmall_ensure"><div class=""><a href="#"></a><a href="#"></a><a href="#"></a><a href="#"></a></div></div><!-- 自定义列表部分 --><div class="tmall_desc"><div class="tmao_dl"><dl><dt><span>购物指南</span></dt><dd><a href="#">免费注册</a><a href="#">开通支付宝</a><a href="#">支付宝充值</a></dd></dl><dl><dt><span>天猫保障</span></dt><dd><a href="#">发票保障</a><a href="#">售后规则</a><a href="#">缺货赔付</a></dd></dl><dl><dt><span>支付方式</span></dt><dd><a href="#">快捷支付</a><a href="#">信用卡</a><a href="#">余额宝</a><a href="#">蚂蚁花呗</a><a href="#">货到付款</a></dd></dl><dl><dt><span>商家服务</span></dt><dd><a href="#">天猫规则</a><a href="#">商家入驻</a><a href="#">商家中心</a><a href="#">天猫智库</a><a href="#">物流服务</a><a href="#">喵言喵语</a><a href="#">运营服务</a></dd></dl><dl><dt><span>手机天猫</span></dt><dd><a href="#" class="join"><img src="imgs/TBerweima.png" alt="" srcset=""></a></dd></dl></div></div><!-- 末尾部分 --><div class="tmall_copyright"><div class="tmao_bon"><!-- 友商链接部分 --><p class="footer_tmallinfo"><a href="#">关于天猫</a><a href="#">帮助中心</a><a href="#">开放平台</a><a href="#">诚聘英才</a><a href="#">联系我们</a><a href="#">网站合作</a><a href="#">法律声明</a><a href="#">隐私权政策</a><a href="#">知识产权</a><a href="#">廉正举报</a></p><p class="footer_otherlink"><a href="#">阿里巴巴集团</a>|<a href="#">淘宝网</a>|<a href="#">天猫</a>|<a href="#">聚划算</a>|<a href="#">全球速卖通</a>|<a href="#">阿里巴巴国际交易市场</a>|<a href="#">1688</a>|<a href="#">阿里妈妈</a>|<a href="#">飞猪</a>|<a href="#">阿里云计算</a>|<a href="#">AliOS</a>|<a href="#">阿里通信</a>|<a href="#">万网</a>|<a href="#">高德</a>|<a href="#">UC</a>|<a href="#">友盟</a>|<a href="#">虾米</a>|<a href="#">钉钉</a>|<a href="#">支付宝</a>|<a href="#">阿里安全</a></p><!-- 许可证信息部分 --><div class="footer_copyright">增值电信业务经营许可证：<a href="#">浙B2-20110446</a><span class="foot_span">市场名称登记证：工商网市字3301004119号</span><span>出版物网络交易平台服务经营备案证： 新出发浙备字第001号</span><br><span class="foot_span">互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com</span><span class="foot_span">互联网药品信息服务资质证书编号：</span><a href="#">浙-（经营性）-2017-0005</a><a href="#"><img src="imgs/an.png" alt="" srcset="">浙公网安备 33010002000120号</a><br><span class="foot_span">医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00002号</span><span  class="foot_span">互联网药品交易服务资格证书：国A20150001</span><br><span class="foot_span">浙江省网络食品销售第三方平台提供者备案：浙网食A33010002</span><a href="#">12318举报</a><b>© 2003-2020 TMALL.COM 版权所有</b></div></div></div></div>

写出的框架效果如下图

实现售后保障部分

---

为框架添加上css样式

/* 尾部部分大盒子部分样式 */
.footer {width: 100%;margin-bottom: 0;padding-bottom: 0;border-top: 1px solid #d1d7dc;clear: both;margin: 0;text-align: center;background: #fff;position: relative;min-width: 1190px;
}
/* 设置图片盒子样式 */
.tmall_ensure {width: 1190px;height: 100px;background: url(../imgs/TB.jpg) no-repeat;margin: 25px auto;padding: 0;
}
.tmall_ensure a {float: left;display: block;width: 297px;height: 100px;text-indent: -1000em;text-decoration: none;
}

效果如下

天猫支付方式等部分

---

为框架添加上css样式

/* 设置自定义列表样式 */
.tmao_dl dl {float: left;width: 186px;padding-left: 52px;
}
.tmao_dl dl dt {color: #646664;font-size: 16px;font-weight: 700;height: 30px; line-height: 30px;text-align: left;
}
.tmao_dl dl dd {text-align: left;
}
.tmao_dl dl a {width: 100px;overflow: hidden;text-align: left;height: 20px;line-height: 20px;color: #8b8b8b;display: block;outline: 0;
}
.tmao_dl dl a:hover {text-decoration: underline;
}
/* 设置天猫标志图片样式 */
.tmao_dl .join {width: 105px;height: 105px;line-height: 105px;text-align: center;overflow: hidden;color: #8b8b8b;
}
.join img {width: 105px;height: 105px;
}
/* 添加为元素清除浮动 */
.tmall_desc::after {clear: both;display: table;content: "";line-height: 0;
}

效果如下

友商链接，标识部分

---

为框架添加上css样式

/* 末尾部分 */
.tmall_copyright {border-top: 2px solid #ff0036;background: #000;text-align: left;min-width: 1190px;
}
.tmao_bon {text-align: left;
}
/* 友商链接部分 */
.footer_tmallinfo,.footer_otherlink,.footer_copyright {width: 1190px; margin: 0 auto;
}
.footer_tmallinfo ,.footer_otherlink ,.footer_tmallinfo a,.footer_otherlink a{color: #fff;line-height: 25px;
}
.footer p {padding: 5px 0;
}
.footer p a {margin-right: 3px;
}
/* 许可证信息部分 */
.footer_copyright {line-height: 20px;color: #a4a4a4;
}
.footer_copyright a {color : #a4a4a4;margin-right: 65px;
}
.foot_span {margin-right: 50px;
}
.footer_copyright b {display: block;color: #686868;font-weight: 400;
}
.footer a:hover {text-decoration: underline;
}

效果如下

---

总结部分

• 在这个css样式中我引用了重置样式的css，因为现在各个浏览器都自带了一些样式，当我去写这部分时，浏览器自带的样式或许可能会影响自己的布局，所以在着手写之前可以导入重置样式css，避免自己写会受到一些影响

-重置样式

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain)
*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;
}
body {line-height: 1;
}
ol, ul {list-style: none;
}
blockquote, q {quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;
}
table {border-collapse: collapse;border-spacing: 0;
}a{text-decoration: none;
}

• 其中如果要设置最小宽度min-width的值时，要注意其值大小，如果小了的话，当浏览器缩放时，会影响页面的布局效果