how2j.cn


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

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

完整的首页产品列表是在 模仿天猫首页 中,每个分类有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>


源代码
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="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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用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.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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
增值内容,请先登录
模仿天猫前端,单纯使用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.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 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


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


问答区域    
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;
}

							


1 个答案

how2j
答案时间:2020-06-12
很不错,加油



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





2020-04-06 要制作两个元素的间隔效果,是优先设置外边距还是内边距
柚子社天下第一

本例中的产品项之间和产品类别之间都是使用了外边距,这个内外边距选择有什么讲究吗




1 个答案

how2j
答案时间:2020-04-07
这个啊,两种都能达到同样的效果, 用多了就熟练了。 我个人倾向于用外边距。



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




2019-08-22 站长 这个问题有点搞不懂
2019-08-10 请求站长给点意见关于命名、样式制作上的一些小细节
2019-08-06 写的好乱..站长能不能帮忙看看有啥需要改进的...


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

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

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

上传截图