仿京东网导航列表

最新推荐文章于 2021-09-01 15:27:56 发布
最新推荐文章于 2021-09-01 15:27:56 发布
阅读量1.7k 收藏
点赞数
分类专栏： 课堂笔记 文章标签： class div border list url 手机
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tlljhj/article/details/6905200
版权
 

导航列表：

.my_left_category{

width:210px;

font-size:12px;

font-family:arial,sans-serif;

letter-spacing:2px;

}

.my_left_category h1{

background-image:url(http://www.webjx.com/files/100709/1_185326.gif);

height:20px;

background-repeat:no-repeat;

font-size:14px;

font-weight:bold;

padding-left:15px;

padding-top:8px;

margin:0px;

color:#FFF;

}

.my_left_category .my_left_cat_list{

width:210px;

border-color:#b60134;

border-style:solid;

border-width:0px 1px 1px 1px;

line-height:13.5pt;

}

.my_left_category .my_left_cat_list h2 {

margin:0px;

padding:3px 5px 0px 9px;

}

.my_left_category .my_left_cat_list h2 a {

color:#d6290b;

font-weight:bold;

font-size:14px;

line-height:22px;

}

.my_left_category .my_left_cat_list h2 a:hover {

color:#d6290b;

font-weight:bold;

font-size:14px;

line-height:22px;

}

.my_left_category .h2_cat{

width:210px;

height:26px;

 

background-repeat:no-repeat;

line-height:26px;

font-weight:normal;

position:relative;

}

.my_left_category .h2_cat_1{

width:210px;

height:26px;

background-repeat:no-repeat;

line-height:26px;

font-weight:normal;

color:#333333;

position:relative;

}

.my_left_category a{

font:12px;

text-decoration:none;

color:#333333;

}

.my_left_category a:hover{

text-decoration:underline;

color:#ff3333;

}

.my_left_category h3{

margin:0px;

padding:0px;

height:26px;

font-size:12px;

font-weight:normal;

display:block;

padding-left:8px;

}

.my_left_category h3 span{color:#999999; width:210px; float:right;}

.my_left_category h3 a{ line-height:26px;}

.my_left_category .h3_cat{

display:none;

width:210px;

position:absolute;

left:123px;

margin-top:-26px;

cursor:auto;

}

.my_left_category .shadow{

position:inherit;

background:url(http://www.webjx.com/files/100709/1_185541.gif) left top;

width:210px;

}

.my_left_category .shadow_border{

position:inherit;

width:210px;

border:1px solid #959595; margin-top:1px;

border-left-width:0px;

background:url(http://www.webjx.com/files/100709/1_185622.gif) no-repeat 0px 21px;

background-color:#ffffff;

margin-bottom:3px

}

.my_left_category .shadow_border ul{margin:0; padding:0; margin-left:15px}

.my_left_category .shadow_border ul li {

list-style:none;

padding-left:10px;

background-image:url(http://www.webjx.com/files/100709/1_185704.gif);

background-repeat:no-repeat;

background-position:0px 8px;

float:left;

width:75px;

height:26px;

overflow:hidden;

letter-spacing:0px;

}

.my_left_category .active_cat{ z-index:99;background-position:0 -25px;cursor:pointer;}

.my_left_category .active_cat h3 { font-weight:bold}

.my_left_category .active_cat h3 span{ display:none;}

.my_left_category .active_cat div{display:block;}

 

<div class="my_left_category">

 

<div class="my_left_cat_list">

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">图书、音乐、影视</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

<li><a href="#">教育</a></li>

<li><a href="#">中国大片</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">家用电器、汽车用品</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

<li><a href="#">汽车用品</a></li>

<li><a href="#">汽车交易</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">手机数码</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

</div>

</div>

</div>

</div>

<!-- again -->

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">电脑、办公</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

<li><a href="#">服务软件</a></li>

<li><a href="#">娱乐软件</a></li>

</ul>

</div>

</div>

</div>

</div>

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">家居、厨具、家装</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

<li><a href="#">清洁用品</a></li>

<li><a href="#">宠物用品</a></li>

<li><a href="#">家装建材</a></li>

 

</ul>

</div>

</div>

</div>

</div>

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">服饰鞋帽</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<li><a href="#">男装</a></li>

<li><a href="#">女装</a></li>

<li><a href="#">童装</a></li>

<li><a href="#">鞋袜</a></li>

</ul>

</div>

</div>

</div>

</div>

 

<!-- again -->

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">礼品箱包、钟表首饰</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<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>

</div>

</div>

</div>

</div>

<div class="h2_cat" οnmοuseοver="this.className='h2_cat active_cat'" οnmοuseοut="this.className='h2_cat'">

<h3><a href="#">运动健康</a></h3>

<div class="h3_cat">

<div class="shadow">

<div class="shadow_border">

<ul>

<li><a href="#">成人用品</a></li>

<li><a href="#">保健器械</a></li>

<li><a href="#">急救卫生</a></li>

<li><a href="#">运动器械</a></li>

</ul>

</div>

</div>

</div>

</div>

tlljhj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
京东导航栏
w18789476022的博客
11-14 424
未解决问题：此处显示省份的div的上边框应部分掩盖。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link re
jQuery仿京东左侧物品导航栏
lgdshr123的博客
09-28 1万+
1、HTML和样式部分 style type="text/css"> html{color:#666;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,i,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;
仿京东菜单导航
07-05
仿京东菜单导航
仿京东菜单导航,分类树样式
07-01
仿京东左边导航菜单，包括js和样式，简单易懂，拿来就能用
仿京东商品左侧分类导航菜单JS特效代码.zip
07-11
实现效果： 仿京东商品左侧分类导航菜单JS特效代码，非常大气的导航菜单，基于jQuery实现， 支持弹出分类和品牌，品牌大家可以改造成图片显示会更加吸引点击量。
仿京东html右侧侧导航菜单,【分享】自己做了个仿京东的导航栏，
weixin_30653101的博客
06-03 658
该楼层疑似违规已被系统折叠隐藏此楼查看此楼ul{width:90%;list-style:none;}li{float:left;width:5%;background-color:rgb(228,59,62);color:white;padding:12px;text-align:center;font-weight:bold;}li:hover{background-color:rgb(16...
购物页面点叉号二维码隐藏的做法
weixin_51415327的博客
09-01 508
隐藏此二维码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <ti.
jquery仿京东导航,仿淘宝商城左侧分类导航菜单,jquery实现下拉菜单效果
盗墓笔记
09-08 1万+
在网站建设中，特别是做商城和产品网站，通常会用到导航弹出菜单，像是jquery写的仿京东导航菜单，一个经典的左侧多级导航菜单，学会了可以任意改变布局。京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁网络重新与大家分享一款仿京东商城的商品多级分类菜单，精简版代码 先看下jquery仿京东导航效果： 前端html代码如下：   baidu        baidu
DIV+CSS仿京东右侧固定悬浮图标导航栏特效-悬浮伸缩
qq_34753923的博客
07-18 1万+
效果图： （直接截的静态图，图标实际上是类似京东首页的伸缩效果的。） HTML部分代码： &lt;div class="toolbars"&gt; &lt;ul&gt; &lt;li class="jdvip"&gt; &lt;i&gt;&lt;/i&gt; &lt;a class="tool
Html+Css新手简单快速仿京东商品分类导航
热门推荐
Jy
06-09 2万+
看一看最终的效果: 下面我们就按照分析→设计→实现 三大步骤来完成这个导航的效果，学会了之后，会发现大多数电商都是用这样的效果的。我们先从把结构写好：一个nav包含上面一个div(全部商品分类),一个导航列表(ul li) 然后在每一个li里面都包含一个默认不显示的的大div(利用了绝对定位，这个div分成左边:小分类列表,右边图片广告) 因为我是用 纯css+html写的， 所以它的文件有
JS弹出窗口全屏
tlljhj的专栏
03-07 7370
〈script language="javascript"〉 　　function winopen(targeturl){ 　　newwin=window.open("","","scrollbars") 　　if (document.all){ 　　     newwin.moveTo(0,0) 　　     newwin.resizeTo(screen.availWidth
datagrideview下拉列表显示数据
tlljhj的专栏
02-28 2386
1.在DataGridView中添加一个隐藏列，用来与数据源字段绑定：隐藏列.DataPropertyName = 数据源.列名;      2. 用一个DataTable建立实际值和显示值的映射：      DataTable dtRelation = new DataTable();     dtRelation.Columns.Add("Code",typeof(byte));
ASP.NET webservice，查询天气预报，手机号码等
tlljhj的专栏
12-21 1341
web服务： 添加方法： [WebMethod]//必须有 public int Add(int a,int b) {     returna+b; } public Data GetStudent() {    string str=System.ConigurationManager.    using(SqlConnection cnn=new SqlConnection
gridview控件使用代码绑定数据
tlljhj的专栏
11-24 1159
string str = System.Configuration.ConfigurationManager.ConnectionStrings["studentConnectionString"].ConnectionString;         using (SqlConnection sqlcnn = new SqlConnection(str))         {
ASP.NET主题和皮肤
tlljhj的专栏
11-05 1050
asp.net的服务器端控件提供了多种样式的设计，如果对每个控件都单独设置，是比较繁琐的事情，所以微软也提供了针对这些服务器端控件的样式管理，其实也可以通过css来控制部分服务器端控件的样式，比如textbox，如果用普css就是对input进行样式控制，但对于gridview或者日历控件等，css文件无法灵活的控制，这就需要微软专门为服务器端控件提供的主题和皮肤。  主题和皮肤的使用方法：
jQuery基础入门：选择器、DOM操作实战指南
提供了一个实际场景，即京东网产品列表的精简与详细显示功能的实现，展示了如何结合选择器和DOM操作来控制元素的显示和隐藏，配合CSS样式实现交互效果。 通过这些章节的学习，读者可以掌握jQuery的核心基础，为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值