Html+Css新手简单快速仿京东商品分类导航_html/css_WEB-ITnose
程序员文章站
2022-04-26 08:02:04
...
看一看最终的效果:
下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。
我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告)
因为我是用 纯css+html写的， 所以它的文件有:京东导航.html,main.css,cssreset.css(css文件放在css这个目录下面).
接着我们看具体的代码实现(这里我只写了家用电器的二级分类)：
京东导航.html
京东导航
main.css
/* CSS Document */nav{ position:absolute; left:100px; top:100px; border:1px solid #b61d1d; }/*全部商品分类*/.all{ width:190px; height:44px; line-height:44px; background:#b1191a; padding:0 10px; } .all a{ color:white; font-size:16px; }/*导航菜单*/.nav_item{ width:190px; height:31px; line-height:31px; color:white; background:#b61d1d; padding:0 10px; }ul li a{color:white;}.jt{ color:white; float:right; width:12px; padding-top:10px; font: 13px consolas; } /*hover*/ul li:hover { background:white; }ul li:hover a{ color:#b61d1d; } /*submenu*/.sub_menu{ display:none; width:790px; position:absolute; left:210px; top:44px; background:#f7f7f7; }ul li:hover .sub_menu{display:block;}.leftmenu{ width: 550px; overflow:hidden; float:left; }.leftmenu dl{ overflow:hidden; display:block; margin: 20px 0; }.leftmenu dl dt{ float:left; font-weight:bold; color:#737373; padding:0 8px; }.leftmenu dl dd a{ color: #737373; float:left; height:20px; line-height:20px; padding:0 10px; border-left: 1px solid #e0e0e0; font-size:12px; margin-top:5px; }.rightmenu{ float:right; }.rightmenu dl { margin-top:20px; }.rightmenu dl dd { padding:0; margin-bottom:2px; } cssreset.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; border: none; font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体"; font-size: 14px; } ol,ul{ list-style: none; }fieldset,img{ border:0; }h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; } a{ text-decoration: none; color: #737373; }img, iframe { border: none; text-decoration:none; } 看到代码后，其实里面包含了很多细节的处理,例如:列表有一个红色的边框,每个大分类后都有一个箭头等等,不过做起来还是比较简单的。
本文作者By: 罗坚元 ：