天猫前端系列教材（九）- 公共页面

天猫前端系列教材（八）- 公共页面 - 简单搜索栏

天猫前端系列教材（十）- 公共页面 - 页脚二

工具版本兼容问题

因为页脚内容比较多，所以分为上下两块来讲，便于理解和消化

纠

8分17秒

1.0 原速 1.25 倍速 1.5 倍速 1.75 倍速

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器。如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)。 chrome 的视频下载插件会影响播放，如 IDM 等，请关闭或者切换其他浏览器

步骤 1 : 完整效果
步骤 2 : 效果
步骤 3 : 布局
步骤 4 : 纯html
步骤 5 : 加上样式
步骤 6 : 样式讲解
步骤 7 : 再整合在一起

步骤 1 :

完整效果

edit 顶折

纠问

首先是一个完整的页脚，不过我们本知识点只学习上面图片和中间这部分，下面的内容放在页脚二中学习，分开得小一点，大家好消化一些。

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script> <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet"> <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script> </head> <style> body{ font-size: 12px; font-family: Arial; } a{ color:#999; } a:hover{ text-decoration:none; color: #C40000; } div.footer div.copyright div.white_link a { color: white; padding: 0px 5px; } img.cateye { margin-left: 20px; } div.footer_desc div.descColumn { width: 20%; float: left; padding-left: 15px; } div.license div.copyRightYear { margin: 10px 0px; color: #686868; } div.copyright span.slash { color: white; } div.footer { margin: 0px 0px; border-top-style: solid; border-top-width: 1px; border-top-color: solid; border-top-color: #e7e7e7; } div.license span { color: #A4A4A4; } div.license { margin-left: 10px; padding-bottom: 30px; } div.footer_desc a { display: block; padding-top: 3px; } div.copyright { background-color: black; border-top-style: solid; border-top-width: 2px; border-top-color: solid; border-top-color: #C40000; } div.footer div.copyright div.white_link { padding: 10px 0px; margin-left: 10px; } div.footer_ensure { margin-top: 24px; margin-bottom: 24px; text-align: center; } div.footer_desc { border-top-style: solid; border-top-width: 1px; border-top-color: #e7e7e7; padding-top: 30px; margin: 0px 20px; } div.footer_desc div.descColumn span.descColumnTitle { color: #646464; font-weight: bold; font-size: 16px; } </style> <div style="display: block;" class="footer" id="footer"> <div class="footer_ensure" id="footer_ensure"> <a href="#nowhere"> <img src="https://how2j.cn/tmall/img/site/ensure.png"> </a> </div> <div class="footer_desc" id="footer_desc"> <div class="descColumn"> <span class="descColumnTitle">购物指南</span> <a href="#nowhere">免费注册</a> <a href="#nowhere">开通支付宝</a> <a href="#nowhere">支付宝充值</a> </div> <div class="descColumn"> <span class="descColumnTitle">天猫保障</span> <a href="#nowhere">发票保障</a> <a href="#nowhere">售后规则</a> <a href="#nowhere">缺货赔付</a> </div> <div class="descColumn"> <span class="descColumnTitle">支付方式</span> <a href="#nowhere">快捷支付</a> <a href="#nowhere">信用卡</a> <a href="#nowhere">蚂蚁花呗</a> <a href="#nowhere">货到付款</a> </div> <div class="descColumn"> <span class="descColumnTitle">商家服务</span> <a href="#nowhere">商家入驻</a> <a href="#nowhere">商家中心</a> <a href="#nowhere">天猫智库</a> <a href="#nowhere">天猫规则</a> <a href="#nowhere">物流服务</a> <a href="#nowhere">喵言喵语</a> <a href="#nowhere">运营服务</a> </div> <div class="descColumn"> <span class="descColumnTitle">手机天猫</span> <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> </div> </div> <div style="clear:both"></div> <img src="https://how2j.cn/tmall/img/site/cateye.png" class="cateye" id="cateye"> <div class="copyright" id="copyright"> <div class="white_link"> <a href="#nowhere">关于天猫</a> <a href="#nowhere"> 帮助中心</a> <a href="#nowhere">开放平台</a> <a href="#nowhere"> 诚聘英才</a> <a href="#nowhere">联系我们</a> <a href="#nowhere">网站合作</a> <a href="#nowhere">法律声明</a> <a href="#nowhere">知识产权</a> <a href="#nowhere"> 廉正举报 </a> </div> <div class="white_link"> <a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span> <a href="#nowhere"> 淘宝网</a><span class="slash">|</span> <a href="#nowhere">天猫 </a><span class="slash">|</span> <a href="#nowhere"> 聚划算</a><span class="slash">|</span> <a href="#nowhere">全球速卖通</a><span class="slash">|</span> <a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span> <a href="#nowhere">1688</a><span class="slash">|</span> <a href="#nowhere">阿里妈妈</a><span class="slash">|</span> <a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span> <a href="#nowhere"> 阿里云计算 </a><span class="slash">|</span> <a href="#nowhere"> 阿里通信 </a><span class="slash">|</span> <a href="#nowhere"> YunOS </a><span class="slash">|</span> <a href="#nowhere"> 阿里旅行·去啊 </a><span class="slash">|</span> <a href="#nowhere"> 万网 </a><span class="slash">|</span> <a href="#nowhere"> 高德 </a><span class="slash">|</span> <a href="#nowhere"> 优视 </a><span class="slash">|</span> <a href="#nowhere"> 友盟 </a><span class="slash">|</span> <a href="#nowhere"> 虾米 </a><span class="slash">|</span> <a href="#nowhere"> 天天动听 </a><span class="slash">|</span> <a href="#nowhere"> 来往 </a><span class="slash">|</span> <a href="#nowhere"> 钉钉 </a><span class="slash">|</span> <a href="#nowhere"> 支付宝 </a> </div> <div class="license"> <span>增值电信业务经营许可证：浙B2-20110446</span> <span>网络文化经营许可证：浙网文[2015]0295-065号</span> <span>互联网医疗保健信息服务审核同意书浙卫网审【2014】6号 </span> <span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span> <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div> <div> <img src="https://how2j.cn/tmall/img/site/copyRight1.jpg"> <img src="https://how2j.cn/tmall/img/site/copyRight2.jpg"> </div> </div> </div> </div>

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
	font-size: 12px;
	font-family: Arial;
}
a{
	color:#999;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
div.footer div.copyright div.white_link a {
	color: white;
	padding: 0px 5px;
}
img.cateye {
	margin-left: 20px;
}
div.footer_desc div.descColumn {
	width: 20%;
	float: left;
	padding-left: 15px;
}
div.license div.copyRightYear {
	margin: 10px 0px;
	color: #686868;
}
div.copyright span.slash {
	color: white;
}
div.footer {
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: solid;
	border-top-color: #e7e7e7;
}
div.license span {
	color: #A4A4A4;
}
div.license {
	margin-left: 10px;
	padding-bottom: 30px;
}
div.footer_desc a {
	display: block;
	padding-top: 3px;
}
div.copyright {
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: solid;
	border-top-color: #C40000;
}
div.footer div.copyright div.white_link {
	padding: 10px 0px;
	margin-left: 10px;
}
div.footer_ensure {
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}
div.footer_desc {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}
div.footer_desc div.descColumn span.descColumnTitle {
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}
</style>
<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
            	<img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
			    <span class="descColumnTitle">购物指南</span>
			    <a href="#nowhere">免费注册</a> 
			    <a href="#nowhere">开通支付宝</a> 
			    <a href="#nowhere">支付宝充值</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">天猫保障</span>
			    <a href="#nowhere">发票保障</a> 
			    <a href="#nowhere">售后规则</a> 
			    <a href="#nowhere">缺货赔付</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">支付方式</span>
			    <a href="#nowhere">快捷支付</a> 
			    <a href="#nowhere">信用卡</a> 
			    <a href="#nowhere">蚂蚁花呗</a>
			    <a href="#nowhere">货到付款</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">商家服务</span>
			    <a href="#nowhere">商家入驻</a> 
			    <a href="#nowhere">商家中心</a> 
			    <a href="#nowhere">天猫智库</a>
			    <a href="#nowhere">天猫规则</a>
			    <a href="#nowhere">物流服务</a>
			    <a href="#nowhere">喵言喵语</a>
			    <a href="#nowhere">运营服务</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">手机天猫</span>
			    <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
			</div>
    </div>
    <div style="clear:both"></div>
    <img src="https://how2j.cn/tmall/img/site/cateye.png" class="cateye" id="cateye">
    <div class="copyright" id="copyright">
		<div class="white_link">
			<a href="#nowhere">关于天猫</a>
			<a href="#nowhere"> 帮助中心</a>
			<a href="#nowhere">开放平台</a>
			<a href="#nowhere">  诚聘英才</a>
			<a href="#nowhere">联系我们</a>
			<a href="#nowhere">网站合作</a>
			<a href="#nowhere">法律声明</a>
			<a href="#nowhere">知识产权</a>
			<a href="#nowhere">  廉正举报	</a>
		</div>
		<div class="white_link">
			<a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
			<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
			<a href="#nowhere">天猫 </a><span class="slash">|</span>
			<a href="#nowhere">  聚划算</a><span class="slash">|</span>
			<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
			<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
			<a href="#nowhere">1688</a><span class="slash">|</span>
			<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
			<a href="#nowhere">  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里云计算	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里通信 	</a><span class="slash">|</span>
			<a href="#nowhere">  YunOS	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere">   万网	</a><span class="slash">|</span>
			<a href="#nowhere">  高德	</a><span class="slash">|</span>
			<a href="#nowhere"> 优视 	</a><span class="slash">|</span>
			<a href="#nowhere">  友盟	</a><span class="slash">|</span>
			<a href="#nowhere">  虾米	</a><span class="slash">|</span>
			<a href="#nowhere">  天天动听	</a><span class="slash">|</span>
			<a href="#nowhere">  来往	</a><span class="slash">|</span>
			<a href="#nowhere">  钉钉	</a><span class="slash">|</span>
			<a href="#nowhere">  支付宝 		</a>
		</div>
		<div class="license">
			<span>增值电信业务经营许可证： 浙B2-20110446</span>
			<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
			<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
			<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
		    <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
		    <div>
		    	<img src="https://how2j.cn/tmall/img/site/copyRight1.jpg">
		    	<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
		    </div>
		</div>
    </div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
body{
	font-size: 12px;
	font-family: Arial;
}
a{
	color:#999;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
div.footer div.copyright div.white_link a {
	color: white;
	padding: 0px 5px;
}
img.cateye {
	margin-left: 20px;
}
div.footer_desc div.descColumn {
	width: 20%;
	float: left;
	padding-left: 15px;
}
div.license div.copyRightYear {
	margin: 10px 0px;
	color: #686868;
}
div.copyright span.slash {
	color: white;
}
div.footer {
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: solid;
	border-top-color: #e7e7e7;
}
div.license span {
	color: #A4A4A4;
}
div.license {
	margin-left: 10px;
	padding-bottom: 30px;
}
div.footer_desc a {
	display: block;
	padding-top: 3px;
}
div.copyright {
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: solid;
	border-top-color: #C40000;
}
div.footer div.copyright div.white_link {
	padding: 10px 0px;
	margin-left: 10px;
}
div.footer_ensure {
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}
div.footer_desc {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}
div.footer_desc div.descColumn span.descColumnTitle {
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}
</style>
<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
            	<img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
			    <span class="descColumnTitle">购物指南</span>
			    <a href="#nowhere">免费注册</a> 
			    <a href="#nowhere">开通支付宝</a> 
			    <a href="#nowhere">支付宝充值</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">天猫保障</span>
			    <a href="#nowhere">发票保障</a> 
			    <a href="#nowhere">售后规则</a> 
			    <a href="#nowhere">缺货赔付</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">支付方式</span>
			    <a href="#nowhere">快捷支付</a> 
			    <a href="#nowhere">信用卡</a> 
			    <a href="#nowhere">蚂蚁花呗</a>
			    <a href="#nowhere">货到付款</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">商家服务</span>
			    <a href="#nowhere">商家入驻</a> 
			    <a href="#nowhere">商家中心</a> 
			    <a href="#nowhere">天猫智库</a>
			    <a href="#nowhere">天猫规则</a>
			    <a href="#nowhere">物流服务</a>
			    <a href="#nowhere">喵言喵语</a>
			    <a href="#nowhere">运营服务</a>
			</div>
            <div class="descColumn">
			    <span class="descColumnTitle">手机天猫</span>
			    <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
			</div>
    </div>
    <div style="clear:both"></div>
    <img src="https://how2j.cn/tmall/img/site/cateye.png" class="cateye" id="cateye">
    <div class="copyright" id="copyright">
		<div class="white_link">
			<a href="#nowhere">关于天猫</a>
			<a href="#nowhere"> 帮助中心</a>
			<a href="#nowhere">开放平台</a>
			<a href="#nowhere">  诚聘英才</a>
			<a href="#nowhere">联系我们</a>
			<a href="#nowhere">网站合作</a>
			<a href="#nowhere">法律声明</a>
			<a href="#nowhere">知识产权</a>
			<a href="#nowhere">  廉正举报	</a>
		</div>
		<div class="white_link">
			<a href="#nowhere"> 阿里巴巴集团</a><span class="slash">|</span>
			<a href="#nowhere"> 淘宝网</a><span class="slash">|</span>
			<a href="#nowhere">天猫 </a><span class="slash">|</span>
			<a href="#nowhere">  聚划算</a><span class="slash">|</span>
			<a href="#nowhere">全球速卖通</a><span class="slash">|</span>
			<a href="#nowhere">阿里巴巴国际交易市场</a><span class="slash">|</span>
			<a href="#nowhere">1688</a><span class="slash">|</span>
			<a href="#nowhere">阿里妈妈</a><span class="slash">|</span>
			<a href="#nowhere">  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里云计算	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里通信 	</a><span class="slash">|</span>
			<a href="#nowhere">  YunOS	</a><span class="slash">|</span>
			<a href="#nowhere">  阿里旅行·去啊	</a><span class="slash">|</span>
			<a href="#nowhere">   万网	</a><span class="slash">|</span>
			<a href="#nowhere">  高德	</a><span class="slash">|</span>
			<a href="#nowhere"> 优视 	</a><span class="slash">|</span>
			<a href="#nowhere">  友盟	</a><span class="slash">|</span>
			<a href="#nowhere">  虾米	</a><span class="slash">|</span>
			<a href="#nowhere">  天天动听	</a><span class="slash">|</span>
			<a href="#nowhere">  来往	</a><span class="slash">|</span>
			<a href="#nowhere">  钉钉	</a><span class="slash">|</span>
			<a href="#nowhere">  支付宝 		</a>
		</div>
		<div class="license">
			<span>增值电信业务经营许可证： 浙B2-20110446</span>
			<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
			<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 </span>
			<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
		    <div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
		    <div>
		    	<img src="https://how2j.cn/tmall/img/site/copyRight1.jpg">
		    	<img src="https://how2j.cn/tmall/img/site/copyRight2.jpg">
		    </div>
		</div>
    </div>
</div>

渲染中渲染完成

效果

步骤 2 :

效果

edit 顶折

纠问

这是本知识点学习的内容

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.footer{
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
}
div.footer_ensure{
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}
div.footer_desc{
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}
div.footer_desc div.descColumn{
	width: 20%;
	float: left;
	padding-left: 15px;
}
div.footer_desc div.descColumn span.descColumnTitle{
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}
div.footer_desc a{
	display: block;
	padding-top: 3px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a{
	color:#999;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>

<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a> 
                <a href="#nowhere">开通支付宝</a> 
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a> 
                <a href="#nowhere">售后规则</a> 
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a> 
                <a href="#nowhere">信用卡</a> 
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a> 
                <a href="#nowhere">商家中心</a> 
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
            </div>
    </div>
<div style="clear:both"></div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a> 
                <a href="#nowhere">开通支付宝</a> 
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a> 
                <a href="#nowhere">售后规则</a> 
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a> 
                <a href="#nowhere">信用卡</a> 
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a> 
                <a href="#nowhere">商家中心</a> 
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
            </div>
    </div>
<div style="clear:both"></div>
</div>

渲染中渲染完成

效果

步骤 3 :

布局

edit 顶折

纠问

增值内容，请先登录

模仿天猫前端，单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力，积累宝贵前端项目经验。总计28张页面布局分析图， 33个js交互代码讲解， 395个选择器，1150个样式（每个均有注释），涵盖全部68个知识点，267个学习步骤,包含一共21个讲解视频，累计时长11小时44分25秒，大小1.97G，为简历加上一个有吸引力的砝码。学习期间，遇到本项目任何问题，都可以得到我的专业指导。 (购买一次，即可访问天猫前端所有知识点)
增值内容，点击购买

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

步骤 4 :

纯html

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>

<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a> 
                <a href="#nowhere">开通支付宝</a> 
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a> 
                <a href="#nowhere">售后规则</a> 
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a> 
                <a href="#nowhere">信用卡</a> 
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a> 
                <a href="#nowhere">商家中心</a> 
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
            </div>
    </div>
<div style="clear:both"></div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 5 :

加上样式

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.footer{
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
}
div.footer_ensure{
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}
div.footer_desc{
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}
div.footer_desc div.descColumn{
	width: 20%;
	float: left;
	padding-left: 15px;
}
div.footer_desc div.descColumn span.descColumnTitle{
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}
div.footer_desc a{
	display: block;
	padding-top: 3px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a{
	color:#999;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>

<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a> 
                <a href="#nowhere">开通支付宝</a> 
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a> 
                <a href="#nowhere">售后规则</a> 
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a> 
                <a href="#nowhere">信用卡</a> 
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a> 
                <a href="#nowhere">商家中心</a> 
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
            </div>
    </div>
<div style="clear:both"></div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 6 :

样式讲解

edit 顶折

纠问

增值内容，请先登录

点击进入样式详解

步骤 7 :

再整合在一起

edit 顶折

纠问

增值内容，请先登录

使用爬虫已经被系统记录，请勿使用爬虫，增大封号风险。如果是误封，请联系站长，谢谢

运行效果

代码行数较多，请点击查看

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.footer{
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
}
div.footer_ensure{
	margin-top: 24px;
	margin-bottom: 24px;
	text-align: center;
}
div.footer_desc{
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
	padding-top: 30px;
	margin: 0px 20px;
}
div.footer_desc div.descColumn{
	width: 20%;
	float: left;
	padding-left: 15px;
}
div.footer_desc div.descColumn span.descColumnTitle{
	color: #646464;
	font-weight: bold;
	font-size: 16px;
}
div.footer_desc a{
	display: block;
	padding-top: 3px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
a{
	color:#999;
}
a:hover{
	text-decoration:none;
	color: #C40000;
}
</style>

<div style="display: block;" class="footer" id="footer">
    <div class="footer_ensure" id="footer_ensure">
            <a href="#nowhere">
                <img src="https://how2j.cn/tmall/img/site/ensure.png">
            </a>
    </div>
    <div class="footer_desc" id="footer_desc">
            <div class="descColumn">
                <span class="descColumnTitle">购物指南</span>
                <a href="#nowhere">免费注册</a> 
                <a href="#nowhere">开通支付宝</a> 
                <a href="#nowhere">支付宝充值</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">天猫保障</span>
                <a href="#nowhere">发票保障</a> 
                <a href="#nowhere">售后规则</a> 
                <a href="#nowhere">缺货赔付</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">支付方式</span>
                <a href="#nowhere">快捷支付</a> 
                <a href="#nowhere">信用卡</a> 
                <a href="#nowhere">蚂蚁花呗</a>
                <a href="#nowhere">货到付款</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">商家服务</span>
                <a href="#nowhere">商家入驻</a> 
                <a href="#nowhere">商家中心</a> 
                <a href="#nowhere">天猫智库</a>
                <a href="#nowhere">天猫规则</a>
                <a href="#nowhere">物流服务</a>
                <a href="#nowhere">喵言喵语</a>
                <a href="#nowhere">运营服务</a>
            </div>
            <div class="descColumn">
                <span class="descColumnTitle">手机天猫</span>
                <a href="#nowhere"><img src="https://how2j.cn/tmall/img/site/ma.png"></a> 
            </div>
    </div>
<div style="clear:both"></div>
</div>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

天猫前端系列教材（八）- 公共页面 - 简单搜索栏

天猫前端系列教材（十）- 公共页面 - 页脚二

HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2021-04-05 上面这一栏没有用图片做了一下

镜子里的笑脸

关于实践项目-天猫前端-页脚一 -再整合在一起的提问

用了position

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>我的天猫</title>
    <link rel="stylesheet" href="font1/iconfont.css">
    <style>
        div.d1{
            text-align: center;
            border-bottom: solid #999999 1px;
            padding-bottom:70px
        }
        .red{
            color: #c40000;
            font-size:60px;
        }
        .p1{
            position: absolute;
            top:5px;
        }
        .p2{
            position: absolute;
            top:5px;
            left:387px;
        }
        .p3{
            position: absolute;
            top:5px;
            left:655px;
        }
        .p4{
            position: absolute;
            top:5px;
            left:930px;
        }
        div.d2{
            display: inline-block;
            margin:7px 24px 0px 62px;
            border-right: solid #999999 1px;
            padding-right: 20px;
            text-align: left;
        }
        div.d2 span{
            display:block;
            color: #999999;
            padding-top:3px;
        }
    </style>
</head>
<body>
<div class="d1">
<span class="iconfont red p1">&#xe604;</span>
<div class="d2">
<b>品质保障</b>
<span>品质护航 购物无忧</span>
</div>
<span class="iconfont red p2">&#xe603;</span>
<div class="d2">
    <b>七天无理由退换货</b>
    <span>为您提供售后无忧保障</span>
</div>
<span class="iconfont red p3">&#xe602;</span>
<div class="d2">
    <b>特色服务体验</b>
    <span>为您呈现不一样的服务</span>
</div>
<span class="iconfont red p4">&#xe605;</span>
<div class="d2" style="border-right: none">
    <b>帮助中心</b>
    <span>您的购物指南</span>
</div>
</div>
</body>
</html>

1 个答案

how2j
答案时间：2021-04-09

牛p ,666

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-12-14 有无bootstrap的时候边框宽度对于div内容宽度的影响？

watchert

关于实践项目-天猫前端-页脚一的提问

五个div，每个div的宽度设置为20%，然后设置为左浮动。然后给它们每个div设置10px的边框，按照以前没有引入bootstrap框架的时候，五个div的宽度就有100%了，再加上边框的宽度，五个的总宽度就超过100%了，那么最后一个浮动的div就会被挤到下面去。但是为什么引入了这个bootstrap框架后加了10px的边框这五个div也能在一行排列？（不加bootstrap边框不占设置的内容宽度，但加了bootstrap后设置的边框的宽度会挤占设置的内容的宽度）

2 个答案

qq338386625
答案时间：2020-12-28

<script>
alert("你好，我是一个警告框！");
</script>

how2j
答案时间：2020-12-17

是的bootstrap 会自带边框数据，这个需要考虑进去，否则就挤占了。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-02-20 关于图片下面的div 如何控制在同一高度以及他们之间的间距的解决办法

dazhu_

关于实践项目-天猫前端-页脚一的提问

首先是设置所有子div的父div 为相对位置 top:0px left :0px .然后设置子div 绝对位置 top 保持一致，left 各不相同（采用js dom获取各个子div 然后设置各个的left 值）

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>
	<style>
		div.footer {
			font-family: arial;
			font-size: 12px;
		}
		
		div.footer-ensure {
			position: relative;
			top: 0px;
			left: 0px;
		}
		
		div.footer-ensure div {
			display: inline-block;
			text-align: center;
			position: absolute;
			top: 10px;
		}
		
		a {
			color: #999999;
			text-decoration: none;
		}
		
		div.footer-ensure a,
		span {
			display: block;
		}
		
		div.footer-ensure span {
			font-size: 18px;
			font-weight: bold;
		}
	</style>

	<body>
		<div class="footer">
			<div>
				<a href="#"><img src="https://how2j.cn/tmall/img/site/ensure.png" /></a>
			</div>
			<div class="footer-ensure">
				<div class="d">
					<span>购物指南</span>
					<a href="#">免费注册</a>
					<a href="#">开通支付宝</a>
					<a href="#">支付宝充值</a>

				</div>
				<div class="d">
					<span>天猫保障</span>
					<a href="#">发票保障</a>
					<a href="#">售后规则</a>
					<a href="#">缺货赔付</a>
				</div>
				<div class="d">
					<span>支付方式</span>
					<a href="#">快捷支付</a>
					<a href="#">信用卡</a>
					<a href="#">蚂蚁花呗</a>
					<a href="#">货到付款</a>
				</div>
				<div class="d">
					<span>商家服务</span>
					<a href="#">商家入驻</a>
					<a href="#">商家中心</a>
					<a href="#">天猫智库</a>
					<a href="#">天猫规则</a>
					<a href="#">物流服务</a>
					<a href="#">喵言喵语</a>
					<a href="#">运营服务</a>
				</div>
				<div class="d">
					<span>手机天猫</span>
					<img src="https://how2j.cn/tmall/img/site/ma.png" />
				</div>
			</div>

		</div>
		<script>
			var divs = document.getElementsByClassName("d");
			divs[0].style.left="80px";
			for(var i = 1; i < divs.length; i++) {
				divs[i].style.left = parseInt(divs[i - 1].style.left) + 150+"px";
				console.log(divs[i].style.left);
			}
		</script>
	</body>

</html>

2 个答案

asdhiodhw
答案时间：2020-04-04

神马玩意，更不懂了，还是得自己理解，别人总结的东西永远不是你的。

how2j
答案时间：2020-02-22

不错不错赞赞赞

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2020-01-28 站长你好，问题：按照你的代码，页脚一下面五个浮动的div没有居中啊，看图

nice98

关于实践项目-天猫前端-页脚一 -样式讲解的提问

下面五个浮动的div没有照齐居中？求解答

3 个答案

Zhaoyc711
答案时间：2021-03-08

代码超过 5行，点击查看

niddhogg
答案时间：2020-07-12

如果相要每个footer_desc的内容居中，可以试试用text-align:center代替padding-left

div.footer_desc div.descColumn{
width:20%;
float:left;
text-align:center;
}

how2j
答案时间：2020-01-29

可以比较我的代码，看看你的哪里不一样，就是问题所在。比较工具在这里： https://how2j.cn/k/18/18-1583/1583.html

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-12-09 模仿天猫首页的页脚和这个不一样啊

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 43 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于实践项目-天猫前端-页脚一的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 578362961

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： https://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图