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

工具版本兼容问题

4分40秒

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

本视频采用html5方式播放，如无法正常播放，请将浏览器升级至最新版本，推荐火狐，chrome，360浏览器如果装有迅雷，播放视频呈现直接下载状态，请调整迅雷系统设置-基本设置-启动-监视全部浏览器 (去掉这个选项)

步骤 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>

3 个答案

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，都无法解决，请问怎么处理？

2018-12-01 图片下方有空闲？而且超链接鼠标放上去没有下划线?

halfblood

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

图片下方有空闲？而且超链接鼠标放上去没有下划线? 用chrome opear ie 打开都一样

<!DOCTYPE html>

<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		
		<style>
			.footer {
				margin: 0px 0px;
				border-top:1px solid #e7e7e7;
				
			}
			.cateye{
				margin-left: 20px;
			}
			
			.totalBlack {
				background-color: #000000;
				margin: 0px 0px;																																							
				border-top: 2px solid red;
			}
						
			.white_link{
				margin-left: 10px;
				padding: 10px 0px;
			}
			.white_link a{
				padding: 0 5px;
				color: white;
				text-decoration: none;
			}
			
			.totalBlack span{
				color: white;
			}
			.copyRightYear{
				margin-left: 10px;
				padding: 10px 0px;
   				color: #686868;
			}
			.license{
				color: #A4A4A4;
				margin-left: 10px;
			}
			.copyRightimg{
				margin-left: 10px;
				padding-bottom: 30px;
			}
		</style>
	</head>

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

		</div>
	</body>

</html>

图片下方有空闲？而且超链接鼠标放上去没有下划线?
改来改去都不行，不知道为什么会这样，求解答

5 个答案

how2j
答案时间：2018-12-02

div.footer div.copyright div.white_link a 目前的值是 padding: 0px 5px;，你想宽点，想窄点，修改左右的值即可了 -_-!

halfblood
答案时间：2018-12-02

可能我表达得不清楚，天猫官网没有空隙，但我写的代码浏览器打开却有，主要是想问这个。为啥我写的会是这种效果

how2j
答案时间：2018-12-01

我这里看到是即没有空隙，放上去也不会有下划线。我们是访问的是同一个天猫？

halfblood
答案时间：2018-12-01

天猫官网没有空隙, 鼠标放上去有下划线啊。？

how2j
答案时间：2018-12-01

这是天猫官网： http://tmallcom 它有没有空闲？它有没有下划线？？？

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

2018-10-15 几个问题

2018-09-28 请问a标签不是内联标签么？为什么可以设置padding呢？

2018-09-20 站长问一下，怎么可以将这页头和页脚整合到一个html中，可不可以像jsp那样用include标签

xiaowei

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

怎样可以在不使用jsp的情况下，来将各个html页面整合到一起，我用的是如图的方法，但是chrome能够显示出来但是firefox就显示不出来了，说明这个标签有兼容性问题，有没有更好的解决方案呢

2 个答案

xiaowei
答案时间：2018-09-21

好的，谢谢站长！

how2j
答案时间：2018-09-20

据我所知，纯前端没有特别成熟的解决方案，配合后端更好使用。但是借助构建工具，可以做到这点，那就需要了解 nodejs 和打包工具 webpack了。这两个站内都有教程： http://how2j.cn/k/nodejs/nodejs-start/1760.html http://how2j.cn/k/webpack/webpack-start/1776.html 了解一下吧

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

2018-08-15 老师，为什么页脚这儿没有body标签了

2018-05-24 a：hover改变不了链接颜色

2018-05-15 页脚下面有空白处属于正常吗

2018-04-04 关于div溢出的问题

容容小菇凉学web

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

老师好！我自己写的这一块的代码和老师的挺像的，只是有些参数不一样，比如，老师的cateye那里用的margin，我用的padding，但是我的网页出来的效果，suqre(相当于您那边的copyright)这一块div会溢出(没有设置height)，最下面的两个图片显示不完全，我设置footer的height也没有任何效果。在suqre(相当于您那边的copyright)的css中添加了overflow:hidden;以后，就可以解决这个问题。后来，我尝试了老师的代码，发现没有这个问题。想请教老师：1)div的溢出一般是什么原因导致的？2)overflow:hidden;所指的隐藏溢出，我不太明白，把溢出的部分隐藏了，那内容不就不完整了嘛？3)什么时候用margin，什么时候用padding? 4)我发现同样是12px，我的网页显示的字体比老师您的页面显示的字体大很多，是什么原因呢？谢谢老师！！

<!DOCTYPE html>
<html>
	<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!--导入bootstrap相关-->
        <!--导入JQuery-->
        <script src="js\jquery\2.0.0\jquery.min.js"></script>
        <!--导入Bootstrap css-->
        <link href="css\bootstrap\3.3.6\bootstrap.min.css" rel="stylesheet">
        <!--导入Bootstrap js-->
        <script src="\js\bootstrap\3.3.6\bootstrap.min.js"></script>
        <style type="text/css">
            body{
                font-size:12px;
                font-family:Arial;
            }
            div.footer{
                width:1110px;
                margin:0px auto;  
            }
            div.cateye{
                padding-left:20px;
            }
            div.squre{
                padding-left:10px;
                padding-right:10px;
                background-color:black;
                border-top:solid 1px #C40000;
                overflow:hidden;
            }
            div.squre div.copyright div.whiteLink{
                color:white;
                padding-top:10px;
                padding-bottom:10px;
            }
            a{
                color:white;
                padding-left:5px;
                padding-right:5px;
            }
            a:hover{
                color:#C40000;
                text-decoration:none;
            }
            div.squre div.license{
                padding-bottom:10px;
                color:#A4A4A4;
            }
            div.squre div.copyrightYear{
                padding-bottom:5px;
                color:#868686;
            }
           div.squre div.images{
               margin-bottom:20px;
           }
        </style>
	</head>
	<body>
        <div class="footer">
            <div class="cateye">
                <img src="http://how2j.cn/tmall/img/site/cateye.png">
            </div>
            <div class="squre">
                <div class="copyright">
                    <div class="whiteLink">
                        <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="whiteLink">
                        <a href="#nowhere">阿里巴巴集团</a>
                        <span>|</span>
                        <a href="#nowhere">淘宝网</a>
                        <span>|</span>
                        <a href="#nowhere">天猫</a>
                        <span>|</span>
                        <a href="#nowhere">聚划算</a>
                        <span>|</span>
                        <a href="#nowhere">全球速卖通</a>
                        <span>|</span>
                        <a href="#nowhere">阿里巴巴国际交易市场</a>
                        <span>|</span>
                        <a href="#nowhere">1688</a>
                        <span>|</span>
                        <a href="#nowhere">阿里妈妈</a>
                        <span>|</span>
                        <a href="#nowhere">阿里旅行.去啊</a>
                        <span>|</span>
                        <a href="#nowhere">阿里云计算</a>
                        <span>|</span>
                        <a href="#nowhere">阿里通信</a>
                        <span>|</span>
                        <a href="#nowhere">YunOS</a>
                        <span>|</span>
                        <a href="#nowhere">阿里旅行.去啊</a>
                        <span>|</span>
                        <a href="#nowhere">万网</a>
                        <span>|</span>
                        <a href="#nowhere">高德</a>
                        <span>|</span>
                        <a href="#nowhere">优视</a>
                        <span>|</span>
                        <a href="#nowhere">友盟</a>
                        <span>|</span>
                        <a href="#nowhere">虾米</a>
                        <span>|</span>
                        <a href="#nowhere">天天动听</a>
                        <span>|</span>
                        <a href="#nowhere">来往</a>
                        <span>|</span>
                        <a href="#nowhere">钉钉</a>
                        <span>|</span>
                        <a href="#nowhere">支付宝</a>
                    </div>
                </div>
                <div class="license">
                    增值电信业务经营许可证：浙V2-20110446 网络文化经营许可证：浙网文[2015]0295-065号 互联网医疗保健信息服务 审核同意书 浙卫网审【2014】 6号 互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005
                </div>
                <div class="copyrightYear">
                    @2003-2016 TMALL.COM 版本所有
                </div>
                <div class="images">
                <img src="http://how2j.cn/tmall/img/site/copyRight1.jpg">
                <img src="http://how2j.cn/tmall/img/site/copyRight2.jpg">
                </div>
            </div>
        </div>
	</body>

</html>

3 个答案

Czinan
答案时间：2019-04-05

margin是外边距会影响自身位置，padding是内边距会改变大小如果是padding-left padding-right 要在width自身上减去padding的大小

红蓝梅西
答案时间：2018-04-08

padding 内边距，在某些情况会撑大盒子的，也就是溢出。

how2j
答案时间：2018-04-04

overflow:hidden的用法，看看这个呢： http://how2j.cn/k/css2/css2-left-fix/781.html 你用一个比较工具，比较一下我的代码嘛，看看还有哪些区别，找出真正的原因所在呢

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

2018-04-03 关于div溢出的问题

2018-02-09 浙网文[2015]0295-065号没有显示蓝色和下划线

liuhaichen

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

浙网文[2015]0295-065号老师这个东西是怎么呈蓝色并有下划线的？我同样的代码为什么没有？而且你给的运行效果图有下划线，我运行的没有。

 <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="http://how2j.cn/tmall/img/site/copyRight1.jpg">
                <img src="http://how2j.cn/tmall/img/site/copyRight2.jpg">
            </div>

2 个答案

liuhaichen
答案时间：2018-02-14

是浏览器不同的原因，用微软的浏览器就会显示下划线，用火狐的就不会。

how2j
答案时间：2018-02-11

这个不是超链吧，我这里显示也没有蓝色啊

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

2017-12-13 下划线问题

2017-08-26 改了好几个地方，终于和官网差不多了

88688wan

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

楼主的图貌似截的不对，文本没对齐，还有好多和官网的不太一样。自己去官网截图（ps美化勉强够用），改了好多地方，终于差不多了

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="F:\Desktop\jquery.3.2.1.js"></script>
<link href="F:\Desktop\bootstrap-3.3.7\css\bootstrap.min.css" rel="stylesheet">
<script src="F:\Desktop\bootstrap-3.3.7\js\bootstrap.min.js"></script>

<style>
div.footer {
	margin:0 0;
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#e7e7e7;
}
div.footer_ensure {
	text-align:center;
}
div.footer_desc {
	border-top-style:solid;
	border-top-width:1px;
	border-top-color:#e7e7e7;
	padding-top:30px;
	margin:0 70px;
}
div.footer_desc div.descColumn {
	width:19.5%;
	float:left;
	padding-left:60px;
}
div.footer_desc div.descColumn span.descColumnTitle {
	color:#686868;
	font-size:16px;
	font-weight:bold;
}
div.footer_desc a {
	display:block;
	padding-top:3px;
}
div.descColumn a {
	color:#999;
}
div.descColumn a:hover {
	text-decoration:none;
}
div.footer {
	border-top-style:solid;
	border-top-color:#e7e7e7;
	border-top-width:1px;
}
div.copyright {
	background-color:black;
	border-top-style:solid;
	border-top-width:2px;
	border-top-color:#C40000;
}
span.slash {
	color:white;
}
div.white_link a {
	color:white;
	padding:0 4px 0 2px;
}
div.white_link {
	padding-top:10px;
	margin-left:70px;
}
div.license {
	padding-bottom:25px;
	margin-left:70px;
}
div.license div.copyRightPolice {
	margin-top:10px;
}
div.license div.copyRightPolice span {
	margin-right:80px;
	color:#A4A4A4;
}
div.license a {
	color:#A4A4A4;
}
div.license div.copyRightYear {
	margin-bottom:10px;
	color:#686868;
}
img.cateye {
	margin-left:112px;
}
body {
	font-size:12px;
	font-family:Arial;
}
a:hover {
	text-decoration:none;
}
</style>
</head>
<body>
<div class="footer" id="footer" style="display:block">
	<div class="footer_ensure" id="footer_ensure">
		<a href="#nowhere">
			<img src="F:\Desktop\tianmao.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="http://how2j.cn/tmall/img/site/ma.png" /></a>
		</div>
	</div>
	<div style="clear:both"></div>
	<img src="http://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>
		</div>
		<div class="white_link">
			<span><a href="#nowhere">阿里巴巴集团</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">淘宝网</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">天猫</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">聚划算</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">全球速卖通</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">阿里巴巴国际交易市场</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">1688</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">阿里妈妈</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">飞猪</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">阿里云计算</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">YunOS</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">阿里通信</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">万网</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">高德</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">UC</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">友盟</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">虾米</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">阿里星球</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">来往</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">钉钉</a> <span class="slash">|</span></span>
			<span><a href="#nowhere">支付宝</a> </span>
		</div>
		<div class="license">
			<div class="copyRightPolice">
				<span>增值电信业务经营许可证：<a href="#nowhere">浙B2-20110446</a></span>
				<span>网络文化经营许可证：<a href="#nowhere">浙网文[2015]0295-065号</a></span>
				<span><a href="#nowhere">12318举报</a></span>
			</div>
			<div class="copyRightPolice">
				<span>互联网药品信息服务资质证书编号：<a href="#nowhere">浙-（经营性）-2017-0005</a></span>
				<span>
					<a href="#nowhere"><img src="https://img.alicdn.com/tps/TB1yEqRPXXXXXXPXpXXXXXXXXXX-20-20.png" class="police" /> 浙公网安备 33010002000120号</a>
				<span>
			</div>
			<div class="copyRightYear">© 2003-2016 TMALL.COM 版权所有</div>
			<div>
				<img src="http://how2j.cn/tmall/img/site/copyRight1.jpg" />
				<img src="http://how2j.cn/tmall/img/site/copyRight2.jpg" />
			</div>
		</div>
	</div>
</div>
</body>

2 个答案

我会努力学JAVA的
答案时间：2018-10-15

我不得不为你点赞

how2j
答案时间：2017-08-28

非常棒，加油！

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

2017-03-22 ，继续上一个问题，修改的代码

2017-03-21 继续上一个问题

2017-03-21 对齐问题

a322110a

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

为什么一改外边距，原本对齐的就不对齐了，且会超出范围

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页脚二</title>
    <style>
        body{
            font-size: 12px;
            font-family: Arial;
            box-sizing: border-box;
        }
      div.footer .copyright div.middle-right{
          max-width: 1024px;
          margin: 0px auto;
          position: relative;
          text-align: left;
      }
      .cateye{
          margin-left: 5px;
          margin-top:-33px ;
          position: absolute;
          z-index: -1;
      }
      div.footer .copyright{
          background-color: black;
          border-top: 2px solid #c40000;
          margin-top: 20px;
      }
       div.footer div.copyright div.white-line{
           padding: 10px 0;
           box-sizing: border-box;
           margin-left: 5px;
       }
        div.footer div.copyright div.white-line a{
            color: white;
            padding: 0px 5px;
            text-decoration: none;
        }
        div.footer div.copyright div.white-line span.slash{
            color: white;
        }
        div.license{
            margin-left: 10px;
            padding-bottom: 30px;
        }
        div.license span{
            color: #A4A4A4;
        }
        div.license div.copyRightYear{
            margin: 10px 0px;
            color: #686868;
        }
    </style>
</head>
<body>
<div class="footer">
    <div class="copyright" id="copyright">
       <div class="middle-right">
            <div href="#nowhere">
                <img src="http://how2j.cn/tmall/img/site/cateye.png" class="cateye" id="cateye">
            </div>
            <div class="white-line">
                <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-line">
                <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" id="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="http://how2j.cn/tmall/img/site/copyRight1.jpg">
                    <img src="http://how2j.cn/tmall/img/site/copyRight2.jpg">
                </div>

            </div>
        </div>

    </div>

</div>
</body>
</html>

1 个答案

how2j
答案时间：2017-03-22

在你的代码的哪一行修改了之后，会导致结果不是期望的。代码很长，请提供关键信息，帮助我定位问题，你的问题也会更快得到解答

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

2017-03-20 a标签里放img标签和文字，图片和文字无法保持在同一水平对齐

hhhhh22

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

a标签里放img标签和文字，图片和文字无法保持在同一水平对齐

<style>
	.copyright span,.copyright a{
		line-height: 20px;
		color: #a4a4a4 !important;
	}
	.copyright a{
		margin: 0 65px 0 0;
	}
	.copyright img{
		display: inline;/*img是块状元素，要设置成行内元素才可以同居一行*/
		padding: 3px 0 0 0;
	}
	.copyright p{
		color: #686868;
	}
</style>
<div class="copyright">
					<span>增值电信业务经营许可证：</span>
					<a href="#">浙B2-20110446</a>
					<span>网络文化经营许可证：</span>
					<a href="#">浙网文[2015]0295-065号</a>
					<br>
					<span>互联网药品信息服务资质证书编号：</span>
					<a href="#">浙-（经营性）-2017-0005</a>
					<a href="#" style="padding:30px;"><img style="padding-top:20px;" src="./image/site/copyright1.png" >浙公网安备 33010002000120号</a>
					<p>&copy;2003-2017 TMALL.COM 版权所有</p>
				</div>

1 个答案

how2j
答案时间：2017-03-21

已在QQ交流，答案放在 http://how2j.cn/code/96

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

2017-03-11 同这部分第一个问题一样，原谅我还是没弄懂。。

小书记	关于实践项目-天猫前端-页脚二的提问同样是缩小屏幕宽度，实际天猫底部不会随着屏幕大小的改变，而改变他每块内容的具体位置，每块的高度也不会随着屏幕的缩小而无限往下延伸。我们的这个却出现了这样的问题，应该怎么解决。这个问题老师的给出的解决办法我有点没弄懂可不可讲的仔细一点点。放在一个div里面是指将整个footer 区域放在一个div里面然后设置最大宽度然后居中么？

3 个答案

how2j
答案时间：2017-04-10

拼写错误了：应该是coptyrightMiddle。打开任意模仿天猫页面的源码里都可以套用这个样式的元素样式在这里可以看到： http://how2j.cn/tmall/css/fore/style.css

代码超过 5行，点击查看

zbw19930603
答案时间：2017-04-09

看不到那个样式啊

how2j
答案时间：2017-03-11

请看这个页面的页脚效果：http://how2j.cn/tmall/foreproduct?pid=962 其最大宽度设置为1024即可，我在中间加了一个copyrightMiddle的div，来做到这个效果。暂时没有更新到教程中

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

2016-12-31 同样是缩小屏幕宽度，实际天猫底部不会随着屏幕大小的改变，而改变他每块内容的具体位置，每块的高度也不会随着屏幕的缩小而无限往下延伸。我们的这个却出现了这样的问题，应该怎么解决

2016-12-08 一点点小改进--与实际的天猫页脚

cuihaonan93

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

老师：您好， 1、我在与实际的天猫做对比时，更新了copyright部分，（去掉了”阿里去啊“，增加了”飞猪“） 2、发现copyright部分、white_link部分、license等部分的margin-left应该多点缩进，

<!DOCTYPE html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!--这里是引入how2j的Boostrap和jquery-->
  <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.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 90px;
}
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;
}
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: 60px;
}
div.license{
    margin-left: 60px;
    padding-bottom: 30px;
}
div.license span{
    color: #A4A4A4;
    padding-right: 50px;
    display: inline-block;
}
div.license div.copyRightYear{
    margin: 10px 0px;
    color: #686868;
}
img.cateye{
    margin-left: 20px;
}
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="http://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="http://how2j.cn/tmall/img/site/ma.png" /></a>
      </div>
</div>
<div style="clear:both">
  </div>
</div>

<div class="footer" id="footer">
    <img src="http://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">  UC    </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="http://how2j.cn/tmall/img/site/copyRight1.jpg">
                <img src="http://how2j.cn/tmall/img/site/copyRight2.jpg">
            </div>
        </div>
    </div>
</div>

1 个答案

how2j
答案时间：2016-12-09

非常好，赞！！！：）

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

2016-12-03 可以看到你上面的图，有一个a标签的文字被换行了，一半在上面，一半在下面，能不能要么就让整个标签都下去，不要从中间换行。

stanhu

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

可以看到你上面的最后的图，有一个a标签的文字被换行了，一半在上面，一半在下面，能不能要么就让整个标签都下去，不要从中间换行。

1 个答案

how2j
答案时间：2016-12-05

因为分辨率的关系，我这里恰好没有看到你说的效果。我猜测你说的意思是，比如某个超链“一二三四" ,”一二" 停留在第一行，"三四" 到了第二行。你的要求大概是倘若出现这样的“断裂” ，所以让这四个字都到下面去把。据我所知的知识，要做到这一点还挺难的，因为每个浏览器的分辨率都有可能不同，超链的文字也可能会发生变化。解决起来，可以采用变通的办法，比如规定第一行只有5个超链，这个数量的超链就不会发生“断裂”。同时把这5个超链，放在一个div,并且给这个超链设置一个最小宽度，这样即便是浏览器的宽度很窄，也能够在一行里显示完这5个超链。

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

2016-11-17 自适应问题

laughing888

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

当页面缩小到一定程度或扩大到一定程度时，页脚二的显示均出现异常。现象为cateye图片跑到和页脚一一行去了。由于只能传一张图片，所以我只上传了缩小到一定程度时的异常图片，请问这是怎么回事如何解决？ PS:我代码是都整合在一起了，class命名用 - 代替 _ 。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<link rel="stylesheet" type="text/css" href="style2.css">


</head>

<body>
		 <!-- 顶栏 -->
		<nav class="top">
			<span class="top-left">
				<span>喵，欢迎来天猫</span>
				<span>
					<a href="">请登录</a>
					<a href="">免费注册</a>
				</span>
			</span>
			
			<span class="pull-right">
				<a href="">我的订单</a>
				<a href="">购物车<strong>0</strong>件</a>
			</span>
		</nav>
		<!-- 搜索栏 -->
		<div class="searchDiv">
			<input type="text" placeholder="时尚男鞋 太阳镜" name="keyword">
			<button class="searchButton" type="submit">搜索</button>
			<div class="searchBelow">
				<span><a href="">平衡车</a><span>丨</span></span>
				<span><a href="">扫地机器人</a><span>丨</span></span>
				<span><a href="">原汁机</a><span>丨</span></span>
				<span><a href="">冰箱</a></span>
			</div>
		</div>
		<!-- 底栏一 -->
		<div class="footer" style="display: block;" id="footer">
		<!-- 底部图片 -->
			<div class="footer-ensure" id="footer-ensure">
				<a href=""><img src="img\site\ensure.png"></a>
			</div>
			<!-- 低栏信息 -->
			<div class="footer-desc" id="footer-desc">
				<div class="descColumn">&nbsp;</div>
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="">免费注册</a>
					<a href="">开通支付宝</a>
					<a href="">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="">免费注册</a>
					<a href="">开通支付宝</a>
					<a href="">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="">免费注册</a>
					<a href="">开通支付宝</a>
					<a href="">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">购物指南</span>
					<a href="">免费注册</a>
					<a href="">开通支付宝</a>
					<a href="">支付宝充值</a>
				</div>
				<div class="descColumn">
					<span class="descColumnTitle">手机天猫</span>
					<a href=""><img src="img\site\ma.png"></a>
				</div>
			</div>
			<!-- 底栏二 -->
			<img src="img\site\cateye.png" class="cateye" id="cateye">
			<div class="copyright" id="copyright">
				<div class="white-link">
					<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>
				</div>
				<div class="white-link">
					<a href="">阿里巴巴集团</a><span class="slash">丨</span>
					<a href="">淘宝网</a><span class="slash">丨</span>
					<a href="">天猫</a><span class="slash">丨</span>
					<a href="">聚划算</a><span class="slash">丨</span>
					<a href="">全球速卖通</a><span class="slash">丨</span>
					<a href="">阿里巴巴国际交易市场</a><span class="slash">丨</span>
					<a href="">1688</a><span class="slash">丨</span>
					<a href="">阿里妈妈</a><span class="slash">丨</span>
					<a href="">飞猪</a><span class="slash">丨</span>
					<a href="">阿里云计算</a><span class="slash">丨</span>				
					<a href="">YunOS</a><span class="slash">丨</span>
					<a href="">阿里通信</a><span class="slash">丨</span>
					<a href="">万网</a><span class="slash">丨</span>
					<a href="">高德</a><span class="slash">丨</span>
					<a href="">优视</a><span class="slash">丨</span>
					<a href="">友盟</a><span class="slash">丨</span>
					<a href="">虾米</a><span class="slash">丨</span>
					<a href="">阿里星球</a><span class="slash">丨</span>
					<a href="">来往</a><span class="slash">丨</span>
					<a href="">钉钉</a><span class="slash">丨</span>
					<a href="">支付宝</a><span class="slash">丨</span>
				</div>
				<div class="license">
					<span>增值电信业务经营许可证：浙B2-20110446</span>
					<span>网络文化经营许可证：浙网文[2015]0295-065号</span>
					<span>互联网医疗保健信息服务 审核同意书 浙卫网审【2014】6号</span>
					<span>互联网药品信息服务资质证书编号：浙-（经营性）-2012-0005</span>
					<div class="copyRightYear"> &%a9;2003-2016 TMALL.COM版权所有</div>
					<div>
						<img src="img\site\copyRight1.jpg">
						<img src="img\site\copyRight2.jpg">
					</div>
				</div>
			</div>
		</div>
<!-- <div class="foot">foot</div> -->

</body>
</html>
样式：
body{
	font-size: 12px;
	font-family: Arial;
	margin: 0;
}
a{
	text-decoration:none;
	color: #999;
}
.tmcolor{
	color: #C40000!important;
}
nav.top{
	background-color: #f2f2f2;
	padding:  5px 0px 5px 0px;
	border-bottom: 1px solid #e7e7e7;
	top: 0;
}

nav.top span,nav.top a{
	color: #999;
	margin: 0px 10px 0px 10px;
}
nav.top a:hover{
	color: #C40000;
}
.top-left{
	padding-left: 250px;
}
.pull-right{
	float: right;
	padding-right: 250px;
}
div.searchDiv{
	background-color: #C40000;
	width: 600px;
	margin: 50px auto;
	padding: 1px;
	height: 40px;
	display: block;
}
div.searchDiv input{
	width: 475px;
	border: 1px solid transparent;
	height: 34px;
	margin: 1px;
	outline: none;
}
div.searchDiv button{
	width: 110px;
	border: 1px solid transparent;
	background-color: #C40000;
	color: white;
	font-size: 20px;
	font-weight: bold;
}
div.searchBelow{
	margin: 10px auto;
}
div.searchBelow span{
	color: #999;
}
div.searchBelow a{
	padding: 0px 20px;
	font-size: 14px;
}
a:hover{
    text-decoration:none;
    color:#C40000;
}

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: 15%;
	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;
}
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;
}

3 个答案

子夜
答案时间：2016-12-31

可以在猫眼图片上加一个div <div style="clear:both"></div> 清除浮动

how2j
答案时间：2016-11-17

分析得不错：）不过自适应存在一个应用范围的问题。并不是所有的网站，都适合，都应该做自适应。比如天猫官网首页，用pc打开和手机打开，是输出的两张不同的页面，用手机打开看，就没有页脚这一部分。大型网站，一般都不适合做自适应。如果希望大型网站的内容，能够在手机上精致的显示出来，应该另外输出一张页面，单独处理，这样维护成本和难度都更低。

laughing888
答案时间：2016-11-17

找到问题原因了，是因为页脚一 div.footer-desc div.descColumn{ width: 15%; float: left; padding-left: 5px; } 里面浮动定位的问题，设置左浮动的话当页面宽到一定程度或窄到一定程度时，猫眼图片没有设置任何定位，默认为就会上来。请问我分析的对吗？问题的原因找到了，解决办法是给页脚二整体加了个定位

div.footer-second{
	position: absolute;
	bottom:0px;
	width: 100%;
}

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

2016-11-15 最外层div是块级元素，为什么要加display: block，不是很清楚

2016-10-31 屏幕自适应问题

dreamsqin

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

我把我的代码粘上来~ 提问： 1、这样写之后上半部分的可以跟随浏览器宽度变小移动，但是下面固定死了不动，怎样让下半部分中的文字也达到上半部分的效果 2、上半部分虽然可以跟着一起移动了~但是当用手机模式预览的时候上半部分也不是居中状态（参见上传图片）以此类推可能浏览器宽度变宽之后也不是居中状态

<!doctype html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8">
        <script src="../../bootstrap-3.3.0-dist/dist/js/jquery-2.0.3.js"></script>
        <link href="../../bootstrap-3.3.0-dist/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="../../bootstrap-3.3.0-dist/dist/js/bootstrap.min.js"></script>
    
        <style>
            div.footer{
                margin: 0px;
                border-top-style: solid;
                border-top-width: 1px;
                border-top-color: #e7e7e7;
            }
            
            div.footer_ensure{
                width: 1190px;
                margin:25px auto;
            }
            
            div.footer_desc{
                width: 1190px;
                border-top-style: solid;
                border-top-width: 1px;
                border-top-color: #e7e7e7;
                padding-top: 30px;
                margin: auto;
            }
            
            div.footer_desc div.descColumn{
                width: 20%;
                float: left;
                padding-left: 52px;
            }
            
            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{
                color: #999;
                text-decoration: none;
            }
            
            
            div.copyright{
                min-width: 1382px;
                background-color: black;
                border-top-style: solid;
                border-top-width: 2px;
                border-top-color: #C40000;
            }
            
            div.copyright span.slash{
                color: white;
            }
            
            
            div.copyright div.white_link a{
                color: white;
                padding: 0px 5px;
            }
            
            div.copyright div.white_link{
                padding: 10px 0px;
                margin-left: 115px;
            }
            
            div.license{
                padding-bottom: 30px;
                margin-left: 120px;
            }
            
            div.license span{
                color: #A4A4A4;
            }
            
            div.copyRightYear{
                margin: 10px 0px;
                color: #686868;
            }
            
            img.cateye{
                margin-left: 165px;
            }
            
            div.license_img img{
                margin-right: 10px;
            }
        </style>
    </head>
    
    <div class="footer">
        <div class="footer_ensure">
            <img src="images/footer/ensure.jpg">
        </div>
        
        <div class="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>
                <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="images/footer/ma.png"></a>
            </div>
        </div>
        <div style="clear:both;"></div>
        <img src="images/footer/cateye.png" class="cateye">
            <div class="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>
                    <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">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 class="license_img">
                        <img src="images/footer/copyRight1.jpg">
                        <img src="images/footer/copyRight2.jpg">
                    </div>
                </div>
            </div>
        
    </div>
</html>

1 个答案

how2j
答案时间：2016-11-01

1. 之所以固定死了，是因为你加了这么一个样式： div.copyright{ min-width: 1382px; background-color: black; border-top-style: solid; border-top-width: 2px; border-top-color: #C40000; } 设置了最小宽度 min-width: 1382px; 只要把这个去掉就可以了。 2. 你谈的是手机屏幕自适应宽度问题，这个是一个比较复杂的问题，特别是需要同时兼容浏览器和手机显示的时候。本教程在这方面考虑的不足，我提供一个思路供你参考吧。分别设计两张页面，一个用于在pc上显示，一个用于在手机上显示，可以极大地简化同一个页面兼容PC和手机的问题。你用手机打开tmall试试，可以发现，手机上，根本就看不到页脚了：）

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

2016-10-28 这个页脚效果出来之后不随浏览器自适应

提问之前请登陆

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

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

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

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

上传截图