how2j.cn


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

步骤 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> body{ font-size: 12px; font-family: Arial; } div.productReviewDiv{ width: 790px; margin: 40px auto; } div.productReviewTopPart{ border: 1px solid #DFDFDF; } a.productReviewTopPartSelectedLink{ padding: 0px 20px; color: #333333; } a.selected{ border-left: 1px solid #cfbfb1; border-right: 1px solid #cfbfb1; color: #b10000; display: inline-block; font-weight: bold; line-height: 46px; width: 90px; text-align: center; position: relative; } a.selected:before{ content: ""; display: block; border-width: 1px; border-style: solid; border-color: #b00000; width: 90px; height: 0; position: absolute; top: -1px; margin-left: -1px; } a.selected:after{ content: ""; display: block; border-color: #b00000 transparent transparent; border-style: solid; border-width: 5px; width: 0; height: 0; position: absolute; top: -1px; left: 50%; margin-left: -5px; } div.productReviewContentPart{ padding-top: 50px; } div.productReviewItem{ border-bottom: 1px solid #E3E3E3; margin: 10px 0px; } div.productReviewItem div.productReviewItemDesc{ width: 80%; display: inline-block; color: #333333; margin: 5px 20px; float: left; } div.productReviewItemDate{ margin: 15px 0px 0px 0px; color: #CCCCCC; } div.productReviewItem div.productReviewItemUserInfo{ color: #404040; margin: 5px 20px; padding: 20px 0; } span.userInfoGrayPart{ color: #999999; } a:hover{ color:#C40000; text-decoration:none; } </style> <div class="productPageDiv"> <div class="productReviewDiv" style="display: block;"> <div class="productReviewTopPart"> <a class="productReviewTopPartSelectedLink" href="#nowhere">商品详情</a> <a class="selected" href="#nowhere">累计评价 <span class="productReviewTopReviewLinkNumber">19</span> </a> </div> <div class="productReviewContentPart"> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 不错的购物,包装很精细,布料也不错舒服,因为之前一直购买品牌装,很好的一次网购,生完宝宝刚刚一个多月我一百五十斤穿2XL不错 </div> <div class="productReviewItemDate">2016-08-10</div> </div> <div class="productReviewItemUserInfo"> 哀****莉<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 面料很好,大小也刚刚好,本来买之前还担心,犹豫,等货到了,比我心中想象的好很多,大家放心购买,很满意的购物,以后还会来?? </div> <div class="productReviewItemDate">2016-08-23</div> </div> <div class="productReviewItemUserInfo"> 贤*闲<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> <span>商品:</span>宝贝料子和手感都不错,是值这价,卖家很贴心的送了内衣带,5分好评是必须的。喜欢的可以 下手了 </div> <div class="productReviewItemDate">2016-08-16</div> </div> <div class="productReviewItemUserInfo"> 孤*****爱<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 衣服收到了,给朋友买的,真心不错,料子也特别好,穿起来特别有气质,跟模特穿的效果差不多。。。好评,好评 </div> <div class="productReviewItemDate">2016-08-19</div> </div> <div class="productReviewItemUserInfo"> 哀****莉<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 衣服不错,手感不错,试穿很有型,真心的喜欢,谢谢老板 </div> <div class="productReviewItemDate">2016-07-19</div> </div> <div class="productReviewItemUserInfo"> 孤*****爱<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 喜欢(⊙o⊙)哦,美美哒,值得一试!!!宽松雪纺,很舒服 </div> <div class="productReviewItemDate">2016-08-10</div> </div> <div class="productReviewItemUserInfo"> 这****0<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 衣服已经收到,大小很合适,面料也可以,就是感觉衣服面料有一点厚,其他都还不错,款式也好看,希望店家多出一点新款,以后回来光顾你们。? </div> <div class="productReviewItemDate">2016-07-10</div> </div> <div class="productReviewItemUserInfo"> y****心<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 很漂亮的衣服,料子有垂感,我很满意,老公也说好呢 </div> <div class="productReviewItemDate">2016-07-27</div> </div> <div class="productReviewItemUserInfo"> 阿*丶<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 真不错,已经迫不及待的穿上了,朋友们都说好,挺有气质的,就是上衣稍微有点肥,不过肉肉被藏起来了!有看上的赶紧下单吧! </div> <div class="productReviewItemDate">2016-08-12</div> </div> <div class="productReviewItemUserInfo"> 名*****_<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 质量是真的不错,适合个子高一点的美眉穿,很漂亮? </div> <div class="productReviewItemDate">2016-08-03</div> </div> <div class="productReviewItemUserInfo"> 安**°<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 再买的时候纠结了好久,最后还是选择在这里购买,一次满意的网购,让我对网购有了希望,或刚收到,因觉得物超所值,就迫不及待拍了照片,那个玻璃的声音非常脆,我个人觉得挺好的,值得拥有! </div> <div class="productReviewItemDate">2016-08-08</div> </div> <div class="productReviewItemUserInfo"> 这****0<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> <span>服务:</span>不错 </div> <div class="productReviewItemDate">2016-08-20</div> </div> <div class="productReviewItemUserInfo"> 醉**心<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 强烈推荐,我的天,质量也太好了,让我情何以堪,大爱啊。说说我的体格吧,162.105斤,腰围大概是22,穿m码刚刚好。快递那么快,特地跟店家说10号要外出店家也尽心备注的很好。真的特别感动,我收藏店铺了,下次还来你们家。衣服比雪纺舒服,薄薄的,现在穿刚好,我配了高跟鞋和小白鞋都很完美。店家还送了无痕肩带,真的太细心了,给一百个好评,赞。衣服我看了没有线头,薄薄的。不说了,我赶紧发给我姐让她看看。 </div> <div class="productReviewItemDate">2016-08-17</div> </div> <div class="productReviewItemUserInfo"> 安**°<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 此用户没有填写评论! </div> <div class="productReviewItemDate">2016-07-21</div> </div> <div class="productReviewItemUserInfo"> 乱**型<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 衣服质量真心不错很厚实,上身效果很棒哦,穿起来很舒服,很洋气。价格也很合理……赞赞赞 </div> <div class="productReviewItemDate">2016-08-19</div> </div> <div class="productReviewItemUserInfo"> 丶***眠<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 衣服裤子都很合身,同事笑我说这是我买得最好看最时尚的一套衣服,衣服上身效果也不错,很是满意,还送了隐形带,正好用上,质量很好穿着凉快,唯一不足的就是洗了后需要烫一下才不皱,不过不影响衣服的美,很满意。上传两张没P的照片 </div> <div class="productReviewItemDate">2016-08-08</div> </div> <div class="productReviewItemUserInfo"> 乱**型<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 不好意思好久才来评价 质量好 上身效果好 主要有胖子穿的漂亮衣服啦 赞赞赞 </div> <div class="productReviewItemDate">2016-07-11</div> </div> <div class="productReviewItemUserInfo"> l******1<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 网购以来为数不多的质量好到超乎意料,穿上特别舒服,大小也正合适,超赞!这个店里值得好好逛逛! </div> <div class="productReviewItemDate">2016-07-10</div> </div> <div class="productReviewItemUserInfo"> 盗**记<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> <div class="productReviewItem"> <div class="productReviewItemDesc"> <div class="productReviewItemContent"> 宝贝面料很舒服,一字领也非常美,说实话是充上衣买的!犹豫了很长时间才下定决心的,很喜欢,很满意!喜欢就是最值的! </div> <div class="productReviewItemDate">2016-07-24</div> </div> <div class="productReviewItemUserInfo"> 贤*闲<span class="userInfoGrayPart">(匿名)</span> </div> <div style="clear:both"></div> </div> </div> </div> </div>