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="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.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(https://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="https://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="https://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="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="reviewDiv"> <div class="reviewProductInfoDiv"> <div class="reviewProductInfoImg"><img class="reviewProductImg" width="100px" height="100px" src="https://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="https://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="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.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(https://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="https://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="https://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="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.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(https://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="https://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="https://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公众号,关注后实时获知最新的教程和优惠活动,谢谢。


问答区域    
2019-12-26 关于对齐问题
weihouye




请问站长,有个疑问,为啥span.reviewProductInfoRightBelowImg 和 span.reviewProductInfoRightBelowText 这两个span 都设置高度 height :42px; 但是却对不齐,而需要手动调整 span.reviewProductInfoRightBelowText 的位置呢??
加载中
span.reviewProductInfoRightBelowImg{
    background-color: white;
    border: 1px solid #E1E1E1;
    display: inline-block;
    width: 23px;
    height: 42px;
    background-image:url(https://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;
}

·····

<span class="reviewProductInfoRightBelowImg"><img1 src="https://how2j.cn/tmall/img/site/reviewLight.png"></img1></span>
<span class="reviewProductInfoRightBelowText">现在查看的是 您所购买商品的信息于2016年09月12下单购买了此商品 </span>

							


1 个答案

how2j
答案时间:2019-12-27
这个呢。。。站长也是一点点试出来的,上面歪了就往下移动一点点,下面歪了就往上移动一点点~



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





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

上传截图