DIV+CSS仿京东商城导航条代码

合集下载

京东商城弹出式导航代码

.user_menu ul li:hover ul .fl1 {width:950px;height:auto;overflow:hidden;margin-left:20px;margin-bottom:10px;}
.user_menu ul li:hover ul .fl1:hover {background-color#C30D23;}
</div>
</div>
<div class="fl1">
<a class="title2" href="/view_search-144316-844159-1-0-20-1.htmlh-144316-809020-1-0-20-1.html" target="_blank">花茶</a>
.user_menu ul li:hover ul .fl1 .title2 {display:block;width:100px;height:31px;overflow:hidden;background-color:#C30D23;float:left;text-align:center;text-decoration:none;line-height:30px;color:white;font-size:14px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);opacity:1.0;}
</div>
</div>
<div class="fl1">
<a class="title2" href="/view_search-144316-887146-1-0-20-1.html" target="_blank">黑茶</a>

divcss导航菜单代码介绍

dding-left:2px;} .nav li.bgno1{ background:url(images/menu_over.jpg) no-repeat 2px 0px; color:#FFFFFF;padding-left:2px;} .nav li.bgno{ background:url(images/menu_bj_4.gif) no-repeat 0 0px; color:#FFFFFF;padding-left:2px;} .nav li.bgcolor a{ color:#ecde29;} .nav li.bgcolor a:hover{ color:#ecde29;} .nav li,.nav li a{float:left;font-size:14px; color:#FFFFFF;} .nav li a{font-weight:bold; color:#fff;width:100px; text-align:center;paddingleft:1px; text-decoration:none;} .nav li a:hover{ text-decoration:none;background:url(images/menu_over.jpg) norepeat; color:#fff;} .nav li.bgno a{ color:#fff;} ; ; ; ; ; ;;源码爱好者;; ;;解决方案;; ;;软件服务;; ;;软件产品;; ;;职位招聘;; ;;免费模板;;
divcss 导航菜单代码介绍
我们为大家收集整理了关于 divcss 导航菜单代码，以方便大家参考。复制代码代码如下: ; ; ;软件公司网站蓝色导航菜单; ; * { PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px } BODY { BACKGROUND-COLOR: #ffffff; MARGIN: 0px auto; COLOR: #000000; FONT-SIZE: 9pt } .nav{ width:938px; margin:0 auto; background:url(images/menu_bj_2.gif) norepeat 0 0; height:46px; line-height:54px; vertical-align:bottom; margintop:100px; } .nav ul,.nav li{ float:left;} .nav li{ width:102px; display:block; background:url(images/menu_bj_1.gif) no-

【前端学习分享】HTML+CSS京东商城静态页面

【前端学习分享】HTML+CSS京东商城静态页⾯注意事项⼀、CSS的定位问题positionstatic 没有定位，遵循正常的⽂档流对象。

以下使⽤较多fixed 相对于浏览器窗⼝是固定的，窗⼝的他不会移动（⽐如说百度弹出来的登录窗⼝，不会移动）relative相对定位元素的定位是相对其正常位置，相对定位元素经常被⽤来作为绝对定位元素的容器块。

absolute绝对定位的元素的位置相对于最近的已定位⽗元素，如果元素没有已定位的⽗元素，那么它的位置相对于<html>⼆、CSS标签起名问题不要⽤拼⾳.可以右键检查⽹址看看别⼈的⽹站是怎么起名字的。

头：header 内容：content/container尾：footer导航：nav 侧栏：sidebar栏⽬：column页⾯外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo⼴告：banner页⾯主体：main三、iconfont字体图标⼩，不会失真，不会占⽤http请求··· 可以选择然后直接下载预览图index.html<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" href="jd.ico"><title>京东()-正品低价、品质保障、配送及时、轻松购物</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></head><body><div class="shortcut"><div class="w"><div class="fl"><a href="#" class="loc-icon">河北</a></div><div class="fr"><ul><li>你好，请登录 <a href="#" style="color: #e2231a;">免费注册</a></li><li></li><li><a>我的订单</a></li><li></li><li class="arrow-icon"><a>我的京东</a></li><li></li><li><a>京东会员</a></li><li></li><li class="arrow-icon"><a>企业采购</a></li><li></li><li class="arrow-icon"><a>客户服务</a></li><li></li><li class="arrow-icon"><a>⽹站导航</a></li><li></li><li><a>⼿机京东</a></li></ul></div></div></div><div style="background-color: #fff;"></div><div class="search"><input type="search" name="" id="" style="background: transparent;" placeholder="螺蛳粉"> <span><span class="vic-btn"> </span></span><button class="btn"><i class="btn-icon"> </i></button></div><div class="hotword"><a href="#" style="color: #e2231a;">⼿机⼥神节</a><a href="#">⼥神节</a><a href="#">不知⽕</a><a href="#">养殖消毒</a><a href="#">⼿机爆款</a><a href="#">家清纸品</a><a href="#">居家⼥神</a><a href="#">兰蔻预售</a><a href="#">每100-50</a></div><div class="shopcar"><p>我的购物车</p></div><div class="nav1"><a href="#" style="color: #e2231a;">秒杀</a><a href="#" style="color: #e2231a;">优惠券</a><a href="#">PLUS会员</a><a href="#">品牌闪购</a><a href="#">拍卖</a><a href="#">京东家电</a><a href="#">京东超市</a><a href="#">京东⽣鲜</a><a href="#">京东国际</a><a href="#">京东⾦融</a></div><div class="avtm"></div></div></div><div class="nav w"><div class="sidebar"><ul><li><a>家⽤电器</a></li><li><a>⼿机 / 运营商 / 数码</a></li><li><a>电脑 / 办公</a></li><li><a>家居 / 家具 / 家装 / 厨具</a></li><li><a>男装 / ⼥装 / 童装 / 内⾐</a></li><li><a>美妆 / 个护清洁 / 宠物</a></li><li><a>⼥鞋 / 箱包 / 钟表 / 珠宝</a></li><li><a>男鞋 / 运动 / 户外</a></li><li><a>房产 / 汽车 / 汽车⽤品</a></li><li><a>母婴 / 玩具乐器</a></li><li><a>⾷品 / 酒类 / ⽣鲜 / 特产</a></li><li><a>艺术 / 礼品鲜花 / 农资绿植</a></li><li><a>医药保健 / 计⽣情趣</a></li><li><a>图书 / ⽂娱 / 教育 / 电⼦书</a></li><li><a>机票 / 酒店 / 旅游 / ⽣活</a></li><li><a>理财 / 众筹 / ⽩条 / 保险</a></li><li><a>安装 / 维修 / 清洗 / ⼆⼿</a></li><li><a>⼯业品</a></li></ul></div><div class="banner"><div class="l-banner"><img src="upload/banner1.jpg" alt=""></div><div class="s-banner"><div><img src="upload/banner2.jpg" alt=""></div><div class="ss-banner"><img src="upload/banner3.jpg" alt=""></div><div><img src="upload/banner4.jpg" alt=""></div></div></div><div class="column"></div><div class="log-text"><a href="#">Hi~欢迎逛京东！<br> 登录/注册</a></div></div><div class="log-btn"><button class="log-btn1">新⼈福利</button><button class="log-btn2">PLUS会员</button></div></div></div><div class="news"><div class="news-tit"><h5>京东快报</h5><a href="#">更多</a></div><div><ul><li><span class="newsword">热议</span><a href="#"> 20款防护⼝罩⼤横评！预防病毒流感外出神兵利器推荐</a></li> <li><span class="newsword">推荐</span><a href="#">iPhone 12正式确认！⽀持5G，七千档起步！</a></li><li><span class="newsword">最新</span><a href="#">医⽤外科⼝罩不等于⼀次性医⽤⼝罩</a></li><li><span class="newsword">热评</span><a href="#">正确戴⼝罩的⽅式，你还在浪费⼝罩吗</a></li></ul></div></div><div class="menu"><ul><li><img src="imges/phone.png" alt=""><span>话费</span></li><li><img src="imges/plane.png" alt=""><span>机票</span></li><li><img src="imges/hotel.png" alt=""><span>酒店</span></li><li><img src="imges/game.png" alt=""><span>游戏</span></li><li><img src="imges/gas.png" alt=""><span>加油卡</span></li><li><img src="imges/train.png" alt=""><span>⽕车票</span></li><li><img src="imges/raise.png" alt=""><span>众筹</span></li><li><img src="imges/money.png" alt=""><span>理财</span></li><li><img src="imges/jdbt.png" alt=""><span>⽩条</span></li><li><img src="imges/movie.png" alt=""><span>电影票</span></li><li><img src="imges/company.png" alt=""><span>企业购</span></li><li><img src="imges/gift.png" alt=""><span>礼品卡</span></li></ul></div></div></div><div class="seckill w"><div class="time"><div class="time-tit">京东秒杀</div><div class="time-art"><strong>22:00</strong>场 倒计时</div><div class="timer"><span>00</span>:<span>00</span>:<span>00</span></div></div><div class="adkill"><img src="upload/ad1.jpg" alt=""><div class="ad-text"><a>京东-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a></div><div class="ad-price"><span class="pr1"><i>¥</i>29.90</span><span class="pr2"></span><span class="pr3">99.00</span></div></div><div class="adkill"><img src="upload/ad2.jpg" alt=""><div class="ad-text"><a>京东-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a></div><div class="ad-price"><span class="pr1"><i>¥</i>29.90</span><span class="pr2"></span><span class="pr3">99.00</span></div></div><div class="adkill"><img src="upload/ad3.jpg" alt=""><div class="ad-text"><a>京东-专业综合⽹上购物商城，销售超数万品牌，4020万种商品</a></div><div class="ad-price"><span class="pr1"><i>¥</i>29.90</span><span class="pr2"></span><span class="pr3">99.00</span></div></div><div class="adkill"><img src="upload/ad4.jpg" alt=""><span class="pr3">99.00</span></div></div><div class="l-adkill"><img src="upload/ad5.jpg" alt=""><div class="l-text"><p><strong>雷达钟表专场</strong></p><p>爆款每满1000减100</p><div class="l-a-btn">限时秒杀</div></div></div></div><div class="end w"><div class="end-fun"><ul><li><img src="imges/duo.png" alt="">品类齐全，轻松购物</li> <li><img src="imges/kuai.png" alt="">多仓直发，极速配送</li> <li><img src="imges/hao.png" alt="">正品⾏货，精致服务</li> <li><img src="imges/sheng.png" alt="">天天低价，畅选⽆忧</li> </ul></div><div class="end-menu"><div class="e-m-1"><h5>购物指南</h5><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 class="e-m-2"><h5>配送⽅式</h5><ul><li><a href="#">上门⾃提</a></li><li><a href="#">211限时达</a></li><li><a href="#">配送服务查询</a></li><li><a href="#">配送费收取标准</a></li><li><a href="#">海外配送</a></li></ul></div><div class="e-m-3"><h5>⽀付⽅式</h5><ul><li><a href="#">货到付款</a></li><li><a href="#">在线⽀付</a></li><li><a href="#">分期付款</a></li><li><a href="#">公司转账</a></li></ul></div><div class="e-m-4"><h5>售后服务</h5><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 class="e-m-5"><h5>特⾊服务</h5><ul><li><a href="#">夺宝岛</a></li><li><a href="#">DIY装机</a></li><li><a href="#">延保服务</a></li><li><a href="#">京东E卡</a></li><li><a href="#">京东通信</a></li><li><a href="#">鲸鱼座智能</a></li></ul></div><div class="e-m-6"><h5>京东⾃营覆盖区县</h5><ul><li>京东已向全国2661个区县提供⾃</li></div><div class="end-end"><div class="end-con"><ul><li><a href="#">关于我们</a></li><li></li><li><a href="#">联系我们</a></li><li></li><li><a href="#">联系客服</a></li><li></li><li><a href="#">合作招商</a></li><li></li><li><a href="#">商家帮助</a></li><li></li><li><a href="#">营销中⼼</a></li><li></li><li><a href="#">⼿机京东</a></li><li></li><li><a href="#">友情链接</a></li><li></li><li><a href="#">销售联盟</a></li><li></li><li><a href="#">京东社区</a></li><li></li><li><a href="#">风险监测</a></li><li></li><li><a href="#">隐私政策</a></li><li></li><li><a href="#">京东公益</a></li><li></li><li><a href="#">English Site</a></li><li></li><li><a href="#">Media  &  IR</a></li></ul></div><div class="end-plo"><ul><li><a href="#">京公⽹安备 11000002000088号</a></li><li></li><li>京ICP证070359号</li><li></li><li><a href="#">互联⽹药品信息服务资格证编号(京)-经营性-2014-0008</a></li> <li></li><li>新出发京零字第⼤120007号</li></ul></div><div class="end-int"><ul><li><a href="#">互联⽹出版许可证编号新出⽹证(京)字150号</a></li><li></li><li><a href="#">出版物经营许可证</a></li><li></li><li><a href="#">⽹络⽂化经营许可证京⽹⽂[2014]2148-348号</a></li><li></li><li><a href="#">违法和不良信息举报电话：4006561155</a></li></ul></div><div class="end-com"><ul><li><a href="#">Copyright © 2004 - 2020   京东版权所有</a></li> <li></li><li><a href="#">消费者维权热线：4006067733    经营证照</a></li> <li></li><li><a href="#">(京)⽹械平台备字(2018)第00003号</a></li><li></li><li><a href="#">营业执照</a></li></ul></div><div class="end-glb"><ul><li><a href="#"> <img src="imges/glb1.png" alt=""> Global Site</a></li><li></li><li><a href="#"><img src="imges/glb2.png" alt="">Сайт России</a></li><li></li><li><a href="#"><img src="imges/glb3.png" alt="">Situs Indonesia</a></li><li></li><li><a href="#"><img src="imges/glb4.png" alt="">Sitio de España</a></li><li></li><li><a href="#">京东旗下⽹站：京东钱包</a></li><li></li><li><a href="#">京东云</a></li></ul></div><div class="end-img"><ul><li><img src="imges/img1.png" alt=""></li><li><img src="imges/img2.png" alt=""></li><li><img src="imges/img3.png" alt=""></li><li><img src="imges/img4.png" alt=""></li><li><img src="imges/img5.png" alt=""></li></ul></div></div></div></body></html>common.css/* 声明字体图标 */@font-face {font-family: 'icomoon';src: url('../fonts/icomoon.eot?tomleg');src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('../fonts/icomoon.ttf?tomleg') format('truetype'),url('../fonts/icomoon.woff?tomleg') format('woff'),url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}/* 版⼼*0 auto 是使其居中*/.w {width: 1200px;margin: 0 auto;}/* 快捷导航栏 */.shortcut {height: 30px;background-color: #e3e4e5;line-height: 30px;}.fl {float: left;}.fr {float: right;}.shortcut ul li {float: left;}.shortcut .fr ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 9px 15px 0;}.loc-icon::before {content: '\e922';color: red;font-family: 'icomoon';margin-right: 4px;}.arrow-icon::after {content: '\e91e';.header {position: relative;height: 140px;background-color: #fff;}.logo {position: absolute;top: 5px;width: 190px;height: 120px;}.logo a {display: block;width: 190px;height: 120px;background: url(../imges/logo.png) no-repeat; font-size: 0;}.search {position: absolute;left: 260px;top: 25px;width: 550px;height: 36px;border: 2px solid #e2231a;}.search input {left: 0;padding: 1px 0px 2px 17px;width: 444px;height: 32px;border: 1px solid transparent;line-height: 26px;font-size: 12px;}.search .vic-btn {font-size: 0;}.search .vic-btn::after {position: absolute;right: 75px;top: 10px;content: '\e925';font-family: 'icomoon';width: 12px;height: 20px;line-height: 14px;font-size: 12px;text-align: center;color: #9f9f9f;cursor: pointer;}.search .btn {float: right;width: 58px;height: 32px;background-color: #e2231a;}.search .btn .btn-icon {font-size: 0;}.search .btn .btn-icon::after {content: "\e986";font-family: 'icomoon';color: #fff;font-size: 16px;}}.hotword a {margin-right: 10px;color: #999;}.shopcar {position: absolute;right: 230px;top: 25px;width: 132px;height: 36px;border: 1px solid #e2231a;color: #e2231a;text-align: center;cursor: pointer;}.shopcar p::before {padding-top: 2px;content: '\e93a';font-family: 'icomoon';font-size: 16px;color: #e2231a;margin-right: 10px;}.nav1 {position: absolute;left: 203px;bottom: 10px;height: 40px;padding-top: 20px;}.nav1 a {font-size: 15px;color: #333;margin: 0 10px 0 10px;padding-left: 1px;}.nav1 a:hover {color: #c81623}.avtm {position: absolute;bottom: 10px;right: 0;width: 192px;height: 120px;background: url(../upload/header.png); cursor: pointer;}/* 导航栏 */.nav {position: relative;height: 480px;margin-top: 10px;}.nav .sidebar {float: left;width: 190px;height: 470px;margin-right: 10px;background-color: #fefefe;}.nav .sidebar ul {height: 450px;height: 25px;padding-left: 18px;line-height: 25px;color: #333;font: 12px, Microsoft YaHei;}.nav .sidebar ul li:hover {background-color: #e3e4e5;}.nav .banner {float: left;width: 790px;height: 470px;margin-right: 10px;}.nav .banner .l-banner img {float: left;width: 590px;height: 470px;margin-right: 10px;}.nav .banner .s-banner img {width: 190px;height: 150px;}.nav .banner .s-banner .ss-banner { margin-top: 10px;margin-bottom: 10px;}.nav .column {float: left;width: 200px;height: 470px;}.nav .column .logbar {height: 92px;background-color: #fff;}.nav .column .logbar .login {height: 47px;}.nav .column .logbar .log-img {float: left;margin-left: 20px;margin-right: 10px;margin-top: 10px;}.nav .column .logbar img {width: 40px;height: 40px;border: 1px solid #fff;border-radius: 50%;}.nav .column .logbar .log-text {position: absolute;top: 15px;right: 25px;}.nav .column .logbar .log-btn {text-align: center;margin-top: 15px;.nav .column .logbar .log-btn button {width: 70px;height: 25px;margin-left: 5px;margin-right: 5px;border-radius: 15px;font-size: 12px;}.nav .column .logbar .log-btn1 {background-color: #e2231a;color: #fff;}.nav .column .logbar .log-btn2 {background-color: black;color: burlywood;}.nav .column .logbar .log-btn button:hover { background-color: #c81623;color: #fff;}.nav .column .news {margin: 1px 0;height: 138px;background-color: #fff;}.nav .column .news .news-tit {padding-top: 15px;margin-bottom: 13px;height: 30px;}.nav .column .news .news-tit h5 {font-size: 14px;margin-left: 15px;}.nav .column .news .news-tit a {position: absolute;top: 105px;right: 20px;}.nav .column .news .news-tit a::after {content: "\e920";font-family: 'icomoon';font-size: 12px;color: #666;}.nav .column .news ul {margin: 0 15px;width: 160px;height: 88px;}.nav .column .news ul li {margin-bottom: 6px;/*超出的空⽩区域不换⾏*/white-space: nowrap;/*超出隐藏*/overflow: hidden;/*⽂本超出显⽰省略号*/text-overflow: ellipsis;}.nav .column .news .newsword {font-size: 12px;height: 16px;width: 35px;text-align: center;}.nav .column .menu {height: 238px;padding: 9px 0;background-color: #fff;}.nav .column .menu li {text-align: center;float: left;width: 63px;height: 55px;}.nav .column .menu li span {display: block;}.nav .column .menu img {width: 28px;height: 28px;}.seckill {height: 260px;position: relative;}.seckill .time {float: left;width: 200px;height: 100%;background: url(../imges/seckill.png); background-repeat: no-repeat;}.seckill .adkill {float: left;height: 100%;width: 199px;margin-right: 1px;background-color: #fff;}.seckill .adkill img {margin: 30px 30px 0 30px;width: 140px;height: 140px;}.seckill .l-adkill {position: relative;float: left;width: 200px;height: 260px;background-color: #fff;}.seckill .l-adkill img {text-align: center;width: 120px;height: 120px;margin: 20px 30px 0 30px;}.time .time-tit {margin-top: 31px;height: 35px;font-size: 30px;color: #fff;text-align: center;}.time .time-art {margin-top: 90px;height: 25px;text-align: center;font-size: 18px;color: #fff;}.time .timer {margin-top: 10px;text-align: center;height: 30px;font-size: 20px;color: #fff;}.time .timer span {width: 30px;height: 30px;background-color: #2f3430;margin: 0 10px;}.adkill .ad-text {margin: 13px 20px 0 20px;height: 18px;text-align: center;/*超出的空⽩区域不换⾏*/white-space: nowrap;/*超出隐藏*/overflow: hidden;/*⽂本超出显⽰省略号*/text-overflow: ellipsis;}.adkill .ad-price {margin: 7px 20px 0 20px;border: 1px solid #e2231a;width: 158px;height: 22px;}.adkill .ad-price span {display: block;float: left;}.adkill .ad-price .pr1 {font-size: 14px;text-align: center;width: 68px;background-color: #e2231a;color: #fff;height: 21px;cursor: pointer;}.adkill .ad-price .pr2 {width: 0;height: 0;border-top: 20px solid #e2231a;border-right: 20px solid transparent; }.adkill .ad-price .pr3 {width: 66px;height: 20px;text-align: center;text-decoration: line-through;color: #666;cursor: pointer;}.l-adkill {text-align: center;}.l-adkill .l-text {margin-top: 10px;text-align: center;font-size: 14px;}.l-adkill .l-a-btn {text-align: center;margin: 4px auto;width: 82px;height: 24px;border: 1px solid #e2231a;border-radius: 12px;color: #e2231a;cursor: pointer;}.l-adkill .l-a-btn :hover {background-color: #e2231a; }.end-fun {margin: 30px 0;height: 42px;}.end-fun ul li {float: left;width: 225px;height: 42px;line-height: 42px;margin: 0 36px;font-size: 18px;}.end-fun img {width: 36px;height: 42px;}.end-menu {border-top: 1px solid #999; height: 200px;padding: 20px 0;}.end-menu h5 {font-size: 14px;margin-bottom: 5px;}.e-m-1,.e-m-2,.e-m-3,.e-m-4,.e-m-5 {width: 198px;float: left;}.e-m-1,.e-m-2,.e-m-3,.e-m-4,.e-m-5 ul li {line-height: 22px;}.end-end {height: 262px;}.end-end .end-con {height: 48px;padding: 15px 60px;border-top: 1px solid #999; }.end-con ul li,.end-plo ul li,.end-int ul li,.end-com ul li,.end-glb ul li,.end-ad ul li {float: left;text-align: center;height: 26.6px;}.end-con,.end-plo,.end-int,.end-com,.end-glb,.end-ad {height: 26.6px;}.end-con ul li:nth-child(even),.end-plo ul li:nth-child(even),.end-int ul li:nth-child(even),.end-com ul li:nth-child(even),.end-glb ul li:nth-child(even),.end-ad ul li:nth-child(even) {width: 1px;height: 12px;background-color: #666;margin: 5.8px 8px 8.8px 8px; }.end-plo {padding: 0 200px 5px 200px; }.end-int {padding: 0 160px 5px 160px; }.end-com {padding: 0px 190px 5px 190px; }.end-glb {padding: 0px 260px 5px 260px; }.end-ad {padding: 0px 500px 0px 500px; }.end-img {padding: 25px 320px;}.end-img ul li {float: left;}[]()。

HTML实例-02-京东顶部导航条

HTML实例-02-京东顶部导航条<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>京东()-正品低价、品质保障、配送及时、轻松购物！</title><link rel="shortcut icon" href="./img/favicon.png"><link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="fa/css/all.css"></head><body><div class="top-bar-wrapperr"><div class="top-bar clearfix"> <div class="left-tar"><div class="location"><i class="fas fa-map-marker-alt"></i><a href="">浙江</a></div></div><ul class="list-tar clearfix"><li class="list-tar-li"><a href="">你好，请登录</a><a href="" class="highlight">免费注册</a></li><li class="line"></li><li class="list-tar-li"><a href="">我的订单</a></li><li class="line"></li><li class="list-tar-li"><a href="">我的京东</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li class="list-tar-li"><a href="">京东会员</a></li><li class="line"></li><li class="list-tar-li"><a href=""class="highlight">企业采购</a><i class="fas fa-angle-down"></i></li><li class="line"></li><li class="list-tar-li"><span>客户服务</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li class="list-tar-li"><span>⽹站导航</span><i class="fas fa-angle-down"></i></li><li class="line"></li><li class="list-tar-li"><span>⼿机京东</span></li></ul></div></div></body></html>style.css* {margin:0;padding:0;}body{font:12px/1.5 Microsoft YaHei;color:#999;}/*蓝⾊框的设置样式*/.top-bar-wrapperr{width:100%;background-color: #e3e4e5; height:30px;border-bottom:1px #ddd;/*设置⾏⾼，使⽂字垂直居中*/ line-height: 30px;}/*红⾊框的样式*/.top-bar{width:1190px;height:100%;/*内部容器⽔平居中*/margin:0 auto;}.left-tar{float:left;}.list-tar{float: right;}.list-tar li{float:left;}.list-tar-li{float:left;}a{text-decoration: none;}li{list-style: none;}/*解决⾼度塌陷*/.clearfix::before,.clearfix::after{ content: '';display: table;}.left-tar a,.list-tar-li a,.list-tar-li li{ color:#999;}.fa-map-marker-alt{color:red;}.top-bar a:hover,.top-bar a.highlight { color:red;}/*设置分割线*/.line{width:1px;height:10px;background: #999; /*填充⼀个|*/ margin:10px 12px;}。

javascript仿京东导航左侧分类导航下拉菜单效果

javascript仿京东导航左侧分类导航下拉菜单效果本⽂实例为⼤家分享了类似于京东、淘宝商城左侧分类导航下拉菜单，供⼤家参考，具体内容如下效果图：实现代码：<!DOCTYPE html><html><head><meta charset="gb2312"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>*{margin:0;padding:0;}.ul{position:relative;width:200px;height:auto;}.ul li{height:24px;line-height:24px;border-bottom:1px solid #ddd;text-align:center;font-size:12px;}.ul li a{display:block;background:#fff;color:#000;text-decoration:none;}.ul li a:hover{display:block;background:#000;color:#fff;text-decoration:none;}.ul li div{display:none;width:400px; height:auto;position:absolute;top:0;left:200px; background:#000; color:#fff;}.ul li div dl dd{float:left; width:100px;}.ul .liname div{display:block;}</style><script>window.onload=function(){var aLi=document.getElementsByTagName("li");for(var i=0;aLi.length>i;i++){aLi[i].i=i;aLi[i].onmouseover=function(){this.className="liname";var h1=this.i*25;var h2=this.getElementsByTagName("div")[0].offsetHeight;if(h2<h1){this.getElementsByTagName("div")[0].style.top=h1+'px';}}aLi[i].onmouseout=function(){this.className="";}}}</script></head><body><ul class="ul"><li><a href="">类别1</a><div class="div"><dl><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别2</a><div class="div"><dl><dd>类别2</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别3</a><div class="div"> <dl><dd>类别3</dd></dl></div></li><li><a href="">类别4</a><div class="div"> <dl><dd>类别4</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别5</a><div class="div"> <dl><dd>类别5</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别6</a><div class="div"> <dl><dd>类别6</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别7</a><div class="div"> <dl><dd>类别7</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li><li><a href="">类别8</a><div class="div"><dl><dd>类别8</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd><dd>类别1</dd></dl></div></li></ul></body></html>希望本⽂所述对⼤家学习javascript程序设计有所帮助。

我写的京东页面代码

我写的京东页⾯代码1、index.html---主要搭建页⾯的结构2、base.css---主要写⼀些样式重置的代码/*样式重置*/body,p,ul,li,ol,dl,dt,dd,h1,h2,h3,h4,h5,h6,input,textarea{margin: 0;padding: 0;}a {text-decoration: none;color: #999;}li {list-style: none;}img,input {outline: none;vertical-align: middle;border: 0;}body {font-size: 12px;font-family: "微软雅⿊";color: #999;background-color: #f6f6f6;}table {border-collapse: collapse;}/*放置⼀些公共的样式*/.clear:after {display: block;content: "";clear: both;}/*IE兼容*/.clear {zoom: 1;}.fl {float: left;}.fr {float: right;}.w {width: 1190px;margin: 0 auto;}3、head.css---主要写页⾯顶部的样式/*顶部⼴告样式开始*/.head_banner {height: 80px;background-color: #d32338;}.head_banner .w {position: relative;}.head_banner .w .close {display: block;width: 20px;height: 20px;font-size: 13px;color: rgba(255,255,255,0.3);line-height: 20px;text-align: center;background-color: rgba(0,0,0,0.3);position: absolute;top: 5px;right: 5px;}.head_banner .w .close:hover {color: rgba(255,255,255,0.8);background-color: rgba(0,0,0,0.8);}/*顶部⼴告样式结束*//*头部导航部分开始*/.head_nav {height: 30px;background-color: #e3e4e5;border-bottom: 1px #ddd solid;}.head_nav .w ul.fl li {margin-left: 200px;height: 30px;line-height: 30px;text-align: center;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li:hover{background-color: #fff;border: 1px #e3e4e5 solid;border-bottom: none;}.head_nav .w ul.fl li .iconfont {/*margin-left: 10px;*/color: #f10215;}/*.head_nav .w .fl .iconfont:hover {background-color: #fff;border: 1px #eee solid;border-bottom: none;}*/.head_nav .w ul.fr li {/*height: 10px;*/padding: 0 6px;line-height: 30px;float: left;}.head_nav .w ul.fr li a.red {color: red;}.head_nav .w ul.fr li a:hover{color: #f10215;}.head_nav .w ul.fr li .iconfont {font-size: 9px;}.head_nav .w ul.fr li.line {width: 1px;height: 10px;padding: 0; /*li设置了padding撑开，line不⽤撑开，把padding设为0*/ background-color: #cccccc;margin: 11px 6px 0 6px;}/*.head_nav .w .fr li a {font-size: 12px;color: #999;}.head_nav .w .fr a:hover {font-size: 12px;color: #f10215;}*/.head_nav .w .fr li .public {/*font-size: 9px;*/border: 1px #e3e4e5 solid;border-bottom: none;height: 29px;}.head_nav .w .fr li .public:hover {background-color: #fff;border: 1px #ccc solid;border-bottom: none;}/*⼩三⾓样式*/.head_nav .w .fr li.mobile {position: relative;}.head_nav .w .fr li.mobile:after {display: block;content: "";width: 0;height: 0;border-top: 8px transparent solid;border-right: 8px transparent solid;border-bottom: 8px #fff solid;border-left: 8px transparent solid;position: absolute;top: 18px;left: 20px;}/*⼆维码样式*/.head_nav .w .fr li.mobile i {width: 58px;height: 58px;border: 1px #ccc solid;display: block;background: url(../img/mobile_qrcode.png) no-repeat center; position: absolute;left: 0px;top: 31px;}/*头部导航部分结束*//*头部搜索区域开始*/.head_search {height: 140px;}.head_search .w {position: relative;}.head_search .w .logo {float: left;position: absolute;top: -30px;/*margin-top: -30px;*/box-shadow: 0px 0px 10px #ccc;}.head_search .w .search {width: 548px;height: 33px;float: left;margin-top: 25px;margin-left: 320px;border: 1px #f10215 solid;position: relative;}.head_search .w .search .text {width: 498px;height: 33px;float: left;text-indent: 4px; /*input框⾥的字体缩进*/ }.head_search .w .search .btn {width: 50px;height: 33px;background-color: #f10215;float: left;}.head_search .w .search .iconfont {position: absolute;top: 7px;right: 13px;color: #fff;font-size: 20px;}.head_search .w .shopcart {float: left;width: 188px;height: 33px;line-height: 33px;text-align: center;font-size: 12px;color: #f10215;background-color: #fff;border: 1px #e3e4e5 solid;margin-top: 25px;margin-left: 35px;position: relative;}.head_search .w .shopcart em {display: block;font-style: normal;width: 14px;height: 14px;color: #fff;line-height: 14px;text-align: center;border-radius: 50%;background-color: #f10215;position: absolute;top: 5px;right: 34px;}/*热词搜索样式*/.head_search .w .hotwords {float: left;margin-left: 320px;margin-top: 10px;}.head_search .w .hotwords ul li {float: left;font: 12px/12px "微软雅⿊";margin-right: 10px;}.head_search .w .hotwords a.red {color: red;}.head_search .w .hotwords a:hover {color: red;}/*主导航栏样式*/.head_search .w .main_nav {float: left;margin-left: 230px;margin-top: 31px;}.head_search .w .main_nav ul li {float: left;font: 700 16px/16px "微软雅⿊";margin-right: 30px;}.head_search .w .main_nav ul li.line {width: 1px;height: 10px;background-color: #ccc;margin: 3px 20px 0 -10px;}.head_search .w .main_nav ul li a {color: #555;}.head_search .w .main_nav ul li a:hover {color: red;}/*⼩⼴告*/.head_search .w .small_banner {margin-top: 12px;display: block;float: right;}/*头部搜索区域结束*/4、index.css---主要写轮播图部分和秒杀部分的样式/*轮播区域样式*/.con_lunbo {height: 480px;background: url(../img/a-bg.png) no-repeat center;z-index: -1;} /*背景图被压在版⼼下⾯，但是重新敲⼀遍，保存⼀遍就可以了，为什么？？*/ /*左侧导航列表样式*/.con_lunbo .w .side_nav {width: 190px;height: 480px;background-color: #6e6568;}.con_lunbo .w .side_nav ul {margin-top: 16px;}.con_lunbo .w .side_nav ul li {height: 30px;font: 12px/30px "微软雅⿊";color: #fff;padding-left: 12px;}.con_lunbo .w .side_nav ul li:hover {background-color: rgba(255,255,255,0.3);}.con_lunbo .w .side_nav ul li a {color: #fff;}.con_lunbo .w .side_nav ul li a:hover {color: red;}/*中间轮播区域样式*/.con_lunbo .w .lunbo {width: 790px;height: 480px;margin: 0 10px;}.con_lunbo .w .lunbo .lb {height: 340px;margin-bottom: 10px;overflow: hidden;position: relative;}.con_lunbo .w .lunbo .lb ul {width: 8000px;}.con_lunbo .w .lunbo .lb ul li {/*width: 790px;height: 340px;*/float: left;}.con_lunbo .w .lunbo .box_img {height: 130px;}.con_lunbo .w .lunbo .lb ol.lb_nav {width: 182px;height: 12px;padding: 4px 9px;border-radius: 9px;background-color: rgba(255,255,255,0.5);position: absolute;left: 50%;bottom: 20px;margin-left: -91px;}.con_lunbo .w .lunbo .lb ol.lb_nav li {float: left;width: 12px;height: 12px;background-color: #fff;border-radius: 50%;margin-right: 10px;}.con_lunbo .w .lunbo .lb ol.lb_nav li:nth-last-child(1) { margin: 0;}.con_lunbo .w .lunbo .lb ol.lb_nav li.active {background-color: red;}/*右侧⽣活列表样式*/.con_lunbo .w .life_list {width: 190px;height: 480px;background-color: #fff;}/*上边登录部分样式*/.con_lunbo .w .life_list .life_top {width: 190px;height: 115px;border-bottom: 1px #e6e6e6 solid;}.con_lunbo .w .life_list .life_top img {width: 45px;height: 45px;border-radius: 50%;margin: 15px 10px 10px;float: left;}.con_lunbo .w .life_list .life_top p {float: left;font: 11px/11px "微软雅⿊";color: #666;/*margin-top: 21px;margin-left: 15px;margin-bottom: 9px;*/margin: 21px 0 15px;}.con_lunbo .w .life_list .life_top a {float: left;font: 11px/11px "微软雅⿊";color: #000;font-weight: bold;margin-right: 9px;}.con_lunbo .w .life_list .life_top a:nth-child(1) { /*不起作⽤*/margin-top: 15px; /*a是⾏内元素，没有margin，设置浮动以后就有margin了*/ }.con_lunbo .w .life_list .life_top a:hover {color: red;}.con_lunbo .w .life_list .life_top .fuli {width: 168px;height: 24px;float: left;margin-top: 15px;}.con_lunbo .w .life_list .life_top .fuli a {float: left;display: block;width: 70px;height: 20px;border: 2px #e01222 solid;font: 11px/20px "微软雅⿊";text-align: center;color: #e01222;background-color: #fff;margin: 0 10px;}.con_lunbo .w .life_list .life_top .fuli a:nth-child(2) {margin: 0;}.con_lunbo .w .life_list .life_top .fuli a:hover {color: #fff;background-color: #e01222;}/*中间促销部分样式*/.con_lunbo .w .life_list .life_middle {width: 160px;height: 147px; /*154px-7px*/margin: 0 auto;}.con_lunbo .w .life_list .life_middle .life_title {width: 147px; /*160px-13px*/height: 15px; /*17px-2*/margin-top: 7px;border-bottom: 1px #e6e6e6 solid;padding-bottom: 2px;}.con_lunbo .w .life_list .life_middle .life_title a {float: left;font: 11px "微软雅⿊";color: #333;font-weight: bold;}.con_lunbo .w .life_list .life_middle .life_title a.sale {border-right: 1px #e6e6e6 solid;padding-right: 13px;}.con_lunbo .w .life_list .life_middle .life_title a.gonggao {margin-left: 15px;}.con_lunbo .w .life_list .life_middle .life_title a.more {float: right;}.con_lunbo .w .life_list .life_middle .life_con {height: 127px;}.con_lunbo .w .life_list .life_middle .life_con a {font: 11px/23px "微软雅⿊";color: #666;float: left;}.con_lunbo .w .life_list .life_middle .life_con a:nth-child(1) { /*不⽣效，问题同上*/margin-top: 19px;}.con_lunbo .w .life_list .life_middle .life_con a:hover {color: red;}/*下边⽣活服务部分样式*/.con_lunbo .w .life_list .life_bottom {width: 190px;height: 210px;}.con_lunbo .w .life_list .life_bottom {overflow: hidden;}.con_lunbo .w .life_list .life_bottom ul {width: 192px;overflow: hidden; /*为什么不起作⽤应该给ul的⽗元素设置overflow: hidden;*/}.con_lunbo .w .life_list .life_bottom ul li {float: left;width: 47px;height: 69px;border-top: 1px #e6e6e6 solid;border-right: 1px #e6e6e6 solid;position: relative;}.con_lunbo .w .life_list .life_bottom ul li a i {display: block;width: 15px;height: 18px;background: url() no-repeat -4px -88px;text-align: center;margin: 15px 16px 10px 15px;}.con_lunbo .w .life_list .life_bottom ul li:nth-child(2) a i { /*不⽣效 */width: 20px; /*li包含a，应该是第⼆个li⾥的a，⽽不是第⼆个a*/height: 20px;background-position: -2px -45px;margin-top: 17px;margin-left: 13px;}.con_lunbo .w .life_list .life_bottom ul li a p { /*不⽣效*/font-size: 11px "微软雅⿊"; /*刚开始设置的是span，span是⾏内元素，text-align: center;不起作⽤*/ color: #666;text-align: center;}.con_lunbo .w .life_list .life_bottom ul li a b {display: block;width: 13px;height: 16px;background: url(../img/jian.png) no-repeat;position: absolute;top: 0;right: 0;}/*秒杀部分样式*/.con_ms {height: 305px;margin-top: 10px;}/*标题左侧样式*/.con_ms .w .title {height: 55px;background: url(../img/seckill_hd.png) no-repeat; }.con_ms .w .title .left_title .corner {display: block;width: 25px;height: 25px;background: url() no-repeat -190px -48px;float: left;margin-top: -2px;margin-left: -1px;}.con_ms .w .title .left_title .clock {display: block;width: 34px;height: 40px;background: url() no-repeat 0px -39px;float: left;margin-top: 8px;margin-left: 31px;}.con_ms .w .title .left_title h4 {float: left;font: 24px/24px "微软雅⿊";color: #fff;margin-left: 10px;margin-top: 16px;}.con_ms .w .title .left_title a {float: left;font-size: 13px;color: #fff;margin-left: 15px;margin-top: 25px;}.con_ms .w .title .left_title a i.right_arrow {display: inline-block;background: url() no-repeat -153px -39px;width: 16px;height: 17px;vertical-align: top;}/*标题右侧时间样式*/.con_ms .w .title .right_time .left_text {width: 55px;height: 28px;margin-top: 27px;margin-right: 7px;font: 12px/12px "微软雅⿊";color: #fff;}.con_ms .w .title .right_time span {float: left;}.con_ms .w .title .right_time span.hours,span.min,span.sec { width: 35px;height: 37px;background-color: #440106;border-radius: 3px;font: 12px/37px "微软雅⿊";color: #f90013;text-align: center;margin-top: 10px;}.con_ms .w .title .right_time span.dot {width: 4px;height: 12px;/*margin-top: 22px;*/margin: 22px 4px 0;}.con_ms .w .title .right_time span.dot i {display: block;width: 4px;height: 4px;border-radius: 50%;background-color: #440106;}.con_ms .w .title .right_time span.dot i:nth-child(1) {margin-bottom: 4px;}.con_ms .w .title .right_time .right_text {width: 70px;height: 28px;/*margin-top: 27px;margin-left: 7px;margin-right: 22px;*/margin: 27px 22px 0 7px;font: 12px/12px "微软雅⿊";color: #fff;}/*下侧商品区域样式*/.con_ms .w .content .shopping {height: 250px;background-color: #fff;float: left;}.con_ms .w .content .shopping ul li {float: left;width: 199px;height: 225px;border-right: 1px #e7e7e7 solid;}.con_ms .w .content .shopping ul li a {display: block;width: 184px;height: 195px;margin-left: 15px;text-align: center;margin-bottom: 11px;position: relative;}.con_ms .w .content .shopping ul li a b.shop_icon {width: 30px;height: 40px;display: block;position: absolute;z-index: 2;color: #fff;text-align: center;line-height: 40px;font-weight: normal;background: url() no-repeat -53px -39px;}.con_ms .w .content .shopping ul li a img {position: relative;top: 13px;}.con_ms .w .content .shopping ul li a p {text-align: left;margin-top: 15px;height: 28px;line-height: 14px;overflow: hidden; /*溢出内容隐藏*/}.con_ms .w .content .shopping ul li p.price span.newPrice {color: red;margin-left: 15px;float: left;}.con_ms .w .content .shopping ul li p.price span.newPrice i {font-size: 9px;font-size: normal;}.con_ms .w .content .shopping ul li p.price span.newPrice span { font-size: 14px;font-weight: bold;}.con_ms .w .content .shopping ul li .oldPrice {font-size: 9px;float: left;margin-left: 10px;margin-top: 2px;}.con_ms .w .content .shopping ul li span.shadow {width: 170px;height: 22px;display: block;background: url() no-repeat;}/*下侧右边⼴告区域样式*/.con_ms .w .content .big_Img {width: 190px;float: left;}.con_ms .w .content .big_Img img {float: left;}5、foot.css---主要写页⾯底部的样式.foot {height: 567px;background-color: #eaeaea;}/*上⾯多快好省部分样式*/.foot .foot_top {height: 102px;border-bottom: 1px #dedede solid;}/*.foot .foot_top .w {height: 102px;border-bottom: 1px #dedede solid;}*/.foot .foot_top .w ul li {float: left;width: 297px;height: 102px;line-height: 102px;/*text-align: center;*/font-weight: bold;}.foot .foot_top .w ul li h5 {float: left;width: 36px;height: 42px;margin-top: 30px;margin-left: 36px;line-height: 42px;text-align: center;font-size: 20px;color: #e01121;text-indent: -999999px; /*1、优化 2、客户体验*/background: url(../img/ico_service.png) no-repeat;}.foot .foot_top .w ul li:nth-child(2) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -43px;*/ background-position: 0 -43px;}.foot .foot_top .w ul li:nth-child(3) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -85px;*/ background-position: 0 -85px;}.foot .foot_top .w ul li:nth-child(4) h5 {/*background: url(../img/ico_service.png) no-repeat 0 -127px;*/ background-position: 0 -127px;}.foot .foot_top .w ul li p {float: left;margin-left: 10px;font-size: 18px;color: #444444;}/*中间服务部分*//*.foot .service {height: 200px;}*/.foot .service .w {/*height: 200px;*/border-bottom: 1px #ddd solid;}/*.foot .service .w .service_list {}*/.foot .service .service_list dl {float: left;width: 198px;}.foot .service .service_list dl dt {margin-top: 26px;margin-bottom: 15px;font: 13px/13px "微软雅⿊";color: #666666;font-weight: bold;}.foot .service .service_list dl dd {margin-bottom: 11px;font: 11px/11px "微软雅⿊";}.foot .service .map {width: 200px;background: url(../img/ico_footer.png) no-repeat;height: 172px; /*不知道172怎么来的*/background-position: 0 22px;}.foot .service .map h5 {margin-top: 25px;font: 13px/13px "微软雅⿊";font-weight: bold;color: #666666;text-align: center;}.foot .service .w .map p {margin: 23px 20px 0 10px;font: 11px "微软雅⿊";line-height: 18px;}.foot .service .map a {float: right;}.foot .service .map a:hover {color: red;}/*尾部版权部分*/.foot .copyright p {margin-bottom: 9px;text-align: center;}.foot .copyright p:nth-child(1) {margin-top: 19px;margin-bottom: 17px;font: 12px/12px "微软雅⿊";font-weight: bold;}.foot .copyright p a {margin: 0 9px;}.foot .copyright p a {font: 13px/13px "微软雅⿊";color: #666;text-align: center;}.foot .copyright p.pic_href {width: 678px; /*不知道678怎么来的？？测的是640*/ margin: 0 auto;}.foot .copyright p.pic_href a {float: left;display: block;width: 103px;height: 32px;background: url(../img/ico_footer.png) no-repeat;background-position: 0 -150px;margin: 0;margin-right: 10px;}.foot .copyright p.pic_href a:nth-child(2) {background-position: -104px -150px;}.foot .copyright p.pic_href a:nth-child(3) {background-position: 0px -183px;}.foot .copyright p.pic_href a:nth-child(4) {background-position: -104px -183px;}.foot .copyright p.pic_href a:nth-child(5) {background-position: 0px -216px;}.foot .copyright p.pic_href a:nth-child(6) {background-position: -104px -216px;}/*固定底部年货样式*/.box_fix {width: 1334px;height: 95px;background: url(../img/footer-fix.png) no-repeat;position: fixed;left: 50%;bottom: 0;margin-left: -667px;}.box_fix>img:nth-child(1) {margin-left: 104px;}.box_fix img {margin-top: 15px;}.box_fix a:nth-child(2) {margin-left: 76px;}这是我写的京东⾸页的代码，主要⽤的是html和css，有很多不⾜之处，希望各位⼤神多多指教。

导航条设置代码css+div

导航条设置代码css+div以下文字内容可以一同复制使用，不会影响到使用效果哦！/* 导航条背景色*/.skin-box-bd .menu-list{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态背景色*/.skin-box-bd .menu-list .link{background: none repeat scroll 0 0 #570033;}/*首页/店铺动态右边线*/.skin-box-bd .menu-list .menu{border-right:1px #570033 solid;}/*首页/店铺动态文字颜色*/.skin-box-bd .menu-list .menu .title{color:#570033}/*所有分类背景色*/.all-cats .link{background: none repeat scroll 0 0 #570033;}/*所有分类右边线*/.all-cats .link{border-right:1px #570033 solid;}/*所有分类文字颜色*/.skin-box-bd .all-cats .title{color:#ff0000}<a target="_blank" href="/getcid.aw?v=2&uid=791205223%40qq.co m&site=cntaobao&s=1&groupid=0&charset=utf-8"><img border="0" src="/online.aw?v=2&uid=791205223% &site=cntaobao&s=1&charset=utf-8" alt="点击这里给我发消息" /></a>。

DIVCSS京东商城产品分类适合所有版本

DIV+CSS京东商城产品分类适合所有版本第一步：在你所用的模板的css文件中加上以下代码[Copy to clipboard]View Code CSS1011121314151617181920212224 25 26 27 28 29 30 31 32 33 34 35 36 37 3840 41 42 43 44 45 46 47 48 49 50 51 52 53 5456 57 58 59 60 61 62 63 64 65 66 67 68 69 7072 73 74 75 76 77 78 79 80 81 82 83 84 85 8688 89 90 91 92 93 94 95 96 97 98 99 100 101 102104105106107108109110.my_left_category{width211px;font-size12px;}.my_left_category h1{background-imageurl(imagesspring_06.jpg); height20px;background-repeatno-repeat;font-size14px;font-weightbold;padding-left15px;padding-top8px;margin0px;color#FFF;}.my_left_category .my_left_cat_list{ width209px;border-color#ce2020;border-stylesolid;border-width0px 1px 1px 1px;line-height13.5pt;}.my_left_category .my_left_cat_list h2 { margin0px;padding3px 5px 0px 9px;}.my_left_category .my_left_cat_list h2 a{ color#d6290b;font-weightbold;font-size14px;line-height22px;}.my_left_category .h2_cat{width209px;height26px;background-imageurl(imagesmy_menubg.gif); background-repeatno-repeat;line-height26px;font-weightnormal;color#333333;positionrelative;}.my_left_category a{font12px;text-decorationnone; color#333333;}.my_left_category ahover{ text-decorationunderline; color#ff3333;}.my_left_category h3{ margin0px;padding0px;height26px;font-size12px;font-weightnormal;displayblock;padding-left8px;}.my_left_category h3 span{color#999999; width145px; floatright;} .my_left_category h3 a{ line-height26px;}.my_left_category .h3_cat{displaynone;width204px;positionabsolute;left184px;margin-top-26px;cursorauto;}.my_left_category .shadow{positioninherit;backgroundurl(imagesshadow_04.gif) left top;width204px;}.my_left_category .shadow_border{positioninherit;width200px;border1px solid #959595; margin-top1px;border-left-width0px;backgroundurl(imagesshadow_border.gif) no-repeat 0px 21px;background-color#ffffff;margin-bottom3px}.my_left_category .shadow_border ul{margin0; padding0; margin-left15px} .my_left_category .shadow_border ul li {list-stylenone;padding-left10px;background-imageurl(imagesmy_cat_sub_menu_dot.gif);background-repeatno-repeat;background-position0px 8px;floatleft;width75px;height26px;overflowhidden;}.my_left_category .active_cat{ z-index99;background-position0 -25px;cursorpointer;}.my_left_category .active_cat h3 { font-weightbold}.my_left_category .active_cat h3 span{ displaynone;}.my_left_category .active_cat div{displayblock;}第二步：模板文件夹的 librarycategory_tree.lbi内容改为：[Copy to clipboard]View Code HTML101113 14 15 16 17 18 19 20 21 22 23 24 25 26 2729 30 31 32 33 34 35 36 37 38 39 40 41 42 434546meta http-equiv=Content-Type content=texthtml; charset=gbk div class=my_left_categoryh1商品分类h1div class=my_left_cat_list{assign var=pre_item_level value=-1}!--{foreach from=cat_list(0,0,false,3,false) item=cat}--{if $cat.level lt 2 && $pre_item_level gt 0}divdiv{if}{if $cat.level eq 0}h2a href={$cat.url}{$escapehtml}ah2{elseif $cat.level eq 1}div class=h2_cat onmouseover=this.className='h2_cat active_cat' onmouseout=this.className='h2_cat'h3span - {$cat.cat_descescapehtml}spana href={$cat.url}{$escapehtml}ah3div class=h3_catdiv class=shadowdiv class=shadow_borderul{elseif $cat.level eq 2}lia href={$cat.url}{$escapehtml}ali{if}{assign var=pre_item_level value=$cat.level}!--{foreach}--{if $pre_item_level gt 0}uldivdivdivdiv{if}meta第三步：把用到的图片拷贝到模板文件夹的images目录完成！注：京东的二级分类名称旁边列了2个三级分类名称（灰色）,作为三级分类的提示。

jquery仿京东导航仿淘宝商城左侧分类导航下拉菜单效果

jquery仿京东导航仿淘宝商城左侧分类导航下拉菜单效果在⽹站建设中，特别是做商城和产品⽹站，通常会⽤到导航弹出菜单，像是jquery写的仿京东导航菜单，⼀个经典的左侧多级导航菜单，学会了可以任意改变布局。

京东菜单已经有不少JS前端爱好者仿写过，今天蚂蚁⽹络重新与⼤家分享⼀款仿京东商城的商品多级分类菜单，精简版代码先看下jquery仿京东导航效果：前端html代码如下：复制代码代码如下:<ul><li><a href="#">baidu</a></li><div class="tips"><p><a href="">baidu</a></p></div><li>goolge</li><div class="tips"><p><a href="">google</a></p></div><li>yahoo</li><div class="tips"><p><a href="">yahoo</a></p></div><li>microsoft</li><div class="tips"><p><a href="">microsoft</a></p></div></ul><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;padding:0;} body{font:12px/1.3 arial,helvetica,clean,sans-serif,\5b8b\4f53;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}table{border-collapse:collapse;border-spacing:0;}img{border:none;}a{text-decoration:none; color:#666;}a:hover{text-decoration:underline; color:#FF6600;}ul,li{list-style-type:none;}q:before,q:after{content:'';}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}/* All reset */body{ margin:100px;}ul li{line-height:30px; border:1px solid #E5D1A1; text-align:center; margin-top:-1px; width:200px; background:#FFFDD2; position:relative; z-index:1;}.tips{position:absolute; width:150px; height:150px; border:1px solid #E5D1A1; background:#fff; z-index:2; display:none;}</style>js代码：复制代码代码如下:<script type="text/javascript">$(function(){$("ul li").each(function(index){$(this).mouseover(function(){var obj=$(this).offset();var xobj=obj.left+190+"px";var yobj=obj.top-50+"px";$(this).css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"});$("ul > div:eq("+index+")").css({"left":xobj,"top":yobj}).show();}).mouseout(function(){$("ul > .tips").hide();$(this).css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"})})})$("div").each(function(){$(this).mouseover(function(){$(this).prev("li").css({"width":"190px","z-index":"9999","border-right":"none","background":"#fff"})$(this).show();}).mouseout(function(){$(this).hide();$(this).prev("li").css({"width":"200px","z-index":"1","border":"1px solid #E5D1A1","background":"#FFFDD2"});})})})</script>效果图如下，jQuery仿京东左侧菜单效果，适合商城产品导航，这⾥没有做的那么细，只是使⽤CSS结合jQuery完成了菜单的简单效果，如果需要美化，请您在实际应⽤中⾃⼰搞⼀下吧，兼容性⾮常不错的，欢迎⼤家使⽤。

京东店铺装修代码全集

（京东商城）店铺装修代码大全首先旗舰店店铺设计代码一、大背景不平铺<div class="forBack">(正文body)可换的地方</div><style type="text/css">.w1{ text-align:center; width:100%; background:url(/popstreet/201105/18/banner_bg_170834.gif) center top no-repeat}/*模板背景图片循环*/ </style>二、.漂浮右侧（左侧可更改RIGHT: 1.5%为left: 1.5%）<div class="w w1"><div style="POSITION: fixed; BOTTOM: 0px; COLOR: #000000; TOP: 30%; RIGHT: 1.5%"> <div><a href="/ilike/food197021/index.html" target="_blank"><img border="0" alt=""src="/uploads/promotion/promotion-images/2011/08/01/20110801035244 KK.jpg" width="130" height="135" usemap="#Map02" /></a></div></div></div>三、.活动底部导航<div style="POSITION: fixed; WIDTH: 980px; BOTTOM: 0pt; HEIGHT: 60px; MARGIN-LEFT: -490px; LEFT: 50%" id="springfloat"><img border="0" alt="" src="/popstreet/201107/12/banner_salebottom_161815.gif"width="980" height="60" usemap="#Map2" /><map id="Map2" name="Map2"><area href="#hw" shape="RECT" coords="727,14,829,48" /><area href="#ps" shape="RECT" coords="853,15,968,47" /><area href="#yd" shape="RECT" coords="614,15,720,46" /><area href="#bao" shape="RECT" coords="508,12,596,49" /><area href="#nz" shape="RECT" coords="26,19,139,50" /><area href="#nvz" shape="RECT" coords="150,14,260,48" /><area href="#ny" shape="RECT" coords="268,18,372,47" /><area href="#xie" shape="RECT"coords="385,15,479,50" /></map></div>四、默认专题边框及背景颜色去除（见标注）<style type="text/css">.tem-top{ background:#ffffff; border:7px solid #fff; border-bottom:0}/*单品顶部背景白色边框7像素下边框为0*/.tem-middle,.left-line,.tem-bottom{ background:#fff;}/*单品中部单品间隔虚线单品顶部背景为白色*/.tem-middle{ border-left:7px solid #fff;border-right:7px solid #fff}/*单品中部左边框7像素右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*单品底部7像素边框顶部边框为0*/.w1{ text-align:center; width:100%; background:url(/popstreet/201107/11/banner_3_164158.gif)}/*模板背景图片循环*/.tem{margin: 0 auto; padding: 0 16px;width: 980px;}/*单品模板宽度*/#springfloat{ _display:none;}b{ font-weight:normal;}</style>右边框7像素*/.tem-bottom{ border:7px solid #fff; border-top:0;}/*。

垂直二级导航菜单用div+CSS架构实例

垂直二级导航菜单用div+CSS架构实例导航的结构导航的本质是让浏览者更好的访问你的网站,所以要建立有意义的语义.使CSS和语义相符合,为了以后方便维护，注意要避免现有浏览器的不兼容。

解决方案下面是导航的HTML和CSS的代码,效果如图.这是创建导航的HTML代码=========================<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="/1999/xhtml" lang="en-US"><head><title>Lists as navigation</title><meta http-equiv="content-type" content="text/html;charset=utf-8" /><link rel="stylesheet" type="text/css" href="listnav1.css" /></head><body><div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div></body></html>============================使用CSS给上面代码添加效果=====================#navigation {width: 200px;}#navigation ul {list-style: none;margin: 0;padding: 0;}#navigation li {border-bottom: 1px solid #ED9F9F;}#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515;background-color: #B51032;color: #FFFFFF;text-decoration: none;}======================分析:先创建一个无序列表的导航条,并做好导航链接. ========================<ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul>========================然后用一个div把这个无序列表包含起来.===========================<div id="navigation"><ul><li><a href="#">Recipes</a></li><li><a href="#">Contact Us</a></li><li><a href="#">Articles</a></li><li><a href="#">Buy Online</a></li></ul></div>==============================在浏览器中显示默认的样式.接下来我们要做的第一件事是给这个div定义宽度. ===================#navigation {width: 200px;}=====================给列表添加样式,去掉默认的圆点和清除填充.========================#navigation ul {list-style: none;margin: 0;padding: 0;}========================在浏览器中显示:给li标签添加一个下划线==========================#navigation li {border-bottom: 1px solid #ED9F9F;}==============================给链接添加样式:===============================#navigation li a:link, #navigation li a:visited { font-size: 90%;display: block;padding: 0.4em 0 0.4em 0.5em;border-left: 12px solid #711515;border-right: 1px solid #711515; background-color: #B51032;color: #FFFFFF;text-decoration: none;}=============================在上面可以看到这个CSS是添加了左右边框,并且使对象块状,这样做的效果使链接看起来像一个按扭.这种效果看起来像是给导航添加一个图片似的.使用CSS创建一个没有图像和javascript的导航导航功能常常具有翻转的效果:比如说一个浏览者把鼠标放在按扭上,按扭就会显示出另一张图片,来突出效果.要实现这个效果,则要两张图像和javascript.解决方案：使用CSS来创建上面的那个效果比用图像来创建要简单的多.在CSS要现实翻转这个效果用到hover伪类选择器。

移动端JD首页H5页面

移动端JD⾸页H5页⾯1：理解View ：<meta name="viewport" content="width=device-width,initial-scale=1.0">2. ⾃适应宽度：width:100%,max-width:640px,min-width:320px3. 单位：我们可以⽤px也可以rem。

4.图⽚⾃适应：display：block max-width：100%5. 样式统⼀：normal.cssok 开始：轮播图和导航栏的搭建思路分析：1、导航栏实现：导航栏使⽤css的position=fixed和z-index=1000，使它固定在顶部并在⽹页的最上层，左边的icon和右边登陆按钮使⽤绝对位置来调整距离左边右边上边的距离，⽽中间的form表单只要Padding-Left和Padding-Right就可以随屏幕伸缩。

2、⾃动轮播效果实现：这⾥使⽤了的⼀个js开源库unslider。

3、⼗个选项按钮实现：使⽤⼀个列表，设置每⼀个li为块元素，宽度为20%，并且让10个选项左浮动，就可以⾃动排好两⾏。

步骤⼀：编写html⽂件，将导航栏做成⼀个盒⼦，并放置需要的组件，并为它们取好类名，⽅便css的编写<header class="nav_header"><div class="nav"><a href="#" class="nav_logo"></a><form action="#"><span class="nav_search_icon"></span><input type="search" placeholder="搜索关键字"/></form><a href="#" class="nav_login">登录</a></div></header> 步骤⼆：编写css⽂件，将放置的东西设置好宽⾼，宽⽤百分⽐可以⾃适应，⾼度则是⾃⼰测量/*nav*/.nav_header{position: fixed;height: 40px;width: 100%;top: 0;left: 0;z-index: 1000;}.nav_header> .nav{width: 100%;height: 40px;max-width: 640px;min-width: 320px;margin: 0 auto;background:rgba(201,21,35,0.00);position: relative;}.nav_header> .nav> .nav_logo{width: 80px;height: 30px;position: absolute;background: url("../img/top_logo.png") no-repeat;background-size: 80px 20px;top: 10px;left: 0;}.nav_header> .nav> .nav_login{width: 50px;height: 40px;line-height: 40px;text-align: center;position: absolute;right: 0;top: 0;color: white;font-size: 15px;}.nav_header> .nav> form{width: 100%;padding-left: 85px;padding-right: 50px;height: 40px;}.nav_header> .nav> form> input{width: 100%;height: 30px;border-radius: 15px;margin-top: 5px;padding-left: 30px;}.nav_header> .nav >form >.nav_search_icon{height: 20px;width: 20px;background:url("../img/top_search.png");background-size: 20px 20px;position: absolute;left: 90px;top: 10px;} ⾃动轮播实现步骤⼀：根据官⽹编写⾃动轮播html⽂件<div class="banner"><div><ul><li><a><img src="img/banner_01.jpg"></a></li><li><a><img src="img/banner_02.jpg"></a></li><li><a><img src="img/banner_03.jpg"></a></li><li><a><img src="img/banner_04.jpg"></a></li><li><a><img src="img/banner_05.jpg"></a></li></ul></div></div>步骤⼆：根据官⽹导⼊js⽂件，需要下载unslider.js，它是基于JQuery.js的，所以需要下载2个，导⼊到项⽬中 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script><script type="text/javascript" src="js/unslider.js"></script><script>$(function() {$('.banner').unslider({speed : 500,delay : 3000,nav : true,//是否启动导航图标dots: true,//是否出先圆点点arrows : false,autoplay : true //⾃动轮播});})</script> 步骤三：为了使图⽚能让我们⼿动滑动，还需要导⼊2个JQuery的库，导⼊之后就能⼿动滑动了<script type="text/javascript" src="js/jquery.event.move.js"></script><script type="text/javascript" src="js/jquery.event.swipe.js"></script> 步骤四：为了让图⽚能刚好100%显⽰出来，并且实现⾃动轮播导航圆点，需要在css中加⼊实现/*banner*/.banner ul li a img{width: 100%;}.unslider {overflow: auto;margin: 0;padding: 0;/*Added*/position: relative;}.unslider-nav{position: absolute;bottom: 2%;}⼗个选项按钮实现步骤⼀：编写html⽂件<nav class="item"><ul class="clearfix"><li><a href="#"><img src="img/nav_01.png" alt=""/> <p>京东超市</p></a></li><li><a href="#"><img src="img/nav_02.png" alt=""/> <p>全球购</p></a></li><li><a href="#"><img src="img/nav_03.png" alt=""/> <p>服装城</p></a></li><li><a href="#"><img src="img/nav_04.png" alt=""/> <p>京东⽣鲜</p></a></li><li><a href="#"><img src="img/nav_05.png" alt=""/> <p>京东到家</p></a></li><li><a href="#"><img src="img/nav_06.png" alt=""/> <p>充值中⼼</p></a></li><li><a href="#"><img src="img/nav_07.png" alt=""/> <p>京东⾦融</p></a></li><li><a href="#"><img src="img/nav_08.png" alt=""/> <p>领券</p></a></li><li><a href="#"><img src="img/nav_09.png" alt=""/> <p>物流查询</p></a></li><li><a href="#"><img src="img/nav_10.png" alt=""/> <p>我的关注</p></a></li></ul></nav> 步骤⼆：编写css⽂件/*item*/.item{width: 100%;height: 180px;background: #fff;border-bottom: 1px solid #e0e0e0;}.item> ul{width: 100%;}.item> ul> li{width: 20%;float: left;}.item> ul> li> a{width: 100%;display: block;padding-top: 20px;}.item> ul> li> a> img{width: 40px;height: 40px;display: block;margin: 0 auto;}.item> ul> li> a> p{text-align: center;color: #666;}商品区块的搭建思路分析：1、秒杀模块：可以分为头部的倒计时和内容部分三个li存放三个图，并且右边界为1px。

CSS导航栏及弹窗示例代码

CSS导航栏及弹窗⽰例代码最近整理了CSS导航栏及弹窗，具体如下：CSS导航先来看下效果：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>body{font-size:12px;}#discuss{width:990px;margin:0 auto;}#mt{/*⾼度：30px，边框，上边框，背景颜⾊*/height:30px;border:1px solid #ddd;border-top:2px solid #9d9d9d;background:#F7F7F7;}#discuss-content{border-bottom:1px solid #ddd;padding-bottom:2px;}#discuss-datas{width:990px;}#discuss-datas thead td{/*加粗，上下内边距，下边框，⽂本居中对齐*/font-weight:bold;padding:5px 0;border-bottom:1px solid #ddd;text-align:center;color:#666;}/*处理 .col1 的样式 (每⾏第⼀列的效果)*/#discuss-datas td.col1{width:620px;text-align:left;}/*内容⾏中所有的列*/#discuss-datas tbody td{/*虚线下边框，上下内边距，⽂本⽔平居中对齐，⽂本颜⾊*/border-bottom:1px dotted #ddd;padding:5px 0;text-align:center;color:#9c9a9c;}/*处理所有超链接*/#discuss a{color:#005aa0;text-decoration:none;}#discuss a:hover{text-decoration:underline;}/*晒，论两幅图*/#discuss-datas b{/*宽度，⾼度，背景属性*/padding-left:21px;padding-bottom:2px;padding-top:3px;background-image:url(../Images/iconlist_1.png); background-repeat:no-repeat;margin-right:5px;}b.shai{background-position:-110px -220px;}b.lun{background-position:-152px -220px;}/*2017-01-09 浮动练习*/#mt a{float:left;width:100px;height:30px;text-align:center;line-height:30px;}#mt a.current{/*左右上边框，背景颜⾊，⽂本颜⾊*/border:1px solid #ddd;border-bottom:none;border-top:2px solid #E4393C;background-color:#fff;color:#E4393C;/*位置上调:margin-top 给负值*/margin-top:-6px;height:35px;line-height:35px;}#extra p{margin:0;}/*⽅案1*//*#extra p.new{float:left;}#extra p.total{float:right;}#extra{overflow:hidden;}*//*⽅案2*/#extra p.total{float:right;}</style></head><body><div id="discuss"><div id="mt"><a href="#">⽹友讨论圈</a><a href="#" class="current">晒单帖</a><a href="#">讨论帖</a><a href="#">圈⼦帖</a><a href="#">问答帖</a></div><div id="discuss-content"><table id="discuss-datas"><thead><tr><td class="col1">主题</td><td>回复/浏览</td><td>作者</td><td>时间</td></tr></thead><tbody><tr><td class="col1"><b class="shai"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="lun"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="shai"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr><tr><td class="col1"><b class="lun"></b><a href="#">好⼤⼀瓶，不错</a></td><td>0/0</td><td><a href="#">2001年冬天</a> </td><td>2011-11-11 11:11:11</td></tr></tbody></table><div id="extra"><p class="total">共900个话题<a href="#">浏览全部话题</a></p><p class="new">有问题与其他⽤户讨论<a href="#">[发表帖⼦]</a></p></div></div></div></body></html>最后效果图：商城导航：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>#nav{/*宽度，⾼度，背景颜⾊，⽔平居中对齐*/width:990px;height:40px;background-color:#E64346;margin:0 auto;}#nav p{/*取消默认margin，宽度，⾼度，背景颜⾊*/margin:0;width:210px;height:40px;background-color:#CD2A2C;}#nav>p>a{/*左浮动，⾼度，⾏⾼，⽂字：加粗，⼤⼩，颜⾊，取消下划线*/ float:left;height:40px;line-height:40px;font-weight:bold;font-size:14px;color:#fff;text-decoration:none;padding-left:15px;}#nav>p>b{/*右浮动，宽度，⾼度，背景，位置*/float:right;width:20px;height:20px;background:url(../Images/iconlist_2.png) no-repeat -65px 0;margin:10px 10px 0 0;}#nav>p{float:left;}margin:0;padding:0;list-style:none;}#nav>ul li{float:left;}#nav>ul li a{/*宽度，⾼度，⾏⾼，⽂本：⽔平居中，⼤⼩，颜⾊，下划线，加粗*/ float:left;width:100px;height:40px;line-height:40px;text-align:center;font-size:14px;color:#fff;text-decoration:none;font-weight:bold;}#nav>ul li a:hover{background-color:#BD2A2C;}#container{width:990px;min-height:200px;margin:0 auto;}#cate_box{margin:0;padding:0;list-style:none;/*宽度，⾼度，背景颜⾊，左右下边框*/width:210px;min-height:400px;background-color:#FAFAFA;border:2px solid #CD2A2C;border-top:none;box-sizing:border-box;/*上内边距*/padding-top:5px;}#cate_box>li{/*左内边距，上下内边距，宽度，下边框(⽩⾊)*/padding:5px 0 5px 10px;width:196px;box-sizing:border-box;border-bottom:1px solid #fff;border-top:1px solid transparent;}#cate_box li:hover{border-top-color:#ddd;border-bottom-color:#ddd;background-color:#fff;}#cate_box li>a{color:#333;text-decoration:none;font-size:14px;}</style></head><body><nav id="nav"><p><a href="#">全部商品分类</a><b></b></p><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><a href="#">⾦融</a></li></ul></nav><div id="container"><ul id="cate_box"><li><a href="#">图书、⾳像、数字商品</a> </li><li><a href="#">家⽤电器</a></li></ul></div></body></html>导航列表弹框效果：初始状态：⿏标悬停时：<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><style>#my_jd{width:100px;height:30px;text-align:center;line-height:30px;border:1px solid #000;background-color:#fff;/*相对定位：配合 #menu 的绝对定位*/position:relative;cursor:pointer;}#menu{width:400px;height:100px;background-color:#fff;border:1px solid #000;/*绝对定位*/position:absolute;top:30px;left:-1px;/*隐藏*/display:none;}#my_jd:hover #menu{display:block;}#my_jd:hover #line{width:100px;position:absolute;border-top:1px solid #fff;}</style></head><body><div id="my_jd">我的京东<div id="menu">模拟我的京东弹出菜单</div><div id="line"></div></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

京东店铺装修代码全集

html+css_模拟京东导航栏制作

html+css_模拟京东导航栏制作⼜是⼀篇旧笔记，分享分享。

如题，是模拟京东导航栏进⾏的⼀个制作。

贴代码：html(有点粗糙有点多- -):1<ul class="first_navigation">2<div class="TopTitle"id="asd">全部商品分类</div>3<li><a href="#">图书、⾳像、数字商品</a>4<span></span>5<div class="book_content">6<div class="left_content">7<dl>8<dt><a href="#">电⼦书</a></dt>9<dd>10<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>11<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>1213</dd>14</dl>15<dl>16<dt><a href="#">数字⾳乐</a></dt>17<dd>18<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a>19<a href="#">乡村民谣</a><a href="#">有声读物</a>20</dd>21</dl>22<dl>23<dt><a href="#">⾳像</a></dt>24<dd>25<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>26</dd>27</dl>28<dl>29<dt><a href="#">⽂艺</a></dt>30<dd>31<a href="#">⼩说</a><a href="#">⽂学</a><a href="#">青春⽂学</a><a href="#">传记</a><a32href="#">艺术</a>33</dd>34</dl>35<dl>36<dt><a href="#">⼈⽂社科</a></dt>37<dd>38<a href="#">历史</a><a href="#">⼼理学</a><a href="#">政治/军事</a><a href="#">国学/古籍</a>39<a href="#">哲学/宗教</a><a href="#">社会科学</a>40</dd>41</dl>42<dl>43<dt><a href="#">经管励志</a></dt>44<dd>45<a href="#">经济</a><a href="#">⾦融与投资</a><a href="#">管理</a><a href="#">励志与成功</a>46</dd>47</dl>48<dl class="fore7">49<dt><a href="#">⽣活</a></dt>50<dd>51<a href="#">家教与育⼉</a><a href="#">旅游/地图</a><a href="#">烹饪/美⾷</a><a href="#">时尚/美妆</a> 52<a href="#">家居</a><a href="#">婚恋与两性</a><a href="#">娱乐/休闲</a><a href="#">健⾝与保健</a>53<a href="#">动漫/幽默</a><a href="#">体育/运动</a>54</dd>55</dl>56<dl>57<dt><a href="#">科技</a></dt>58<dd>59<a href="#">科普</a><a href="#">IT</a><a href="#">建筑</a><a href="#">医学</a><a href="#">60⼯业技术</a><a href="#">电⼦/通信</a><a href="#">农林</a><a href="#">科学与⾃然</a>61</dd>62</dl>63<dl>64<dt><a href="#">少⼉</a></dt>65<dd>66<a href="#">少⼉</a><a href="#">0-2岁</a><a href="#">3-6岁</a><a href="#">7-10岁</a>71<dt><a href="#">教育</a></dt>72<dd>73<a href="#">教材</a><a href="#">中⼩学教辅</a><a href="#">考试</a><a href="#">外语学习</a>74</dd>75</dl>76<dl>77<dt><a href="#">其它</a></dt>78<dd>79<a href="#">英⽂原版书</a><a href="#">港台图书</a><a href="#">⼯具书</a><a href="#">套装书</a>80<a href="#">杂志/期刊</a>81</dd>82</dl>83</div>84<div class="right_content">85<dl>86<dd>87<a href="/act/1XDZ6ShE5M7tTrl.html">88<img src="/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"89 width="194" height="70" title="\家电">90</a>91</dd>92<dd>93<a href="/act/v8kJIaPmsMGuebpH.html">94<img src="/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"95 width="194" height="70" title="⼩家电--三请聚宝盆">96</a>97</dd>98</dl>99<dl>100<dt>推荐品牌</dt>101<dd>102<a href="#">美的官⽅旗舰店</a>103</dd>104<dd>105<a href="#">苏泊尔旗舰店</a>106</dd>107<dd>108<a href="#">九阳旗舰店</a>109</dd>110<dd>111<a href="#">东菱旗舰店</a>112</dd>113<dd>114<a href="#">海尔统帅旗舰店</a>115</dd>116<dd>117<a href="#">⼩熊旗舰店</a>118</dd>119</dl>120</div>121</div>122</li>123<li><a href="#">家⽤电器</a>124<span></span>125<div class="book_content">126<div class="left_content">127<dl>128<dt><a href="#">书</a></dt>129<dd>130<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>131<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>132133</dd>134</dl>135<dl>136<dt><a href="#">数字⾳乐</a></dt>137<dd>138<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a>139<a href="#">乡村民谣</a><a href="#">有声读物</a>140</dd>141</dl>142<dl>143<dt><a href="#">⾳像</a></dt>144<dd>145<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>146</dd>147</dl>148<dl>149<dt><a href="#">⽂艺</a></dt>150<dd>156<dt><a href="#">⼈⽂社科</a></dt>157<dd>158<a href="#">历史</a><a href="#">⼼理学</a><a href="#">政治/军事</a><a href="#">国学/古籍</a>159<a href="#">哲学/宗教</a><a href="#">社会科学</a>160</dd>161</dl>162<dl>163<dt><a href="#">经管励志</a></dt>164<dd>165<a href="#">经济</a><a href="#">⾦融与投资</a><a href="#">管理</a><a href="#">励志与成功</a>166</dd>167</dl>168<dl class="fore7">169<dt><a href="#">⽣活</a></dt>170<dd>171<a href="#">家教与育⼉</a><a href="#">旅游/地图</a><a href="#">烹饪/美⾷</a><a href="#">时尚/美妆</a>172<a href="#">家居</a><a href="#">婚恋与两性</a><a href="#">娱乐/休闲</a><a href="#">健⾝与保健</a>173<a href="#">动漫/幽默</a><a href="#">体育/运动</a>174</dd>175</dl>176<dl>177<dt><a href="#">科技</a></dt>178<dd>179<a href="#">科普</a><a href="#">IT</a><a href="#">建筑</a><a href="#">医学</a><a href="#">180⼯业技术</a><a href="#">电⼦/通信</a><a href="#">农林</a><a href="#">科学与⾃然</a>181</dd>182</dl>183<dl>184<dt><a href="#">少⼉</a></dt>185<dd>186<a href="#">少⼉</a><a href="#">0-2岁</a><a href="#">3-6岁</a><a href="#">7-10岁</a>187<a href="#">11-14岁</a>188</dd>189</dl>190<dl>191<dt><a href="#">教育</a></dt>192<dd>193<a href="#">教材</a><a href="#">中⼩学教辅</a><a href="#">考试</a><a href="#">外语学习</a>194</dd>195</dl>196<dl>197<dt><a href="#">其它</a></dt>198<dd>199<a href="#">英⽂原版书</a><a href="#">港台图书</a><a href="#">⼯具书</a><a href="#">套装书</a>200<a href="#">杂志/期刊</a>201</dd>202</dl>203</div>204<div class="right_content">205<dl>206<dd>207<a href="/act/1XDZ6ShE5M7tTrl.html">208<img src="/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 209 width="194" height="70" title="\家电">210</a>211</dd>212<dd>213<a href="/act/v8kJIaPmsMGuebpH.html">214<img src="/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 215 width="194" height="70" title="⼩家电--三请聚宝盆">216</a>217</dd>218</dl>219<dl>220<dt>推荐品牌</dt>221<dd>222<a href="#">美的官⽅旗舰店</a>223</dd>224<dd>225<a href="#">苏泊尔旗舰店</a>226</dd>227<dd>228<a href="#">九阳旗舰店</a>229</dd>230<dd>231<a href="#">东菱旗舰店</a>232</dd>233<dd>234<a href="#">海尔统帅旗舰店</a>240</div>241</div>242</li>243<li><a href="#">⼿机、数码</a>244<span></span>245<div class="book_content">246<div class="left_content">247<dl>248<dt><a href="#">电⼦书</a></dt>249<dd>250<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>251<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>252253</dd>254</dl>255256</div>257258</div>259</li>260<li><a href="#">电脑、办公</a>261<span></span>262<div class="book_content">263<div class="left_content">264<dl>265<dt><a href="#">电⼦书</a></dt>266<dd>267<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>268<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>269270</dd>271</dl>272<dl>273<dt><a href="#">数字⾳乐</a></dt>274<dd>275<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a> 276<a href="#">乡村民谣</a><a href="#">有声读物</a>277</dd>278</dl>279<dl>280<dt><a href="#">⾳像</a></dt>281<dd>282<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>283</dd>284</dl>285<dl>286<dt><a href="#">⽂艺</a></dt>287<dd>288<a href="#">⼩说</a><a href="#">⽂学</a><a href="#">青春⽂学</a><a href="#">传记</a><a289href="#">艺术</a>290</dd>291</dl>292<dl>293<dt><a href="#">⼈⽂社科</a></dt>294<dd>295<a href="#">历史</a><a href="#">⼼理学</a><a href="#">政治/军事</a><a href="#">国学/古籍</a>296<a href="#">哲学/宗教</a><a href="#">社会科学</a>297</dd>298</dl>299<dl>300<dt><a href="#">经管励志</a></dt>301<dd>302<a href="#">经济</a><a href="#">⾦融与投资</a><a href="#">管理</a><a href="#">励志与成功</a>303</dd>304</dl>305<dl class="fore7">306<dt><a href="#">⽣活</a></dt>307<dd>308<a href="#">家教与育⼉</a><a href="#">旅游/地图</a><a href="#">烹饪/美⾷</a><a href="#">时尚/美妆</a> 309<a href="#">家居</a><a href="#">婚恋与两性</a><a href="#">娱乐/休闲</a><a href="#">健⾝与保健</a> 310<a href="#">动漫/幽默</a><a href="#">体育/运动</a>311</dd>312</dl>313<dl>314<dt><a href="#">科技</a></dt>315<dd>316<a href="#">科普</a><a href="#">IT</a><a href="#">建筑</a><a href="#">医学</a><a href="#">317⼯业技术</a><a href="#">电⼦/通信</a><a href="#">农林</a><a href="#">科学与⾃然</a>318</dd>323<a href="#">少⼉</a><a href="#">0-2岁</a><a href="#">3-6岁</a><a href="#">7-10岁</a>324<a href="#">11-14岁</a>325</dd>326</dl>327<dl>328<dt><a href="#">教育</a></dt>329<dd>330<a href="#">教材</a><a href="#">中⼩学教辅</a><a href="#">考试</a><a href="#">外语学习</a>331</dd>332</dl>333<dl>334<dt><a href="#">其它</a></dt>335<dd>336<a href="#">英⽂原版书</a><a href="#">港台图书</a><a href="#">⼯具书</a><a href="#">套装书</a>337<a href="#">杂志/期刊</a>338</dd>339</dl>340</div>341<div class="right_content">342<dl>343<dd>344<a href="/act/1XDZ6ShE5M7tTrl.html">345<img src="/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 346 width="194" height="70" title="\家电">347</a>348</dd>349<dd>350<a href="/act/v8kJIaPmsMGuebpH.html">351<img src="/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 352 width="194" height="70" title="⼩家电--三请聚宝盆">353</a>354</dd>355</dl>356<dl>357<dt>推荐品牌</dt>358<dd>359<a href="#">美的官⽅旗舰店</a>360</dd>361<dd>362<a href="#">苏泊尔旗舰店</a>363</dd>364<dd>365<a href="#">九阳旗舰店</a>366</dd>367<dd>368<a href="#">东菱旗舰店</a>369</dd>370<dd>371<a href="#">海尔统帅旗舰店</a>372</dd>373<dd>374<a href="#">⼩熊旗舰店</a>375</dd>376</dl>377</div>378</div>379</li>380<li><a href="#">家居、家具、家装、厨具</a>381<span></span>382<div class="book_content">383<div class="left_content">384<dl>385<dt><a href="#">电⼦书</a></dt>386<dd>387<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>388<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>389390</dd>391</dl>392<dl>393<dt><a href="#">数字⾳乐</a></dt>394<dd>395<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a>396<a href="#">乡村民谣</a><a href="#">有声读物</a>397</dd>398</dl>399<dl>400<dt><a href="#">⾳像</a></dt>401<dd>402<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>406<dt><a href="#">⽂艺</a></dt>407<dd>408<a href="#">⼩说</a><a href="#">⽂学</a><a href="#">青春⽂学</a><a href="#">传记</a><a409href="#">艺术</a>410</dd>411</dl>412<dl>413<dt><a href="#">⼈⽂社科</a></dt>414<dd>415<a href="#">历史</a><a href="#">⼼理学</a><a href="#">政治/军事</a><a href="#">国学/古籍</a>416<a href="#">哲学/宗教</a><a href="#">社会科学</a>417</dd>418</dl>419<dl>420<dt><a href="#">经管励志</a></dt>421<dd>422<a href="#">经济</a><a href="#">⾦融与投资</a><a href="#">管理</a><a href="#">励志与成功</a>423</dd>424</dl>425<dl class="fore7">426<dt><a href="#">⽣活</a></dt>427<dd>428<a href="#">家教与育⼉</a><a href="#">旅游/地图</a><a href="#">烹饪/美⾷</a><a href="#">时尚/美妆</a>429<a href="#">家居</a><a href="#">婚恋与两性</a><a href="#">娱乐/休闲</a><a href="#">健⾝与保健</a>430<a href="#">动漫/幽默</a><a href="#">体育/运动</a>431</dd>432</dl>433<dl>434<dt><a href="#">科技</a></dt>435<dd>436<a href="#">科普</a><a href="#">IT</a><a href="#">建筑</a><a href="#">医学</a><a href="#">437⼯业技术</a><a href="#">电⼦/通信</a><a href="#">农林</a><a href="#">科学与⾃然</a>438</dd>439</dl>440<dl>441<dt><a href="#">少⼉</a></dt>442<dd>443<a href="#">少⼉</a><a href="#">0-2岁</a><a href="#">3-6岁</a><a href="#">7-10岁</a>444<a href="#">11-14岁</a>445</dd>446</dl>447<dl>448<dt><a href="#">教育</a></dt>449<dd>450<a href="#">教材</a><a href="#">中⼩学教辅</a><a href="#">考试</a><a href="#">外语学习</a>451</dd>452</dl>453<dl>454<dt><a href="#">其它</a></dt>455<dd>456<a href="#">英⽂原版书</a><a href="#">港台图书</a><a href="#">⼯具书</a><a href="#">套装书</a>457<a href="#">杂志/期刊</a>458</dd>459</dl>460</div>461<div class="right_content">462<dl>463<dd>464<a href="/act/1XDZ6ShE5M7tTrl.html">465<img src="/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 466 width="194" height="70" title="\家电">467</a>468</dd>469<dd>470<a href="/act/v8kJIaPmsMGuebpH.html">471<img src="/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 472 width="194" height="70" title="⼩家电--三请聚宝盆">473</a>474</dd>475</dl>476<dl>477<dt>推荐品牌</dt>478<dd>479<a href="#">美的官⽅旗舰店</a>480</dd>481<dd>482<a href="#">苏泊尔旗舰店</a>483</dd>484<dd>485<a href="#">九阳旗舰店</a>486</dd>490<dd>491<a href="#">海尔统帅旗舰店</a>492</dd>493<dd>494<a href="#">⼩熊旗舰店</a>495</dd>496</dl>497</div>498</div>499</li>500<li><a href="#">服饰内⾐、珠宝⾸饰</a>501<span></span>502<div class="book_content">503<div class="left_content">504<dl>505<dt><a href="#">电⼦书</a></dt>506<dd>507<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>508<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>509510</dd>511</dl>512<dl>513<dt><a href="#">数字⾳乐</a></dt>514<dd>515<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a> 516<a href="#">乡村民谣</a><a href="#">有声读物</a>517</dd>518</dl>519<dl>520<dt><a href="#">⾳像</a></dt>521<dd>522<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>523</dd>524</dl>525<dl>526<dt><a href="#">⽂艺</a></dt>527<dd>528<a href="#">⼩说</a><a href="#">⽂学</a><a href="#">青春⽂学</a><a href="#">传记</a><a529href="#">艺术</a>530</dd>531</dl>532<dl>533<dt><a href="#">⼈⽂社科</a></dt>534<dd>535<a href="#">历史</a><a href="#">⼼理学</a><a href="#">政治/军事</a><a href="#">国学/古籍</a>536<a href="#">哲学/宗教</a><a href="#">社会科学</a>537</dd>538</dl>539<dl>540<dt><a href="#">经管励志</a></dt>541<dd>542<a href="#">经济</a><a href="#">⾦融与投资</a><a href="#">管理</a><a href="#">励志与成功</a>543</dd>544</dl>545<dl class="fore7">546<dt><a href="#">⽣活</a></dt>547<dd>548<a href="#">家教与育⼉</a><a href="#">旅游/地图</a><a href="#">烹饪/美⾷</a><a href="#">时尚/美妆</a> 549<a href="#">家居</a><a href="#">婚恋与两性</a><a href="#">娱乐/休闲</a><a href="#">健⾝与保健</a> 550<a href="#">动漫/幽默</a><a href="#">体育/运动</a>551</dd>552</dl>553<dl>554<dt><a href="#">科技</a></dt>555<dd>556<a href="#">科普</a><a href="#">IT</a><a href="#">建筑</a><a href="#">医学</a><a href="#">557⼯业技术</a><a href="#">电⼦/通信</a><a href="#">农林</a><a href="#">科学与⾃然</a>558</dd>559</dl>560<dl>561<dt><a href="#">少⼉</a></dt>562<dd>563<a href="#">少⼉</a><a href="#">0-2岁</a><a href="#">3-6岁</a><a href="#">7-10岁</a>564<a href="#">11-14岁</a>565</dd>566</dl>567<dl>568<dt><a href="#">教育</a></dt>569<dd>570<a href="#">教材</a><a href="#">中⼩学教辅</a><a href="#">考试</a><a href="#">外语学习</a>574<dt><a href="#">其它</a></dt>575<dd>576<a href="#">英⽂原版书</a><a href="#">港台图书</a><a href="#">⼯具书</a><a href="#">套装书</a>577<a href="#">杂志/期刊</a>578</dd>579</dl>580</div>581<div class="right_content">582<dl>583<dd>584<a href="/act/1XDZ6ShE5M7tTrl.html">585<img src="/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg" 586 width="194" height="70" title="\家电">587</a>588</dd>589<dd>590<a href="/act/v8kJIaPmsMGuebpH.html">591<img src="/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg" 592 width="194" height="70" title="⼩家电--三请聚宝盆">593</a>594</dd>595</dl>596<dl>597<dt>推荐品牌</dt>598<dd>599<a href="#">美的官⽅旗舰店</a>600</dd>601<dd>602<a href="#">苏泊尔旗舰店</a>603</dd>604<dd>605<a href="#">九阳旗舰店</a>606</dd>607<dd>608<a href="#">东菱旗舰店</a>609</dd>610<dd>611<a href="#">海尔统帅旗舰店</a>612</dd>613<dd>614<a href="#">⼩熊旗舰店</a>615</dd>616</dl>617</div>618</div>619</li>620<li><a href="#">个护化妆</a></li>621<li><a href="#">鞋靴、箱包、钟表、奢侈品</a>622<span></span>623<div class="book_content">624<div class="left_content">625<dl>626<dt><a href="#">电⼦书</a></dt>627<dd>628<a href="#">免费</a><a href="#">⼩说</a><a href="#">励志与成功</a><a href="#">婚恋/两性</a>629<a href="#">⽂学</a><a href="#">经管</a><a href="#">畅读VIP</a>630631</dd>632</dl>633<dl>634<dt><a href="#">数字⾳乐</a></dt>635<dd>636<a href="#">通俗流⾏</a><a href="#">古典⾳乐</a><a href="#">摇滚说唱</a><a href="#">爵⼠蓝调</a>637<a href="#">乡村民谣</a><a href="#">有声读物</a>638</dd>639</dl>640<dl>641<dt><a href="#">⾳像</a></dt>642<dd>643<a href="#">⾳乐</a><a href="#">影视</a><a href="#">教育⾳像</a><a href="#">游戏</a>644</dd>645</dl>646<dl>647<dt><a href="#">⽂艺</a></dt>648<dd>649<a href="#">⼩说</a><a href="#">⽂学</a><a href="#">青春⽂学</a><a href="#">传记</a><a650href="#">艺术</a>651</dd>652</dl>653<dl>654<dt><a href="#">⼈⽂社科</a></dt>。

js实现仿京东2级菜单效果（带延时功能）

js实现仿京东2级菜单效果（带延时功能）本⽂实例讲述了jquery实现仿京东2级菜单效果。

分享给⼤家供⼤家参考。

具体如下：这⾥介绍js实现仿京东2级菜单效果代码，带有延时功能，操作上更加舒适⾃然。

先来看看运⾏效果截图：在线演⽰地址如下：具体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>仿京东⽹站的2级菜单导航</title><style type="text/css">ul{margin:0;padding:0;list-style-type:none;}a{ text-decoration:none;}.mold_open_hover,.mold_open{background-image:url();background-repeat:none;display:inline-block;width:10px;height:6px;margin-left:10px;position:relative;top:-2px;}.mold_open{background-position:0 -6px;}.mold_open_hover{background-position:0 0;}.mod-menu{position:relative;z-index:1000;left:-1px;margin-left:100px;}h1{margin-left:100px;}.menu-cont-list a:hover{text-decoration:underline;}.mod-menu .menu-item{width:220px;border-top:solid 1px #d59bb2;border-bottom:solid 2px #d59bb2;position:relative;z-index:22;}.mod-menu .menu-item li{height:47px;line-height:47px;background:#feebf3;border-top:solid 1px #f0bfd3;}.mod-menu .menu-item li.mouse-bg{background:url() no-repeat #fff;position:relative;z-index:22;margin-right:-4px;}.mod-menu .menu-item a{color:#c81d61;font-size:16px;padding-left:33px;display:block;height:45px;border-top:solid 1px #f1f2f7;}.mod-menu .menu-item a:hover{ text-decoration:none;}.mod-menu .menu-cont{position:absolute;left:220px;top:1px;background:#fff;width:573px;border:solid 1px #F0BFD3;box-shadow:2px 0 10px rgba(210,33,103,0.25);z-index:20;} .mod-menu .menu-cont-list{padding:0 30px;}.mod-menu .menu-cont-list li{border-bottom:dotted 1px #f0bfd3;padding:10px 0;}.mod-menu .menu-cont-list li:last-child{border-bottom:none;}.mod-menu .menu-cont-list h3{font-size:14px;font-weight:700;}.mod-menu .menu-cont-list h3 a{color:#222;}.mod-menu .menu-list-link a{color:#666;line-height:24px;}.mod-menu .menu-list-link .long-string{color:#ccc;font-size:12px;padding:0 10px;}</style><script src="jquery-1.6.2.min.js" type="text/javascript"></script><script type="text/javascript">var l;var t;var menuItem;$(document).ready(menu_init);function menu_init(){var mod_menu=$(".mod-menu");//导航模块区menu();//执⾏展开⼆级菜单函//setTimeout(menu(),1000)}var menu=function(){menuItem=$(".menu-item li");//选择导航列表menuItem.each(menu_each);/*导航菜单菜单*/menuItem.mouseleave(menu1_leave);/*导航菜单菜单*/$(".mod-menu").mouseleave(menu2_mouse_leave);}//展开⼆级菜单var menu_each=function(){var _index=$(this).index();//获取当前选择菜单列表的索引$(this).mouseenter(menu_mouse_enter);}var menu_mouse_enter=function(){l = $(this);//获取当前⿏标滑过的列表的顶部坐标t=setTimeout("menu_mouse_enter_show()", 300)}function menu_mouse_enter_show(){// alert(y1);var y = l.position().top+1;//获取当前⿏标滑过的列表的顶部坐标$(".menu-cont").show();$(".menu-cont").css("top",y);//需要显⽰的对应索引内容l.addClass("mouse-bg").siblings().removeClass("mouse-bg");$(".menu-cont>div").eq(_index).show().siblings().hide();}var menu1_leave=function(){clearTimeout(t);var menu2_mouse_leave=function(){$(".menu-cont").hide();menuItem.removeClass("mouse-bg");}</script></head><body><h1>简单的2级菜单导航</h1><div class="mod-menu f-l"><div id="column-left"><ul class="menu-item"><li class=""><a href="#">Wedding</a></li><li class=""><a href="#">Women's Shoes</a></li><li class=""><a href="#">Accessories</a></li><li class=""><a href="#">Beauty & Health</a></li></ul><div class="menu-cont hide" style="display: none; top: 241px;"> <div class="menu-cont-list" style="display: none;"><ul><li><h3><a href="#">Wedding Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Bridesmaid Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Wedding Party Dresses</a></h3><div class="menu-list-link"><a title="" href="#">Mother of the Brides Dresses</a><span class="long-string">|</span><a title="" href="#">Flower Girl Dresses</a><span class="long-string">|</span><a title="" href="#">Wedding Guest Dresses</a></div></li><li><h3><a href="#">Wedding Accessories</a></h3><div class="menu-list-link"><a title="" #">Fabric Swatch</a><span class="long-string">|</span><a title="" href="#">Bridal Lingerie</a><span class="long-string">|</span><a title="" href="#">Wedding Flowers</a><span class="long-string">|</span><a title="" href="#">Wedding Petticoats</a></div></li></ul></div><div class="menu-cont-list" style="display: none;"><ul><li><h3><a href="#">Prom Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Military Ball Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Evening Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Cocktail Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Ball Gowns</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Homecoming Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Little Black Dresses </a></h3></div></li><li><h3><a href="#">Quinceanera Dresses</a></h3> <div class="menu-list-link"></div></li></ul></div><div class="menu-cont-list" style="display: none;"> <ul><li><h3><a href="#">Dresses</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Clubwear</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Leggings</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Lingeries</a></h3><div class="menu-list-link"><a title="" #">Bras</a><span class="long-string">|</span><a title="" href="#">Babydolls</a><span class="long-string">|</span><a title="" href="#">Panties</a><span class="long-string">|</span><a title="" href="#">Hosiery</a></div></li><li><h3><a href="#">Swimwear</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Activewear</a></h3><div class="menu-list-link"></div></li></ul></div><div class="menu-cont-list" style="display: none;"> <ul><li><h3><a href="#">Heels</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Pumps</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Boots</a></h3><div class="menu-list-link"></div></li></ul></div><div class="menu-cont-list" style="display: none;"> <ul><li><h3><a href="#">Evening Bags</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Hats & Scarves</a></h3><div class="menu-list-link"><a title="" href="#">Womens Hats</a><span class="long-string">|</span><a title="" href="#">Womens Scarves</a></div></li><li><h3><a href="#">Jewelry</a></h3><a title="" href="#">Earrings</a><span class="long-string">|</span><a title="" href="#">Necklaces</a><span class="long-string">|</span><a title="" href="#">Rings</a></div></li><li><h3><a href="#">Watches</a></h3><div class="menu-list-link"></div></li></ul></div><div class="menu-cont-list" style="display: block;"><ul><li><h3><a href="#">Wigs & Hair extensions</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Fascinators</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Makeup Tools</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Spas & Massagers</a></h3><div class="menu-list-link"></div></li><li><h3><a href="#">Health & Fitness</a></h3><div class="menu-list-link"></div></li></ul></div></div></div></div>若提⽰有错误，请刷新⽹页</body></html>希望本⽂所述对⼤家的jquery程序设计有所帮助。

html实现导航栏效果

html实现导航栏效果<!DOCTYPE html><html><head><meta charset="UTF-8"><title>导肮栏</title>/*导航栏样式开始*/<style>ul{height:60px;list-style: none;}li{padding: 15px;width: 100px;display: inline-block;float: left;background-color: darkred;}li a{display: inline-block;float: left;color: #fff;text-indent: 10px;text-decoration:none;}</style>/*导航栏样式结束*/</head><body><div><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></body></html>。

html+css+js原生项目--京东商城（有源码）

html+css+js原⽣项⽬--京东商城（有源码）⼀、项⽬来源慕课⽹—⼿把⼿从0打造电商⽹页开发源码：右侧资料下载⼆、摘要1.基本框架搭建(三、1-3)2.实现html+css效果，⼀些要点笔记(三、4-8)3.js效果步骤分析（三、9-10）4.做完感受(四)三、开始构建1.先搭建基本页⾯结构，并⽤link连接到⾸页2.搭建页⾯⾻骼页⾯分为三⼤块，导航，⾸部和内容<container> ：body下最⼤单位，包裹所有内容导航 .nav.nav-box：⼤⼩、背景颜⾊⾸部.header：.head-box:⼤⼩，居中对齐，弹性布局，内边距三⼤块内容，两侧两块⼴告图⽚+中间的内容中间：最⼤块：宽、内边距下级⼤块：内边距和弹性布局内容.warpper3.dl dt dd:类似表格样式<dl><dt>xxx<dd>yyy</dd><dd>yyy</dd>…</dt><dt>…</dt><dl>效果4.flex-shrink:0；如果⼀个元素的属性是0则不压缩（弹性布局后⾯多的将前⾯移位，使⽤后后⾯⾃动折⾏，不会压迫前⾯的内容）解决下图问题:弹性布局后⾯多的将前⾯移位使⽤后5.css布局中的注意点为了兼容性 button按钮要加type="button"reset.css：初始化样式，重置样式原因：不同的浏览器的页⾯初始化设置都不同，需要我们⼿动重置，达到统⼀居中显⽰技巧：margin:0px auto;<img src="" alt="">alt 属性：是⼀个必需的属性，它规定在图像⽆法显⽰时的替代⽂本设为Flex 布局（默认从左到右依次排列）以后，⼦元素的float、clear和vertical-align属性将失效。

使用递归制作仿京东淘宝的商品分类导航栏

使⽤递归制作仿京东淘宝的商品分类导航栏前些天，培训的⽼师布置了作业，制作商城的⼀些重要功能，昨天做了⼀下其中⽐较难的商品分类导航类，使⽤了递归的⽅法。

ps：使⽤的是WebForm，希望看到MVC的同学请忽略。

最终效果图：下⾯记录⼀下：⾸先是数据库部分，使⽤的是SQL，在⼀张叫做Category的表中，设置了以下字段：[Id] 分类的Id，int，⾃增长[Name] 分类的名称，nvarchar(50)[ParentId] ⽗类的Id，int[Link] 链接地址，varchar(max)，⽤于打开链接，也可以通过Get传Id这⾥只模拟了⼀部分数据，从85开始，有6个⼦类的测试数据，原本是做书店的后台数据库，但我追加了⼀部分数据，不影响功能的实现。

三层中的Model层，Category类：1using System.Collections.Generic;23namespace Cong.Model4 {5//根节点6public class Category7 {8public int Id { get; set; }910public string Name { get; set; }1112public int ParentId { get; set; }1314public string Link { get; set; }15//⼦类集合16public List<Category> Children { get; set; }1718public Category()19 {20this.Children = new List<Category>();21 }2223public Category(int id,string name,int parentid,string link)24 {25this.Id = id; = name;27this.ParentId = parentid;28this.Link = link;29this.Children = new List<Category>();30 }31 }32 }三层中的Dao层，CategoryDao类：1using Cong.Model;2using Cong.Utility;3using System.Collections.Generic;4using System.Data.SqlClient;56namespace Cong.Dao7 {8public class CategoryDao9 {10public IEnumerable<Category> GetAllCate()11 {12string sql = "select * from Category";13 SqlDataReader reader = SqlHelper.ExecuteReader(sql);14if (reader.HasRows)15 {16while (reader.Read())17 {18 Category cate=SqlHelper.MapEntity<Category>(reader);19yield return cate;20 }21 }22 }23 }24 }三层中的Bll层，CategoryBll类：1using Cong.Dao;2using Cong.Model;3using System.Collections.Generic;4using System.Linq;56namespace Cong.Bll7 {8public class CategoryBll9 {10 CategoryDao cd = new CategoryDao();1112public Category GetCategorys()13 {14 List<Category> list = cd.GetAllCate().ToList();1516 Category root = new Category();17//为节点对象root添加⼦类，主要是parentId为0的对象18 root.Children.AddRange(from c in list where c.ParentId == 0select c);19//执⾏递归⽅法20 AddNode(root, list);2122return root;23 }2425//参数1：传⼊⼀个Category类型的节点，这⾥从root开始，26//参数2：第⼆个参数就是全部分类的集合，⽤于检索27public void AddNode(Category cate, List<Category> list)28 {29for (int i = 0; i < cate.Children.Count; i++)30 {31//临时集合对象，存放parentId与⽗类的Id相等的对象32 List<Category> temp = (from c in list where c.ParentId == cate.Children[i].Id select c).ToList(); 33//加⼊到Children属性中34 cate.Children[i].Children.AddRange(temp);35//递归，执⾏⽅法本体36 AddNode(cate.Children[i], list);37 }38 }39 }40 }Html页⾯的后台代码：1using Cong.Bll;2using Cong.Model;3using System;4using System.Collections.Generic;5using System.Linq;6using System.Web;7using System.Web.UI;8using System.Web.UI.WebControls;910namespace WebApp11 {12public partial class master : System.Web.UI.MasterPage13 {14protected Category root { get; set; }1516protected void Page_Load(object sender, EventArgs e)17 {18 CategoryBll cb = new CategoryBll();1920 root = cb.GetCategorys();21 }22 }23 }定义了root属性，把从Bll层查找到的数据存到root，便于前端代码输出。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<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="#">SEO</a></li>
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{
</style>
</head>
<body>
<div class="my_left_category">
<h1>分类导航</h1>
<div class="my_left_cat_list">
<h2><a href="#">按网站类别</a></h2>
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
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 {
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
display:block;
padding-left:8px;
}
.my_left_category h3 span{color:#999999; width:145px; float:right;}
.my_left_category h3 a{line-height:26px;}
.my_left_category .h3_cat{
width:204px;
}
.my_left_category .shadow_border{
position:inherit;
width:200px;
border:1px solid #959595; margin-top:1px;
border-left-width:0px;
1122123<img src=/texiao/0/2010052223045310.gif>2244234background:url(/texiao/0/2010052223045310.gif) no-repeat 0px 21px;
</div>
</div>
</div>
</div>

<h2><a href="#">按品牌选货</a></h2>
<div class="h2_cat" onmouseover="this.className='h2_cat active_cat'" onmouseout="this.className='h2_cat'">
width:148px;
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;
<li><a href="#">推广</a></li>
<li><a href="#">建网站</a></li>
<li><a href="#">网站推广</a></li>
<li><a href="#">网站建设</a></li>
<li><a href="#">SEO</a></li>
</ul>
</div>
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;
<div class="h3_cat">
<div class="shadow">
<div class="shadow_border">
<ul>
<li><a href="#">LOGO设计</a></li>
<li><a href="#">源码下载</a></li>
<li><a href="#">最新更新</a></li>
color:#d6290b;
font-weight:bold;
font-size:14px;
line-height:22px;
}
.my_left_category .h2_cat{
width:148px;
height:26px;
background-image:url(/upload/360buy/my_menubg.gif);
<li><a href="#">下载排行</a></li>
<li><a href="#">ASP</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">AJAX</a></li>
<li><a href="#">DELPHI</a></li>
</ul>
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 {
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;}
<head>
<meta http-equiv="Content-Type" mrc="text/html; charset=utf8" />
<title>京东商城导航条 </title>
<style type="text/css">
.my_left_category{
width:150px;
font-size:12px;