how2j.cn


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

步骤 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="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.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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="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="homepageCategoryProducts"> <div class="eachHomepageCategoryProducts"> <div class="left-mark"></div> <span class="categoryTitle">太阳镜</span> <br> <div class="productItem"> <a href="#nowhere"><img width="100px" src="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="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.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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="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.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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://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="http://how2j.cn/tmall/img/site/end.png" class="endpng" id="endpng"> </div>


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


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


问答区域    
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会和顶部有一段距离!这个距离哪里来的?怎么解决呢?求解


1 个答案

how2j 答案时间:2019-08-23
大概是因为 仅仅修改display 成 inline-block,并不会导致 span 和 div 的行为完全一样吧



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





2019-08-10 请求站长给点意见关于命名、样式制作上的一些小细节
Tim99



看看站长给出的代码,从HTML开始就给每个标签做好了命名,比如这里的homepageCategoryProducts、eachHomepageCategoryProducts等等,我也试着去自己弄了弄,找翻译什么的,但总是觉得没有这么那么的规范,这个是要练出来的吗?还是说细细的找,弄好就可以了? 然后我粘一段我自己写的代码吧(主要是样式,没有对答案直接打出来的),我总感觉我做得很随意啊,那些width,height,我看着差不多了就这样调调,左歪了就加一些之类的……效果…看上去应该是没什么问题,但就感觉以后要改动就会很头痛。QAQ那些像素是有什么规范吗,还是说看着布局比较好看就可以了? 求指导QAQ先谢谢了……
<style>
    div.left-mark{
        display: inline-block;
        background-color: rgb(25, 200, 169);
        padding: 10px 2px;
        margin-left: 5px;
        margin-right: 20px;
    }

    span.categoryTitle{
        font-size: 16px;
        font-weight: bold;
    }

    div.productItem{
        width: 180px;
        height: 300px;
        float: left;
        background-color: white;
        border: 1px solid white;
 
        margin:10px 10px 30px 10px;
    }

    div.homepageCategoryProducts{
        background-color: #F5F5F5;
        max-width: 1013px;
        margin: 10px auto;
       
    }

    div.productItem img{
        width: 150px;
        height: 220px;
        margin: 3px auto;
        display: block;
    }

    div.productItem span{
        display: block;
        color: rgb(102, 102, 102);
        padding: 5px;
        font-size: 13px;
    }
    div.productItem a:hover{
        text-decoration: none;
    }

    div.productItem span.productPrice{
        color: rgb(255, 0, 58);
        font-size: 16px;
        margin-top: -5px;
    }

    img.endpng{
        margin: 10px auto;
        display: block;
    }

</style>

							


1 个答案

how2j 答案时间:2019-08-11
就是驼峰命名法,很简单的。 参考下命名规则: http://how2j.cn/k/variable/variable-nameing/260.html



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





2019-08-06 写的好乱..站长能不能帮忙看看有啥需要改进的...
2019-08-02 sapn的padding和图片重合
2019-06-12 图片资源
2019-04-06 好像写漏了代码
2018-10-18 交作业
2018-09-22 吐槽
2018-07-16 我没有使用float,用了index-block效果一样可以吗
2018-04-19 CSS练习模式width渲染问题
2018-03-09 为什么一行文字需要 <a> <span>两个标签,而且display还是不一样的
2017-12-14 关于换行<br>
2017-10-23 关于filter: alpha(opacity = 70);的兼容
2017-08-14 浏览器窗口缩小后产品列表会换行显示
2017-06-16 关于max-width属性的问题
2017-04-30 关于页面整合和css整合的问题
2017-04-18 这里可以少用一个div只知道可行不可行
2017-04-01 代码
2017-03-03 几个小问题~
2016-11-14 <div style="clear: both"></div>
2016-11-11 后台管理




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

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

上传截图