how2j.cn

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

<!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.reviewDiv{ max-width: 1013px; margin: 10px auto; } div.reviewProductInfoImg{ border: 1px solid #E7E7E7; width: 464px; text-align: center; float: left; } div.reviewProductInfoRightDiv{ overflow: hidden; border-top: 1px solid #E7E7E7; padding: 30px 20px; } div.reviewProductInfoRightText{ color: black; font-size: 16px; font-weight: bold; } table.reviewProductInfoTable{ margin: 20px 10px; font-size:12px; } table.reviewProductInfoTable td{ padding-bottom: 5px; color: #999999; } span.reviewProductInfoTablePrice{ color: #C40000; font-size: 20px; font-weight: bold; } span.reviewProductInfoTableSellNumber{ color: #C40000; font-size: 14px; font-weight: bold; } div.reviewProductInfoRightBelowDiv{ border: 1px solid #F6F5F3; background-color: #FDFBFA; height: 166px; padding:16px 0px 16px 81px; } span.reviewProductInfoRightBelowImg{ background-color: white; border: 1px solid #E1E1E1; display: inline-block; width: 23px; height: 42px; background-image:url(http://how2j.cn/tmall/img/site/reviewLight.png); background-repeat: no-repeat; padding: 0px; } span.reviewProductInfoRightBelowText{ border: 1px solid #EFEFEF; display: inline-block; width: 200px; height: 42px; padding: 4px; position: relative; left: -4px; top: -7px; color: #666666; font-size:12px; } img.reviewProductImg{ width:400px; height:400px; } </style> <div class="reviewDiv"> <div class="reviewProductInfoDiv"> <div class="reviewProductInfoImg"><img class="reviewProductImg" width="100px" height="100px" src="http://how2j.cn/tmall/img/productSingle/8697.jpg"></div> <div class="reviewProductInfoRightDiv"> <div class="reviewProductInfoRightText"> 2016夏季新款女装雪纺衫短裤两件套 韩版时尚名媛休闲套装女夏装 </div> <table class="reviewProductInfoTable"> <tbody><tr> <td width="75px">价格:</td> <td><span class="reviewProductInfoTablePrice">¥263.00</span> 元 </td> </tr> <tr> <td>配送</td> <td>快递: 0.00</td> </tr> <tr> <td>月销量:</td> <td><span class="reviewProductInfoTableSellNumber">50</span> 件</td> </tr> </tbody></table> <div class="reviewProductInfoRightBelowDiv"> <span class="reviewProductInfoRightBelowImg"><img1 src="http://how2j.cn/tmall/img/site/reviewLight.png"></img1></span> <span class="reviewProductInfoRightBelowText">现在查看的是 您所购买商品的信息 于2016年09月12下单购买了此商品 </span> </div> </div> <div style="clear:both"></div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
布局
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!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> <div class="reviewDiv"> <div class="reviewProductInfoDiv"> <div class="reviewProductInfoImg"><img class="reviewProductImg" width="100px" height="100px" src="http://how2j.cn/tmall/img/productSingle/8697.jpg"></div> <div class="reviewProductInfoRightDiv"> <div class="reviewProductInfoRightText"> 2016夏季新款女装雪纺衫短裤两件套 韩版时尚名媛休闲套装女夏装 </div> <table class="reviewProductInfoTable"> <tbody><tr> <td width="75px">价格:</td> <td><span class="reviewProductInfoTablePrice">¥263.00</span> 元 </td> </tr> <tr> <td>配送</td> <td>快递: 0.00</td> </tr> <tr> <td>月销量:</td> <td><span class="reviewProductInfoTableSellNumber">50</span> 件</td> </tr> </tbody></table> <div class="reviewProductInfoRightBelowDiv"> <span class="reviewProductInfoRightBelowImg"><img1 src="http://how2j.cn/tmall/img/site/reviewLight.png"></img1></span> <span class="reviewProductInfoRightBelowText">现在查看的是 您所购买商品的信息 于2016年09月12下单购买了此商品 </span> </div> </div> <div style="clear:both"></div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!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.reviewDiv{ max-width: 1013px; margin: 10px auto; } div.reviewProductInfoImg{ border: 1px solid #E7E7E7; width: 464px; text-align: center; float: left; } div.reviewProductInfoRightDiv{ overflow: hidden; border-top: 1px solid #E7E7E7; padding: 30px 20px; } div.reviewProductInfoRightText{ color: black; font-size: 16px; font-weight: bold; } table.reviewProductInfoTable{ margin: 20px 10px; font-size:12px; } table.reviewProductInfoTable td{ padding-bottom: 5px; color: #999999; } span.reviewProductInfoTablePrice{ color: #C40000; font-size: 20px; font-weight: bold; } span.reviewProductInfoTableSellNumber{ color: #C40000; font-size: 14px; font-weight: bold; } div.reviewProductInfoRightBelowDiv{ border: 1px solid #F6F5F3; background-color: #FDFBFA; height: 166px; padding:16px 0px 16px 81px; } span.reviewProductInfoRightBelowImg{ background-color: white; border: 1px solid #E1E1E1; display: inline-block; width: 23px; height: 42px; background-image:url(http://how2j.cn/tmall/img/site/reviewLight.png); background-repeat: no-repeat; padding: 0px; } span.reviewProductInfoRightBelowText{ border: 1px solid #EFEFEF; display: inline-block; width: 200px; height: 42px; padding: 4px; position: relative; left: -4px; top: -7px; color: #666666; font-size:12px; } img.reviewProductImg{ width:400px; height:400px; } </style> <div class="reviewDiv"> <div class="reviewProductInfoDiv"> <div class="reviewProductInfoImg"><img class="reviewProductImg" width="100px" height="100px" src="http://how2j.cn/tmall/img/productSingle/8697.jpg"></div> <div class="reviewProductInfoRightDiv"> <div class="reviewProductInfoRightText"> 2016夏季新款女装雪纺衫短裤两件套 韩版时尚名媛休闲套装女夏装 </div> <table class="reviewProductInfoTable"> <tbody><tr> <td width="75px">价格:</td> <td><span class="reviewProductInfoTablePrice">¥263.00</span> 元 </td> </tr> <tr> <td>配送</td> <td>快递: 0.00</td> </tr> <tr> <td>月销量:</td> <td><span class="reviewProductInfoTableSellNumber">50</span> 件</td> </tr> </tbody></table> <div class="reviewProductInfoRightBelowDiv"> <span class="reviewProductInfoRightBelowImg"><img1 src="http://how2j.cn/tmall/img/site/reviewLight.png"></img1></span> <span class="reviewProductInfoRightBelowText">现在查看的是 您所购买商品的信息 于2016年09月12下单购买了此商品 </span> </div> </div> <div style="clear:both"></div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
步骤 6 :

再整合在一起

edit
增值内容,请先登录
模仿天猫前端,单纯使用Html和CSS实现天猫官网, 大大提升前端技术与能力,积累宝贵前端项目经验。总计28张页面布局分析图, 33个js交互代码讲解, 395个选择器,1150个样式(每个均有注释), 涵盖全部68个知识点,267个学习步骤,包含一共21个讲解视频,累计时长11小时44分25秒,大小1.97G,为简历加上一个有吸引力的砝码。 学习期间,遇到本项目任何问题,都可以得到我的专业指导。 (购买一次,即可访问天猫前端所有知识点)
增值内容,点击购买
使用爬虫已经被系统记录,请勿使用爬虫,增大封号风险。 如果是误封 ,请联系站长,谢谢
运行效果
<!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.reviewDiv{ max-width: 1013px; margin: 10px auto; } div.reviewProductInfoImg{ border: 1px solid #E7E7E7; width: 464px; text-align: center; float: left; } div.reviewProductInfoRightDiv{ overflow: hidden; border-top: 1px solid #E7E7E7; padding: 30px 20px; } div.reviewProductInfoRightText{ color: black; font-size: 16px; font-weight: bold; } table.reviewProductInfoTable{ margin: 20px 10px; font-size:12px; } table.reviewProductInfoTable td{ padding-bottom: 5px; color: #999999; } span.reviewProductInfoTablePrice{ color: #C40000; font-size: 20px; font-weight: bold; } span.reviewProductInfoTableSellNumber{ color: #C40000; font-size: 14px; font-weight: bold; } div.reviewProductInfoRightBelowDiv{ border: 1px solid #F6F5F3; background-color: #FDFBFA; height: 166px; padding:16px 0px 16px 81px; } span.reviewProductInfoRightBelowImg{ background-color: white; border: 1px solid #E1E1E1; display: inline-block; width: 23px; height: 42px; background-image:url(http://how2j.cn/tmall/img/site/reviewLight.png); background-repeat: no-repeat; padding: 0px; } span.reviewProductInfoRightBelowText{ border: 1px solid #EFEFEF; display: inline-block; width: 200px; height: 42px; padding: 4px; position: relative; left: -4px; top: -7px; color: #666666; font-size:12px; } img.reviewProductImg{ width:400px; height:400px; } </style> <div class="reviewDiv"> <div class="reviewProductInfoDiv"> <div class="reviewProductInfoImg"><img class="reviewProductImg" width="100px" height="100px" src="http://how2j.cn/tmall/img/productSingle/8697.jpg"></div> <div class="reviewProductInfoRightDiv"> <div class="reviewProductInfoRightText"> 2016夏季新款女装雪纺衫短裤两件套 韩版时尚名媛休闲套装女夏装 </div> <table class="reviewProductInfoTable"> <tbody><tr> <td width="75px">价格:</td> <td><span class="reviewProductInfoTablePrice">¥263.00</span> 元 </td> </tr> <tr> <td>配送</td> <td>快递: 0.00</td> </tr> <tr> <td>月销量:</td> <td><span class="reviewProductInfoTableSellNumber">50</span> 件</td> </tr> </tbody></table> <div class="reviewProductInfoRightBelowDiv"> <span class="reviewProductInfoRightBelowImg"><img1 src="http://how2j.cn/tmall/img/site/reviewLight.png"></img1></span> <span class="reviewProductInfoRightBelowText">现在查看的是 您所购买商品的信息 于2016年09月12下单购买了此商品 </span> </div> </div> <div style="clear:both"></div> </div> </div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
2018-10-30 交作业
我会努力学JAVA的



这个都没啥难的,
<style>
	body{
		font-size: 12px;
		font-family: arial;
	}
	div.reviewDiv{
		max-width: 1013px;
		margin: 10px auto;
	}
	div.reviewProductInfoImg{
		float: left;
		border: 1px solid #E5E5E5;
		padding-left: 30px;
		padding-right: 30px;
	}
	div.reviewProductInfoImg img{
		width: 400px;
		height: 400px;
	}
	div.reivewProductInfoRightDiv{
		overflow: hidden;
		border-top: 1px solid #E5E5E5;
		padding-left: 20px;
	}
	div.reviewProductInfoRightBelowDiv{
		border: 1px solid #E5E5E5;
		margin: 20px 20px 0px 0px;
		height: 150px;
		background-color: #FDFBFA;
		padding-top: 15px;
		padding-left: 80px;
	}
	div.reviewProductInfoRightText{
		font-size: 16px;
		font-weight: bold;
		color: black;
		margin: 30px auto;
	}
	table.reviewProductInfoTable td{
		font-size: 12px;
		color: #999999;
		padding: 5px;
	}
	span.reviewProductInfoTablePrice{
		color: #C40000 !important;
		font-size: 22px;
		font-weight: bold;
		/* border: 1px dotted #F2F6FF; */
	}
	span.reivewProductInfoTableSellNumber{
		color: #C40000;
		font-weight: bold;
		font-size: 14px;
	}
	
	span.reivewProductInfoRightBelowImg{
		display: inline-block;
/* 		height: 30px;
		width: 10px; */
		border: 1px solid #E5E5E5;
		float: left;
	}
	span.reviewProductInfoRightBelowText{
		display: inline-block;
		border: 1px solid #E5E5E5;
		height: 40px;
		width: 190px;
		border-left: 0px !important;
	}
</style>

							


1 个答案

how2j 答案时间:2018-10-31
请勿在项目里交作业



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到





2017-07-20 多写了一个1
yoyo3



标签写错了
<img1 src="http://how2j.cn/tmall/img/site/reviewLight.png"></img1>

							


3 个答案

QQ会员 答案时间:2018-06-21
如果把img1改为正确的img的话,会发生偏移,直接把img标签去掉就好了 我觉得应该是<img1>标签浏览器识别不了,所以就自动丢弃了,和没写<img>标签效果是一样的

jian_c 答案时间:2017-11-08
这里的标签貌似是没有生效的,然后在css里面加了图片。我试了一下换成img标签,然后吧样式表里面的图片去掉,调整一下定位高度就可以达成一样的效果。

how2j 答案时间:2017-08-15
谢谢提醒,不过好奇怪,也能生效。。。



回答已经提交成功,正在审核。 请于 我的回答 处查看回答记录,谢谢
答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
关于 实践项目-天猫前端-评价页面上 的提问

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

上传截图