how2j.cn


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

步骤 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.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categorySortBar{ background-color: #FAF9F9; margin: 40px 20px 20px 20px; padding: 4px; } table.categorySortBarTable{ border-collapse: collapse; display:inline-block; } table.categorySortBarTable span.glyphicon{ font-size: 10px; } table.categorySortBarTable td{ height:17px; font-size:12px; border:1px solid #CCCCCC; padding:3px; } table.categorySortBarTable td.grayColumn{ background-color: #F1EDEC; } table.categorySortBarTable td a{ color: #806F66; } table.categorySortBarTable td a:hover{ color: #C40000; } table.categorySortBarTable input{ border-width: 0px; height: 15px; width: 50px; } table.categorySortBarTable td.priceMiddleColumn{ width: 5px; vertical-align: middle; color: #CCCCCC; } table.categorySortTable td:hover{ background-color: #F1EDEC; } body{ font-size: 12px ; font-family: Arial; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="http://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="http://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </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.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categorySortBar{ background-color: #FAF9F9; margin: 40px 20px 20px 20px; padding: 4px; } table.categorySortBarTable{ border-collapse: collapse; display:inline-block; } table.categorySortBarTable span.glyphicon{ font-size: 10px; } table.categorySortBarTable td{ height:17px; font-size:12px; border:1px solid #CCCCCC; padding:3px; } table.categorySortBarTable td.grayColumn{ background-color: #F1EDEC; } table.categorySortBarTable td a{ color: #806F66; } table.categorySortBarTable td a:hover{ color: #C40000; } table.categorySortBarTable input{ border-width: 0px; height: 15px; width: 50px; } table.categorySortBarTable td.priceMiddleColumn{ width: 5px; vertical-align: middle; color: #CCCCCC; } table.categorySortTable td:hover{ background-color: #F1EDEC; } body{ font-size: 12px ; font-family: Arial; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="http://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </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.categoryPageDiv{ max-width: 1013px; margin: 10px auto; } div.categorySortBar{ background-color: #FAF9F9; margin: 40px 20px 20px 20px; padding: 4px; } table.categorySortBarTable{ border-collapse: collapse; display:inline-block; } table.categorySortBarTable span.glyphicon{ font-size: 10px; } table.categorySortBarTable td{ height:17px; font-size:12px; border:1px solid #CCCCCC; padding:3px; } table.categorySortBarTable td.grayColumn{ background-color: #F1EDEC; } table.categorySortBarTable td a{ color: #806F66; } table.categorySortBarTable td a:hover{ color: #C40000; } table.categorySortBarTable input{ border-width: 0px; height: 15px; width: 50px; } table.categorySortBarTable td.priceMiddleColumn{ width: 5px; vertical-align: middle; color: #CCCCCC; } table.categorySortTable td:hover{ background-color: #F1EDEC; } body{ font-size: 12px ; font-family: Arial; } </style> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <div class="categoryPageDiv"> <img src="http://how2j.cn/tmall/img/category/72.jpg"> <div class="categorySortBar"> <table class="categorySortBarTable categorySortTable"> <tbody><tr> <td class="grayColumn"><a href="#nowhere">综合<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">人气<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">新品<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">销量<span class="glyphicon glyphicon-arrow-down"></span></a></td> <td><a href="#nowhere">价格<span class="glyphicon glyphicon-resize-vertical"></span></a></td> </tr> </tbody></table> <table class="categorySortBarTable"> <tbody><tr> <td><input type="text" placeholder="请输入" class="sortBarPrice beginPrice"></td> <td class="grayColumn priceMiddleColumn">-</td> <td><input type="text" placeholder="请输入" class="sortBarPrice endPrice"></td> </tr> </tbody></table> </div> </div>


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


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


问答区域    
2019-08-11 关于父元素高度自适应的问题
会飞的猪_



站长你好,我看天猫上的代码 它的div和ul li的嵌套,div是没有设置高度的,但是却可以被子元素撑起来... 我试了很久发现怎么也撑不起来 这是为什么呢?
            html 代码:
<div class="brand-bar">
                <div class="attr-key">品牌</div>
                <div class="attr-logo">
                    <div class="placeholder"></div>
                    <ul>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1RskcNVXXXXaFaXXXSutbFXXX.jpg" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1UnWCnvDH8KJjy1XcXXcpdXXa" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1iYwSOXXXXXX6aXXXwu0bFXXX.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1XAZ.SXXXXXaNXpXXXXXXXXXX" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1l1ofsRjTBKNjSZFDXXbVgVXa" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="#nowhere">
                                <img src="//img.alicdn.com/bao/uploaded/TB1cO4qSXXXXXcrXXXXXXXXXXXX" alt="">
                            </a>
                        </li>
                    </ul>
                </div>

css 代码:
        div.brand-bar {
            position: relative;
            border: 2px solid #D1CCC7;
        }

        div.brand-bar div.attr-key {
            position: absolute;
            top: 5px;
            left: 5px;
        }
        
        div.brand-bar div.attr-logo ul{
            list-style: none;
            max-height: 53px;
        }

        div.brand-bar div.attr-logo ul li{
            padding: 0 10px;
            text-align: center;
        }

        div.brand-bar div.attr-logo ul li a {
            height: 50px;
            width: 102px;
            line-height: 52px;
            border: 1px solid transparent;
        }

        div.brand-bar div.attr-logo ul {
            list-style: none;
        }

        div.brand-bar div.attr-logo li {
            float: left;
            list-style: none;
        }


        div.brand-bar div.attr-logo img {
            width: 80px;
            height: 40px;
            margin: 6px 12px;
        }

							


1 个答案

how2j 答案时间:2019-08-13
会不会是它的 ul li 是有样式的,你没有注意到呢?



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





2018-10-23 请问站长在设计过程当中,CSS中的margin padding font-size 的值是怎么确定的?
Cottonlion
请问站长在设计过程当中,CSS中的margin padding font-size 的值是怎么确定的?是根据天猫的网站,慢慢对比调试出来的吗?




4 个答案

Cottonlion 答案时间:2018-11-01
谢谢站长 :)

how2j 答案时间:2018-10-30
我用的一个截图工具,叫fscapter里面可以测量,也不是完全精确,还是有几个像素的误差吧,就看手抖不抖了~

Cottonlion 答案时间:2018-10-30
请问站长是什么工具啊?我现在自学了2个月,所以还有很多的知识很欠缺

how2j 答案时间:2018-10-25
我是用工具对每个元素量出其像素值来一点点调试出来的。。。



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




2018-10-23 请问站长在设计过程当中,CSS中的margin padding 的值是怎么确定的?
2018-09-17 表格栏里的箭头是怎么添加的
2018-08-20 你这直接放张图也太偷懒了吧……
2018-03-13 我的两个table为啥没有在一排
2017-09-05 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">出现了两次?
2017-08-09 为什么class要用两个名字
2017-06-16 纯吐槽——>天猫设计师
2017-06-14 html代码是用什么软件写的?
2017-06-14 table中两个class名称的用意是什么?
2017-05-16 为了不换行可不可以用span
2017-05-04 单元格之间没有空隙
2017-04-05 综合旁边的剪头从哪写出来的?
2016-12-20 为什么要用表格布局




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

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

上传截图