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

工具版本兼容问题

4分40秒

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

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

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

步骤 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> div.footer{ margin: 0px 0px; border-top-style: solid; border-top-width: 1px; border-top-color: #e7e7e7; } div.copyright{ background-color: black; border-top-style: solid; border-top-width: 2px; border-top-color: #C40000; } div.copyright span.slash{ color: white; } div.footer div.copyright div.white_link a{ color: white; padding: 0px 5px; } div.footer div.copyright div.white_link{ padding: 10px 0px; margin-left: 10px; } div.license{ margin-left: 10px; padding-bottom: 30px; } div.license span{ color: #A4A4A4; } div.license div.copyRightYear{ margin: 10px 0px; color: #686868; } img.cateye{ margin-left: 20px; } body{ font-size: 12px; font-family: Arial; } </style> <div class="footer" id="footer"> <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>
div.footer{
	margin: 0px 0px;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: #e7e7e7;
}
div.copyright{
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #C40000;
}
div.copyright span.slash{
	color: white;
}
div.footer div.copyright div.white_link a{
	color: white;
	padding: 0px 5px;
}
div.footer div.copyright div.white_link{
	padding: 10px 0px;
	margin-left: 10px;
}
div.license{
	margin-left: 10px;
	padding-bottom: 30px;
}
div.license span{
	color: #A4A4A4;
}
div.license div.copyRightYear{
	margin: 10px 0px;
	color: #686868;
}
img.cateye{
	margin-left: 20px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
</style>

<div class="footer" id="footer">
    <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 全屏编辑，再次点击恢复

<div class="footer" id="footer">
    <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 顶折

纠问

增值内容，请先登录

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

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

步骤 3 :

纯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 class="footer" id="footer"> <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>

<div class="footer" id="footer">
    <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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 4 :

加上样式

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.copyright{
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #C40000;
}
div.copyright span.slash{
	color: white;
}
div.footer div.copyright div.white_link a{
	color: white;
	padding: 0px 5px;
}
div.footer div.copyright div.white_link{
	padding: 10px 0px;
	margin-left: 10px;
}
div.license{
	margin-left: 10px;
	padding-bottom: 30px;
}
div.license span{
	color: #A4A4A4;
}
div.license div.copyRightYear{
	margin: 10px 0px;
	color: #686868;
}
img.cateye{
	margin-left: 20px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
</style>

<div class="footer" id="footer">
    <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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

步骤 5 :

样式讲解

edit 顶折

纠问

增值内容，请先登录

点击进入样式详解

步骤 6 :

再整合在一起

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.copyright{
	background-color: black;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #C40000;
}
div.copyright span.slash{
	color: white;
}
div.footer div.copyright div.white_link a{
	color: white;
	padding: 0px 5px;
}
div.footer div.copyright div.white_link{
	padding: 10px 0px;
	margin-left: 10px;
}
div.license{
	margin-left: 10px;
	padding-bottom: 30px;
}
div.license span{
	color: #A4A4A4;
}
div.license div.copyRightYear{
	margin: 10px 0px;
	color: #686868;
}
img.cateye{
	margin-left: 20px;
}
body{
	font-size: 12px;
	font-family: Arial;
}
</style>

<div class="footer" id="footer">
    <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 全屏编辑，再次点击恢复

渲染中渲染完成

效果

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

天猫前端系列教材（十一）- 首页 - 概述

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

问答区域

2019-11-20 最上面的小猫头图片和div有间隔怎么回事

sparksun007

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

就是不加第一句<!DOCTYPE html>没有问题，加了后就有竖直间隔，我的做法是把最外层的div.footer设置成font-size=0然后可以了，请问是什么原因呢？为什么第一句HTML5解析不一样吗？有其他办法处理吗？谢谢了~

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<style>

    div#copyright{

        background-color:red;

    }

</style>

<div class="footer" id="footer">

    <img src="https://how2j.cn/tmall/img/site/cateye.png" class="cateye" id="cateye">

    <div class="copyright" id="copyright">nihaoya

    </div>

</div>

7 个答案

banyue
答案时间：2021-06-15

可以把需要移动的元素设置相对定位(position:relative)，再用top、right、bottom、left随便移就行。相对定位虽然没有脱离文档流，但是不会影响文档流(当前元素移动位置不会影响其他元素的位置)，就算移动其他元素头上去了也没事，别的元素位置还是不会变。不会产生牵一发而动全身的尴尬。

代码超过 5行，点击查看

ercilan
答案时间：2020-11-08

为什么有间隔，因为你有两个换行。为什么font-size：0能用就是这个原因！！

我q146
答案时间：2020-04-20

把copyRight的div设置成margin-top = -5px;

how2javaa
答案时间：2020-01-26

可以试试给猫耳朵图片加上 style: vertial-align:middle

sparksun007
答案时间：2019-11-24

另外这个问题：我是没有用Bootstrap的哦，我贴的代码就是我全部的源码。

sparksun007
答案时间：2019-11-24

站长还有其他方式来处理这种小间隔吗，我在这个项目中遇到好多次类似的问题呢~ 另外希望能加个回复提醒功能吧。不然不知道自己提问4天后才知道被回复得到答案~谢谢！

how2j
答案时间：2019-11-20

我记得是加了 <!DOCTYPE html> 之后， bootstrap 才会其作用，或许是这个原因导致的

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

2019-10-07 怎么会这样

zdz123___

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

我把你程序的 "white_link" class改成了两个不同的class，如代码那样分别设置后就不好使了，怎么会这样？

<!DOCTYPE html>

	<head>
	  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	  <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
	  <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
	  <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
	</head>
	<style>
		div.footer1{
			margin: 0px 0px;/*对于内联元素，padding 只有左右，没有上下。 而margin就可以其作用*/
			border-top-style: solid;
			border-top-width: 1px;
			border-top-color: #e7e7e7;
		}
		
		div.footer2{
			background-color: black;
			border-top-style: solid;
			border-top-width: 2px;
			border-top-color: #c40000;
			
		}
		
		div.footer2 span.slash{
			color:white;
		}
		
		div.footer1 div.footer2 div.footer-1 div.footer-2 a{
			color: white;
			padding: 0px 5px;
		}
		
		div.footer1 div.footer2 div.footer-1 div.footer-2{
			padding: 10px 5px;
			margin-left: 10px;
			
		}
		
		div.footer3{
			margin-left: 10px;
			padding-bottom: 30px;/*属性设置元素的下内边距(底部空白)*/
		}
		
		div.footer3 span{
			color: #A4A4A4;
		}
		
		div.footer3 div.copyRightYear{/*大的容器必须写在前面*/
			margin: 10px 0px;
			color: #686868;
		}
		
		body{
			font-size: 12px;
			font-family: arial;
		}
		
		img.cateye{
			margin-left: 20px;
		}
		
	</style>
	
	<div class="footer1" id="footer1">
		<img src="D:\2007\img\site\cateye.png" class="cateye" id="cateye">
	
    <div class="footer2" id="footer2">
		<div class="footer-1">
			<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="footer-2">
			<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="footer3">
			<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="D:\2007\img\site\copyRight1.jpg">
                <img src="D:\2007\img\site\copyRight2.jpg">
            </div>
		</div>
	</div>
</div>

2 个答案

zdz123___
答案时间：2019-10-09

没事啦，我解决了，简单的问题。

how2j
答案时间：2019-10-08

white_link 本来是什么样子的？改成两个class 之后，是什么样的？请直接提供关键信息，这样我回复起来效率也高嘛

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

2019-07-21 这个效果页面好小啊，可以拉大一点吗

2019-06-06 页脚一和页脚二写在了一起，页脚一中有a标签伪类样式，页脚二也有，现在会使用就近原则展示样式，不是各自使用各自的

819868401cai

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

问题背景： 1、页脚一模块：截图中黄色区域，使用如下代码设置a标签样式， .foot-list-content a:link,a:visited{ text-decoration: none; color: gray; font-size: 0.8em; } .foot-list-content a:hover,a:active{ text-decoration: none; color: #c40000; font-size: 0.8em; } 2、页脚二模块：截图中黄色区域，使用如下代码设置a标签样式 .foot-statement a:link,a:visited{ /*text-indent: 2em;*/ display: inline; margin-left: 1em; margin-right: 1em; font-size: 0.8em; text-decoration: none; color: whitesmoke; /*float: left;*/ } .foot-statement a:hover,a:active{ color: #c40000; } 预期结果：各自的a标签展示对应设置的样式实际结果： a标签样式采用就近原则展示问题list： 1、不清楚现在的写法为什么会使用就近原则展示a标签样式 2、如果想实现“各自的a标签展示对应设置的样式”，需要怎么修改

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>foot</title>
    <style>
        .foot-img-content{
            width: 90%;
            height: 0em;
            border-top:1px solid lightgray;
            text-align: center;
            margin-right: auto;
            margin-left: auto;
        }
        .foot-img{
            width: 75%;
            display: block;
            margin-right: auto;
            margin-left: auto;
        }

        .foot-list-content{
            width: 90%;
            height: 15em;
            border-top:1px solid lightgray;
            border-bottom:1px solid lightgray;
            margin-right: auto;
            margin-left: auto;

        }
        .foot-list-style{
            float: left;
            margin: 2em;
            /*width: 12%;*/
            margin-left: 5em;
            margin-bottom: 0;

        }

        .foot-list-style ul{
            list-style-type: none;
            color: gainsboro;

        }

        .foot-list-style h3{
            color: dimgray;
        }

        .foot-list-content a:link,a:visited{
               text-decoration: none;
               color: gray;
               font-size: 0.8em;
           }
        .foot-list-content a:hover,a:active{
            text-decoration: none;
            color: #c40000;
            font-size: 0.8em;
        }

        .QRcode-img{
            width: 50%;
            height: 50%;
            /*margin-top: 0.5em;*/
        }

        .foot-statement{
            clear: both;
            background: black;
            width: 90%;
            margin-right: auto;
            margin-left: auto;
            padding-top: 2em;
            padding-bottom: 2em;
            border-top: 2px solid #c40000;
            color: whitesmoke;
            font-size: 0.8em;

        }

        .foot-statement a:link,a:visited{
            /*text-indent: 2em;*/
            display: inline;
            margin-left: 1em;
            margin-right: 1em;
            font-size: 0.8em;
            text-decoration: none;
            color: whitesmoke;
            /*float: left;*/
        }

        .foot-statement a:hover,a:active{
            color: #c40000;
        }

        .foot-statement-info{
            color: gray;
            font-size: 0.8em;
            text-indent: 1em;
        }

        .foot-statement-date{
            color: gainsboro;
            font-size: 0.6em;
            text-indent: 1em;
        }

        .foot-statement-img{
            display: inline;
            margin-left:1em ;

        }

        .foot-statement-border{
            clear: both;
            display: block;
            margin-left: 7em;
            margin-top: 0;
            /*border: 1px solid black;*/
        }

    </style>
</head>
<body>

<footer>
<div class="foot-img-content">
</div>
<img src="img/foot.png" class="foot-img" alt="页脚">

<div class="foot-list-content">
    <div class="foot-list-style">
        <ul>
            <h3>购物指南</h3>
            <li><a href="">免费注册</a></li>
            <li><a href="">开通支付宝</a></li>
            <li><a href="">支付宝充值</a></li>
        </ul>
    </div>
    <div class="foot-list-style">
        <ul>
            <h3>天猫保障</h3>
            <li><a href="">发票保障</a></li>
            <li><a href="">售后规则</a></li>
            <li><a href="">缺货赔付</a></li>
        </ul>
    </div>
    <div class="foot-list-style">
        <ul>
            <h3>支付方式</h3>
            <li><a href="">快捷支付</a></li>
            <li><a href="">信用卡</a></li>
            <li><a href="">蚂蚁花呗</a></li>
            <li><a href="">货到付款</a></li>

        </ul>
    </div>
    <div class="foot-list-style">
        <ul>
            <h3>商家保障</h3>
            <li><a href="">商家入驻</a></li>
            <li><a href="">商家中心</a></li>
            <li><a href="">天猫规则</a></li>
            <li><a href="">物流服务</a></li>
            <li><a href="">运营服务</a></li>
            <li><a href="">喵言喵语</a></li>
        </ul>
    </div>

    <div class="foot-list-style">
        <ul>
        <h3>手机天猫</h3>
        <li><img src="img/QRcode.png" class="QRcode-img" alt="二维码"></li>

        </ul>
    </div>
</div>

<img src="img/cateye.png"  class="foot-statement-border" alt="">
<div class="foot-statement">

<!--    关于天猫 帮助中心 开放平台 诚聘英才 联系我们 网站合作 法律声明 知识产权 廉正举报-->
    <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>
    <br>
<!--    阿里巴巴集团| 淘宝网| 天猫 | 聚划算| 全球速卖通| 阿里巴巴国际交易市场| 1688| 阿里妈妈| 阿里旅行·去啊	| 阿里云计算	| 阿里通信 | YunOS	| 阿里旅行·去啊	| 万网	| 高德	| 优视 | 友盟	| 虾米	| 天天动听	| 来往	| 钉钉	| 支付宝-->
    <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="">阿里通信</a>|<a href="">YunOS</a>
    <p class="foot-statement-info">增值电信业务经营许可证： 浙B2-20110446 网络文化经营许可证：浙网文[2015]0295-065号 互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号 互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</p>
    <p class="foot-statement-date">© 2003-2016 TMALL.COM 版权所有</p>
    <img src="img/copyRight1.jpg" class="foot-statement-img" alt="">
    <img src="img/copyRight2.jpg" alt="">
</div>
</footer>
</body>
</html>

1 个答案

how2j
答案时间：2019-06-09

1. 优先级顺序里面有就近原则嘛 2. 可以通过给不同的a 设置不同的 class来解决

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

2019-01-23 将页脚一和二写在一起时，float悬浮对页脚二里的小猫头图片产生影响，使得图片显示在右侧，用了clear:both,和overflow:hidden，都无法解决，请问怎么处理？

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

提问之前请登陆

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

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

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

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

上传截图