HTML+CSS 仿写淘宝商城分类导航

最新推荐文章于 2024-05-05 02:27:12 发布
最新推荐文章于 2024-05-05 02:27:12 发布
阅读量4.9k 收藏 49
点赞数 8
分类专栏： HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/We_jia/article/details/84328597
版权

效果图

学会淘宝商城的分类导航以后，会发现大多数的电商网站都是这样的效果，在做其他网站时具体分析即可。

首先我们要构思整个大框架的结构：左边是全部商品分类，在这个分类中主要是用了导航列表(ul li)， 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，把这个div分成左边小分类列表,右边图片广告) 

这个分类导航其实比较简单，在我看来要重点理解相对定位，绝对定位，盒子模型，包括margin和padding的含义，以及对a标签的熟练使用。有一个小知识点就是显示与隐藏display：block；display：none；

但在具体做的时候就有很多细节需要注意，比如每个大分类后都有一个箭头，每一类都有一个斜杠，中间显示框有一个橙色的边框，以及中间字体颜色不一致，图片的大小等等,这些做起来还是很简单的，细心一点就好。

我使用的是内嵌样式，下面就是具体的代码实现（我只附了女装男装内衣的二级分类）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>淘！你喜欢！</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .centerblock {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 1000px;
            height: 500px;
            border: 1px solid silver;
        }

        .centerblock_left {
            width: 199px;
            height: 500px;
            border-right: 1px solid orange;
            /*background-color: #36c3ff;*/
            float: left;
        }

        .centerblock_right {
            float: left;
            width: 800px;
            height: 500px;
            /*background-color:red;*/
        }

        .listmenu {
            /*border: 1px solid silver;*/
            /*left: 20px;*/
        }

        .listmenu li {
            list-style: none;
            padding-left: 20px;
            height: 31.2px;
            line-height: 31.2px;
            font-size: 15px;
        }

        .listmenu li span {
            float: right;
            margin-right: 10px;
        }

        .listmenu li>a {
            text-decoration: none;
            color: #3a3a3a;
        }
        .listmenu li:hover {
            background-color: #ffd4cd;
            color: orange;
        }

        .listmenu li:hover > a {
            color: orange;
        }

        .listmenu > li > a:hover {
            text-decoration: underline;
        }

        .listmenu_child {
            position: absolute;
            left: 200px;
            /*margin-left: 180px;*/
            top: 0;
            background-color: white;
            border: 2px solid #ff951d;
            width: 800px;
            height: 500px;
            display: none;

        }
        .listmenu>li:hover .listmenu_child {
            display: block;

        }

        .listmenu_child_left {
            position: relative;
            float: left;
            padding-left: 20px;
            width: 530px;
            height: 500px;
            /*background-color: #36c3ff;*/

        }

        .listmenu_child_right {
            position: relative;
            float: left;
            width: 249px;
            height: 500px;
            border-left: 1px solid silver;
            /*background-color: #ffe706;*/
        }

        .listmenu_child_left_top_title {
            position: relative;
            width: 530px;
            height: 35px;
            /*background-color: #36c3ff;*/
            line-height: 35px;
            margin-top: 5px;
            color: black;
        }

        .span1 {
            position: absolute;
            bottom: 0;
            float: left;
            font-size: 18px;
            left: 0px;
            color: black;
        }

        .span2 {
            position: absolute;
            bottom: 0;
            float: right;
            font-size: 13px;
            right: 8px;
            color: black;
        }

        .listmenu_child_left_a {

            margin-right: 25px;
            /*background-color: #ffe706;*/
            line-height: 25px;

        }

        .listmenu_child_left_a > a {
            text-decoration: none;
            font-size: 14px;
            margin-right: 20px;

        }

        .colororg{
            color:orangered;
        }
        .colorgray{
            color:gray;
        }
        .listmenu_child_right_title {
            position: relative;
            text-align: center;
            font-size: 14px;
            color: black;
            top: 10px;
        }
        .imglist {
            position: relative;
            width: 210px;
            height: auto;
            overflow: hidden;
            margin: 20px auto;
        }
        .imglist_left {
            width: 95px;
            float: left;
            height: auto;
            color: gray;
            line-height: 25px;
            text-align: center;
        }
        .imglist_left >img{
            width: 95px;
        }
        .imglist_right >img{
            width: 95px;
        }
        .imglist_right {
            width: 95px;
            float: right;
            height: auto;
            color: gray;
            line-height: 25px;
            text-align: center;
        }
        .imglist_left :hover {
            color: orangered;
        }
        .imglist_right :hover {
            color: orangered;
        }
    </style>
</head>
<body>
<div class="centerblock">
    <div class="centerblock_left">
        <ul class="listmenu">
            <li><a href="#">女装</a> / <a href="#">男装</a> / <a href="#">内衣</a><span> > </span>

                <div class="listmenu_child">
                    <div class="listmenu_child_left">
                        <div class="listmenu_child_left_top">
                            <div class="listmenu_child_left_top_title">
                                <span class="span1">女装</span>
                                <span class="span2">更多></span>
                            </div>
                            <div class="listmenu_child_left_a">
                                <a class="colororg" href="#">冬上新</a>
                                <a class="colororg" href="#">时髦女装 </a>
                                <a class="colororg" href="#">毛呢外套 </a>
                                <a class="colororg" href="#">毛衣针织 </a>
                                <a class="colororg" href="#">裤子 </a>
                                <a class="colorgray" href="#">羽绒棉服 </a>
                                <a class="colorgray" href="#">连衣裙 </a>
                                <a class="colorgray" href="#">网红好店 </a>
                                <a class="colororg" href="#">棉衣棉服 </a>
                                <a class="colorgray" href="#">羽绒服 </a>
                                <a class="colororg" href="#">爆款好货 </a>
                                <a class="colorgray" href="#">毛针织衫 </a>
                                <a class="colorgray" href="#">卫衣 </a>
                                <a class="colorgray" href="#">半身裙 </a>
                                <a class="colorgray" href="#">短外套 </a>
                                <a class="colororg" href="#">皮衣皮草 </a>
                                <a class="colorgray" href="#">时尚套装 </a>
                                <a class="colorgray" href="#">休闲裤 </a>
                                <a class="colorgray" href="#">风衣 </a>
                                <a class="colororg" href="#">牛仔裤 </a>
                                <a class="colorgray" href="#">长袖连衣裙 </a>
                                <a class="colorgray" href="#">红人推荐 </a>
                                <a class="colorgray" href="#">私服名媛 </a>
                                <a class="colorgray" href="#">OL丽人 </a>
                                <a class="colorgray" href="#">文艺复古 </a>
                                <a class="colorgray" href="#">日韩清新 </a>
                                <a class="colorgray" href="#">外套 </a>
                                <a class="colorgray" href="#">衬衫 </a>
                                <a class="colorgray" href="#">毛衣 </a>
                                <a class="colorgray" href="#">T恤 </a>
                                <a class="colorgray" href="#">阔腿裤 </a>
                                <a class="colorgray" href="#">长风衣 </a>
                                <a class="colororg" href="#">蕾丝衫/雪纺衫 </a>
                                <a class="colorgray" href="#">大码女装 </a>
                                <a class="colororg" href="#">大码外套</a>


                            </div>

                        </div>
                        <div class="listmenu_child_left_top">
                            <div class="listmenu_child_left_top_title">
                                <span class="span1">女装</span>
                                <span class="span2">更多></span>
                            </div>
                            <div class="listmenu_child_left_a">
                                <a class="colororg" href="#">冬上新</a>
                                <a class="colororg" href="#">时髦女装 </a>
                                <a class="colororg" href="#">毛呢外套 </a>
                                <a class="colororg" href="#">毛衣针织 </a>
                                <a class="colororg" href="#">裤子 </a>
                                <a class="colorgray" href="#">羽绒棉服 </a>
                                <a class="colorgray" href="#">连衣裙 </a>
                                <a class="colorgray" href="#">网红好店 </a>
                                <a class="colororg" href="#">棉衣棉服 </a>
                                <a class="colorgray" href="#">羽绒服 </a>
                                <a class="colororg" href="#">爆款好货 </a>
                                <a class="colorgray" href="#">毛针织衫 </a>
                                <a class="colorgray" href="#">卫衣 </a>
                                <a class="colorgray" href="#">半身裙 </a>
                                <a class="colorgray" href="#">短外套 </a>
                                <a class="colororg" href="#">皮衣皮草 </a>
                                <a class="colorgray" href="#">时尚套装 </a>
                                <a class="colorgray" href="#">休闲裤 </a>
                                <a class="colorgray" href="#">风衣 </a>
                                <a class="colororg" href="#">牛仔裤 </a>
                                <a class="colorgray" href="#">长袖连衣裙 </a>
                                <a class="colorgray" href="#">红人推荐 </a>
                                <a class="colorgray" href="#">私服名媛 </a>
                                <a class="colorgray" href="#">OL丽人 </a>
                                <a class="colorgray" href="#">文艺复古 </a>
                                <a class="colorgray" href="#">日韩清新 </a>
                                <a class="colorgray" href="#">外套 </a>
                                <a class="colorgray" href="#">衬衫 </a>
                                <a class="colorgray" href="#">毛衣 </a>
                                <a class="colorgray" href="#">T恤 </a>
                                <a class="colorgray" href="#">阔腿裤 </a>
                                <a class="colorgray" href="#">长风衣 </a>
                                <a class="colororg" href="#">蕾丝衫/雪纺衫 </a>
                                <a class="colorgray" href="#">大码女装 </a>
                                <a class="colororg" href="#">大码外套</a>


                            </div>

                        </div>
                        <div class="listmenu_child_left_top">
                            <div class="listmenu_child_left_top_title">
                                <span class="span1">女装</span>
                                <span class="span2">更多></span>
                            </div>
                            <div class="listmenu_child_left_a">
                                <a class="colororg" href="#">冬上新</a>
                                <a class="colororg" href="#">时髦女装 </a>
                                <a class="colororg" href="#">毛呢外套 </a>
                                <a class="colororg" href="#">毛衣针织 </a>
                                <a class="colororg" href="#">裤子 </a>
                                <a class="colorgray" href="#">羽绒棉服 </a>
                                <a class="colorgray" href="#">连衣裙 </a>
                                <a class="colorgray" href="#">网红好店 </a>
                                <a class="colororg" href="#">棉衣棉服 </a>
                                <a class="colorgray" href="#">羽绒服 </a>
                                <a class="colororg" href="#">爆款好货 </a>
                                <a class="colorgray" href="#">毛针织衫 </a>
                                <a class="colorgray" href="#">卫衣 </a>
                                <a class="colorgray" href="#">半身裙 </a>
                                <a class="colorgray" href="#">短外套 </a>
                                <a class="colororg" href="#">皮衣皮草 </a>
                                <a class="colorgray" href="#">时尚套装 </a>
                                <a class="colorgray" href="#">休闲裤 </a>
                                <a class="colorgray" href="#">风衣 </a>
                                <a class="colororg" href="#">牛仔裤 </a>
                                <a class="colorgray" href="#">长袖连衣裙 </a>
                                <a class="colorgray" href="#">红人推荐 </a>
                                <a class="colorgray" href="#">私服名媛 </a>
                                <a class="colorgray" href="#">OL丽人 </a>
                                <a class="colorgray" href="#">文艺复古 </a>
                                <a class="colorgray" href="#">日韩清新 </a>
                                <a class="colorgray" href="#">外套 </a>
                                <a class="colorgray" href="#">衬衫 </a>
                                <a class="colorgray" href="#">毛衣 </a>
                                <a class="colorgray" href="#">T恤 </a>
                                <a class="colorgray" href="#">阔腿裤 </a>
                                <a class="colorgray" href="#">长风衣 </a>
                                <a class="colororg" href="#">蕾丝衫/雪纺衫 </a>
                                <a class="colorgray" href="#">大码女装 </a>
                                <a class="colororg" href="#">大码外套</a>


                            </div>

                        </div>
                    </div>
                    <div class="listmenu_child_right">
                        <div class="listmenu_child_right_title">猜你喜欢</div>
                        <div class="imglist">
                            <div class="imglist_left"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                            <div class="imglist_right"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                        </div>
                        <div class="imglist">
                            <div class="imglist_left"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                            <div class="imglist_right"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                        </div>
                        <div class="imglist">
                            <div class="imglist_left"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                            <div class="imglist_right"> <img src="./img/O1CN01fWAR3b1YIzKK3gZro_!!0-item_pic.jpg" > <span> 2018新款</span></div>
                        </div>
                    </div>
                </div>


            </li>
            <li><a href="#">鞋靴</a> / <a href="#">箱包 </a>/ <a href="#">配饰配件</a><span> > </span></li>
            <li><a href="#">童装玩具</a> / <a href="#">孕产 </a>/ <a href="#">用品</a><span> > </span></li>
            <li><a href="#">家电</a> / <a href="#">数码</a> / <a href="#">手机</a><span> > </span></li>
            <li><a href="#">美妆</a> / <a href="#">洗护</a> / <a href="#">保健品</a><span> > </span></li>
            <li><a href="#">饰品</a> / <a href="#">珠宝</a> / <a href="#">手表眼镜</a><span> > </span></li>
            <li><a href="#">运动</a> / <a href="#">户外</a> / <a href="#">乐器</a><span> > </span></li>
            <li><a href="#">游戏</a> / <a href="#">动漫</a> / <a href="#">影视</a><span> > </span></li>
            <li><a href="#">美食</a> / <a href="#">生鲜</a> / <a href="#">零食</a><span> > </span></li>
            <li><a href="#">鲜花</a> / <a href="#">宠物</a> / <a href="#">农资</a><span> > </span></li>
            <li><a href="#">工具</a> / <a href="#">装修</a> / <a href="#">建材</a><span> > </span></li>
            <li><a href="#">家具</a> / <a href="#">家饰</a> / <a href="#">家纺</a><span> > </span></li>
            <li><a href="#">汽车</a> / <a href="#">二手车</a> / <a href="#">用品</a><span> > </span></li>
            <li><a href="#">办公</a> / <a href="#">DIY</a>/ <a href="#">五金电子</a><span> > </span></li>
            <li><a href="#">百货</a> / <a href="#">餐厨</a> / <a href="#">家庭保健</a><span> > </span></li>
            <li><a href="#">学习</a> / <a href="#">卡券</a> / <a href="#">本地服务</a><span> > </span></li>

        </ul>
    </div>
    <div class="centerblock_right">

    </div>
</div>
</body>
</html>

 

We_jia
关注
  • 8
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
仿写淘宝首页
weixin_43756316的博客
07-12 628
github地址：https://github.com/Paradoxical-whimsy/tb 自己写的第一个练手项目，根据淘宝首页的视觉效果去仿写出来，大概花了一个月的时间。下面展示一些细节。 1号框的位置是搜索栏。左边的放大镜是图片，使用backgroundposition调整位置。照相机图片覆盖了获取文件的input，设置点击图片事件去点击input。 ...
仿写淘宝页面css+html+js
m0_47170819的博客
07-15 1255
不是初学者想象的这么容易，要动手做的 要有整体布局的思想，最基本打个草稿吧 仿写的过程中有很多问题，这时候要自己一步一步的解决，之后遇到相同的问题，迎刃而解。 字体图标用的阿里图标，后面还要学会设置颜色，字体图标的大小设置（是字体，而不是简单的宽高） css基础知识写，之后会发现淘宝的搜索框和别的不一样-这是个有趣的点 目前就这些 后续更新 ...
淘宝网页简单的仿写，html+css
07-24
里面有几个页面的练习，都是使用的，动态的，还有购物网站html+css
HTML5+CSS3移动商城-分类
04-29
HTML5+CSS3移动商城-分类
day04 - 商品管理（商品分类+分类参数）
最新发布
2401_84152991的博客
05-05 362
使用vue-table-with-tree-grid定义模板列并添加自定义列//先在columns中添加一个列columns: [{label:‘分类名称’,prop:‘cat_name’},//type:‘template’(将该列设置为模板列)，template:‘isok’(设置该列模板的名称为isok){label:‘是否有效’,prop:‘’,type:‘template’,template:‘isok’},
分类导航菜单的制作（附源码）--HTML
weixin_30826761的博客
10-14 1347
不多说，直接贴代码哈！有疑问，可追加评论哈！ demo.html: <!DOCTYPE html><html> <head> 　　<title>分类导航菜单</title> 　　<meta charset="utf-8"> 　　<meta name="keywords" content="keyw...
淘宝首屏仿写
06-07
仿写静态的淘宝首屏页面，主要使用css加html模仿淘宝的布局，运用原生javascript封装运动框架，制作轮播图。
京东分类导航html
03-25
类似淘宝，京东左侧菜单分类 悬浮导航，二级导航也可以支持最右侧图片推荐。静态html,juqery实现。功能移植快。
html+css 仿写网站首页.zip
12-14
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
html+css仿写电商网站商品购买页面
04-28
html+css实现经典的电商网站购买商品页面的UI, 加入购物车, 响应式布局.
html+css仿写简单网站
12-15
刚入门HTML+CSS，学习了一段时间后，为了练手，便写了这样一个静态的淘宝页面。就在刚才，终于完工。不得不说，内心有点小激动… 代码有点多，贴出来不太方便。如果大家有需要的话，直接去演示页面查看源代码扒取吧...
作业5：制作淘宝女装分类页面.7z
06-04
课后练习5的答案，制作女装分类页面，全部的功能都实现了，大家可以拿去借鉴一下
Html+Css简单仿京东商品分类导航
10-12
用HTML语言写的一个仿京东商城的界面，商品分类导航。
3.仿淘宝网多级分类列表菜单代码.html
12-07
仿淘宝网多级分类列表菜单代码,可支持三级以上
淘宝首屏静态页面（HTML+CSS）布局练习.zip
05-07
适合刚接触前端基础知识的同学，初步了解了HTML+CSS后，可以尝试练习类似项目；该项目主要为HTML+CSS实现，不涉及交互、逻辑功能，旨在提高样式布局能力
html+css淘宝网站仿写.zip
05-08
个人仿写的淘宝网站首页，资源包含完整html+css代码和图片字体等资源，适合新手查看和仿写练习，涉及如何引用icon图标，relative和absolute定位以及精灵图等知识点，由于是自己仿写的，可能不够完美，所以有问题请...
ecshop网站导航,html导航分类,分类导航,html分类式导航栏,html分类导航页面插件【有利于网站排名seo优化】
程序发烧猿's Blog
03-04 411
ecshop只有生成xml格式的网站地图，本插件实现ECSHOP网站地图归类生成一个html格式的网站导航地图插件。生成后在首页添加上sitemap.html，这样搜索引擎才可以顺利抓取你的url达到seo效果。
仿写淘宝首页(静态)
zhiqiang_xiong的博客
06-09 6391
这是疫情在家时候无聊仿写淘宝PC端的首屏，过去的时间比较久，可能页面改了很多图片，但HTML大体排版都一样，做为巩固各种布局还是挺不错的。因为是静态的，所以没有js代码，大家看看就好。 贴个样式图 首先是html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt
CSS/HTML制作京东商城顶部导航条
Etui۹(･༥･´)و的博客
01-24 4312
京东商城原网站： 效果图： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城导航条</title> <link rel="stylesh
用html+css+js仿写慧聪网导航栏
06-11
好的，下面是实现慧聪网导航栏的基本步骤： 1. 创建HTML文档并设置基本结构，包括头部和导航栏。 ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>慧聪网导航栏</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <nav> <ul id="nav-list"> <li><a href="#">首页</a></li> <li><a href="#">行业资讯</a></li> <li><a href="#">采购商城</a></li> <li><a href="#">商机推荐</a></li> <li><a href="#">展会信息</a></li> <li><a href="#">慧聪社区</a></li> </ul> </nav> </header> </body> </html> ``` 2. 使用CSS样式表来设置导航栏样式，包括字体、颜色、背景、边框、间距、宽度等。 ``` nav { background-color: #fff; border-bottom: 1px solid #ccc; height: 40px; line-height: 40px; margin: 0 auto; padding: 0; position: relative; width: 100%; } #nav-list { display: flex; justify-content: space-between; list-style: none; margin: 0; padding: 0; } #nav-list li { margin-left: 20px; } #nav-list li:first-child { margin-left: 0; } #nav-list li a { color: #333; display: block; font-size: 14px; padding: 0 10px; text-decoration: none; } #nav-list li a:hover { background-color: #f5f5f5; color: #ff6600; } ``` 3. 使用JavaScript脚本来实现导航栏鼠标悬停效果和点击效果。 ``` let navList = document.getElementById('nav-list'); let navItems = navList.getElementsByTagName('li'); for (let i = 0; i < navItems.length; i++) { navItems[i].addEventListener('mouseover', function() { this.style.backgroundColor = '#f5f5f5'; this.getElementsByTagName('a')[0].style.color = '#ff6600'; }); navItems[i].addEventListener('mouseout', function() { this.style.backgroundColor = ''; this.getElementsByTagName('a')[0].style.color = ''; }); } ``` 以上就是用HTML、CSS和JavaScript实现慧聪网导航栏的基本步骤。您可以根据需要进行调整和优化，实现更加丰富和复杂的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值