天猫前端系列教材（十四）- 首页

工具版本兼容问题

9分7秒

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

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

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

步骤 1 :

效果

edit 顶折

纠问

完整的首页产品列表是在模仿天猫首页中，每个分类有5种首页推荐产品，一共17种分类。为了讲解的便利性，只选取了其中的2个分类来分析样式。

如果屏幕分辨率比较小的话，会看到5个产品换行了，这是因为为了演示实际效果，放在了步骤栏里，压缩了宽度。相同的代码，放在整个页面就不会换行了。

<!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.homepageCategoryProducts{ background-color: #F5F5F5; padding: 50px 10px 50px 10px; margin: 10px auto; max-width: 1013px; } div.productItem{ width: 189px; height: 285px; border: 1px solid white; background-color: white; margin: 8px 4px; float: left; cursor: pointer; } div.productItem span.productItemDesc{ font-size: 12px; color: #666666; display: block; padding: 16px; } div.productItem span.productPrice{ font-size: 16px; color: #FF003A; display: block; padding-left: 16px; margin-top: -10px; } div.productItem img{ width: 187px; height: 190px; } div.productItem img:hover{ opacity: 0.7; filter: alpha(opacity = 70); } div.eachHomepageCategoryProducts{ margin: 0px 0px 40px 0px; } a.productItemDescLink{ display: inline-block; height: 66px; text-decoration:none; } span.categoryTitle{ font-size: 16px; margin-left: 30px; color: #646464; font-weight: bold; } div.left-mark{ display: inline-block; height: 20px; vertical-align: top; width: 5px; background-color: #19C8A9; } img.endpng{ display: block; width: 82px; margin: 0 auto; } </style> <div class="homepageCategoryProducts"> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">太阳镜</span> <br> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 好先生同款墨镜孙红雷偏光男士太阳镜韩明星 </span> </a> <span class="productPrice"> 97.50 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 陌森太阳眼镜男女2016偏光定制驾驶近视 </span> </a> <span class="productPrice"> 518.70 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 帕莎Prsr太阳镜女偏光镜潮范冰冰同款女 </span> </a> <span class="productPrice"> 624.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 变色眼镜男女款半框太阳镜大框潮流防辐射防 </span> </a> <span class="productPrice"> 170.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 新款男士偏光太阳镜日夜两用墨镜潮运动开车 </span> </a> <span class="productPrice"> 551.00 </span> </div> <div style="clear:both"></div> </div> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">安全座椅</span> <br> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 新生儿婴儿提篮式安全座椅汽车用车载儿童安 </span> </a> <span class="productPrice"> 882.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] REEBABY汽车儿童安全座椅ISOFI </span> </a> <span class="productPrice"> 1,344.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] REEBABY儿童安全座椅9个月-12岁 </span> </a> <span class="productPrice"> 1,216.00 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 好孩子汽车儿童安全座椅goodbaby9 </span> </a> <span class="productPrice"> 1,199.40 </span> </div> <div class="productItem"> <a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a> <a href="#nowhere" class="productItemDescLink"> <span class="productItemDesc">[热销] 惠尔顿儿童安全座椅isofix硬接口汽车 </span> </a> <span class="productPrice"> 1,993.60 </span> </div> <div style="clear:both"></div> </div> <img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng"> </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.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

源代码

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</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="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

源代码

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

<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

渲染中渲染完成

效果

步骤 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.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

源代码

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

渲染中渲染完成

效果

步骤 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.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

源代码

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

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
<link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
<script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
</head>
<style>
div.homepageCategoryProducts{
	background-color: #F5F5F5;
	padding: 50px 10px 50px 10px;
	margin: 10px auto;
	max-width: 1013px;
}
div.productItem{
	width: 189px;
	height: 285px;
	border: 1px solid white;
	background-color: white;
	margin: 8px 4px;
	float: left;
	cursor: pointer;
}
div.productItem span.productItemDesc{
	font-size: 12px;
	color: #666666;
	display: block;
	padding: 16px;
}
div.productItem span.productPrice{
	font-size: 16px;
	color: #FF003A;
	display: block;
	padding-left: 16px;
	margin-top: -10px;
}
div.productItem img{
	width: 187px;
	height: 190px;
}
div.productItem  img:hover{
	opacity: 0.7;
	filter: alpha(opacity = 70);
}
div.eachHomepageCategoryProducts{
	margin: 0px 0px 40px 0px;
}
a.productItemDescLink{
	display: inline-block;
	height: 66px;
	text-decoration:none;
}
span.categoryTitle{
	font-size: 16px;
	margin-left: 30px;
	color: #646464;
	font-weight: bold;
}
div.left-mark{
	display: inline-block;
	height: 20px;
	vertical-align: top;
	width: 5px;
	background-color: #19C8A9;
}
img.endpng{
	display: block;
	width: 82px;
	margin: 0 auto;
}
</style>
<div class="homepageCategoryProducts">
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">太阳镜</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9543.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好先生同款墨镜孙红雷偏光男士太阳镜韩明星
							</span>
					    </a>
						<span class="productPrice">
							97.50
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9532.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							陌森太阳眼镜男女2016偏光定制驾驶近视
							</span>
					    </a>
						<span class="productPrice">
							518.70
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9521.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							帕莎Prsr太阳镜女偏光镜潮范冰冰同款女
							</span>
					    </a>
						<span class="productPrice">
							624.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9510.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							变色眼镜男女款半框太阳镜大框潮流防辐射防
							</span>
					    </a>
						<span class="productPrice">
							170.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/9499.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新款男士偏光太阳镜日夜两用墨镜潮运动开车
							</span>
					    </a>
						<span class="productPrice">
							551.00
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
		<div class="eachHomepageCategoryProducts">
			<div class="left-mark"></div>
			<span class="categoryTitle">安全座椅</span>
			<br>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10192.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							新生儿婴儿提篮式安全座椅汽车用车载儿童安
							</span>
					    </a>
						<span class="productPrice">
							882.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10181.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY汽车儿童安全座椅ISOFI
							</span>
					    </a>
						<span class="productPrice">
							1,344.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10170.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							REEBABY儿童安全座椅9个月-12岁
							</span>
					    </a>
						<span class="productPrice">
							1,216.00
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10159.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							好孩子汽车儿童安全座椅goodbaby9
							</span>
					    </a>
						<span class="productPrice">
							1,199.40
						</span>
					</div>
					<div class="productItem">
						<a href="#nowhere"><img width="100px" src="https://how2j.cn/tmall/img/productSingle_middle/10148.jpg"></a>
						<a href="#nowhere" class="productItemDescLink">
							<span class="productItemDesc">[热销]
							惠尔顿儿童安全座椅isofix硬接口汽车
							</span>
					    </a>
						<span class="productPrice">
							1,993.60
						</span>
					</div>
			<div style="clear:both"></div>
		</div>
	<img src="https://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng">
</div>

渲染中渲染完成

效果

天猫前端系列教材（十三）- 首页 - 分类和推荐产品

天猫前端系列教材（十五）- 首页 - 交互

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

问答区域

2022-06-23 productItem类少了一个悬停样式

fujava

关于实践项目-天猫前端-产品列表的提问

productItem类少了一个悬停样式

div.productItem:hover{
    border-color: #c40000;
}

2 个答案

起个名
答案时间：2024-04-23

111111

这个提议甚好...

how2j
答案时间：2022-07-04

好的

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

2020-08-03 我用vue那个组件写的怎么写能减少代码量啊这也太多了

学习使我超快乐

关于实践项目-天猫前端-产品列表的提问

像后面重复产品列表怎么能少写点代码

<body>
		<div id="porductItem" style="display: none;">
			<div class="product">
			<a href="#nowhere"><img width="100px" v-bind:src="product.src" alt=""></a>
			<a href="#nowhere" class="productItemDescLink"><span class="productItemDesc">{{product.name}}</span></a>
			<span class="productPrice">{{product.price}}</span>
		    </div>
		</div>
		
		<div class="homepageCategoryProducts">
			<div class="eachHomepageCategoryProducts">
				<div class="left-mark"></div>
				<span class="categoryTitle">太阳镜</span>
				</br>
				<div id="div1">
					<product v-for="item in products" v-bind:product="item"></product>
				</div>
				<div style="clear: both;"></div>
			</div>
			
				<div class="eachHomepageCategoryProducts">
					<div class="left-mark"></div>
					<span class="categoryTitle">安全座椅</span>
					</br>
					<div id="div2">
						<product v-for="item in products" v-bind:product="item"></product>
					</div>
					<div style="clear: both;"></div>
				</div>
				<img src="../img/end.png" alt="" class="endpng">
		</div>

		
		<script>
			var tempalateDiv=document.getElementById("porductItem").innerHTML;
			var templateObject = {
				props: ['product'],
				template: tempalateDiv,
			}
			
			Vue.component('product',templateObject)
			
			new Vue({
				el: '#div1',
				data:{
					products:[
						{"name":"[热销] 好先生同款墨镜孙红雷偏光男士太阳镜韩明星","src":"../img/9543.jpg","price":"97.50"},
						{"name":"[热销] 陌森太阳眼镜男女2016偏光定制驾驶近视","src":"../img/9532.jpg","price":"518.70"},
						{"name":"[热销] 帕莎Prsr太阳镜女偏光镜潮范冰冰同款女","src":"../img/9521.jpg","price":"624.00"},
						{"name":"[热销] 变色眼镜男女款半框太阳镜大框潮流防辐射","src":"../img/9510.jpg","price":"170.00"},
						{"name":"[热销] 新款男士偏光太阳镜日夜两用墨镜潮运动开车","src":"../img/9499.jpg","price":"551.00"}
					]
				}
				
			})
			new Vue({
				el: '#div2',
				data:{
					products:[
						{"name":"[热销] 新生儿婴儿提篮式安全座椅汽车用车载儿童","src":"../img/10192.jpg","price":"882.00"},
						{"name":"[热销] REEBABY汽车儿童安全座椅ISOFI","src":"../img/10181.jpg","price":"1344.00"},
						{"name":"[热销] REEBABY儿童安全座椅9个月-12岁","src":"../img/10170.jpg","price":"1216.00"},
						{"name":"[热销] 好孩子汽车儿童安全座椅goodbaby","src":"../img/10159.jpg","price":"1199.40"},
						{"name":"[热销] 惠尔顿儿童安全座椅isofix硬接口汽车","src":"../img/10148.jpg","price":"1993.60"}
					]
				}
				
			})
		</script>
	</body>

1 个答案

how2j
答案时间：2020-08-04

结合服务端，这些页面数据的渲染都是从数据库里取出来的。等做了整站项目就能理解如何做了。

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

2020-06-10 总感觉那个产品列表居中有点难看，闲着没事调了居中

hughtain

关于实践项目-天猫前端-产品列表的提问

只是修改了一点点不足为道的style部分代码，但是想着做点记录激励自己学下去就也来占一个坑了

div.productItem{
    width: 193px;
    height: 285px;
    border: 1px solid white;
    background-color: white;
    margin: 20px 10px;
    float: left;
    cursor: pointer;
}

2 个答案

ercilan
答案时间：2020-11-08

看着就发现你上面的商品分类没细做

how2j
答案时间：2020-06-12

很不错，加油

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

2020-04-06 要制作两个元素的间隔效果，是优先设置外边距还是内边距

2019-08-22 站长这个问题有点搞不懂

1775833215

关于实践项目-天猫前端-产品列表的提问

为什么同一个div下的子div和span都用样式设计成inline-block 后，子div会挨着顶部，而span会和顶部有一段距离！这个距离哪里来的？怎么解决呢？求解截图里红色箭头指的地方！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
div.out{
	border:1px gray solid;	
}
div.line{
	height:30px;
	width:4px;
	background-color:#C40000;
	display:inline-block;
	margin-right:30px;	
}
span.font{
	border:1px gray solid;
	margin-top:0px;	
}
</style>
<body>
<div class="out">
	<div class="line"></div>
    <span class="font">鸭梨大</span>
</div>
</body>
</html>

为什么同一个div下的子div和span都用样式设计成inline-block 后，子div会挨着顶部，而span会和顶部有一段距离！这个距离哪里来的？怎么解决呢？求解

3 个答案

lishine
答案时间：2020-04-09

是不是因为inline-block默认是底端对齐

kira_
答案时间：2020-02-11

所以我喜欢把div.line设置成float: left，它们基线会保持一致，稍作调整即可。

how2j
答案时间：2019-08-23

大概是因为仅仅修改display 成 inline-block，并不会导致 span 和 div 的行为完全一样吧

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

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

提问之前请登陆

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

关于实践项目-天猫前端-产品列表的提问

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

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

上传截图