京东商城弹出式导航代码

合集下载

JS实现京东首页之页面顶部、Logo和搜索框功能

JS实现京东⾸页之页⾯顶部、Logo和搜索框功能昨天我们主要讲了京东⾸页的基本布局，今天我们主要来逐步实现京东⾸页的页⾯顶部、Logo&搜索框。

⾸先我们来看下我们今天将要实现的效果：下⾯页⾯布局详细分析：1、页⾯头部分三个部分依次实现：五⾓星图、收藏京东、右边⽂字部分（⽤列表实现）；其中当⿏标停放在⼿机京东上，⼿机背景图发⽣变化，变成红⾊带jd的图案；当⿏标悬停在客服服务上，出现下拉列表。

2、Logo&搜索框分四个部分实现：左边京东Logo、中间搜索框（上部：快速搜索；下部：热门搜索）、右部我的京东&去购物车（步骤类似我的京东，省略）分析图：具体实现代码如下：jd_index.html<!doctype html><html><head><title>Insert your title</title><meta charset="utf-8"><link rel="stylesheet" href="jd_index.css"></head><body><header id="top"><img class="lf" src="Images/star.jpg"><a href="#" class="lf">收藏京东</a><ul class="rt"><li>您好，欢迎来到京东<a href="#">[登录]</a><a href="#">[免费注册]</a></li><li><b></b> <a href="#">我的订单</a></li><li class="vip"><b></b> <a href="#">会员俱乐部</a></li><li class="dakehu"><b></b> <a href="#">企业频道</a></li><li class="app_jd"><b></b> <a href="#">⼿机京东</a></li><li class="service"><b></b> <a href="#">客户服务</a><ul id="service_items"><li><a href="#">帮助中⼼</a></li><li><a href="#">帮助中⼼</a></li><li><a href="#">帮助中⼼</a></li><li><a href="#">帮助中⼼</a><a href="#">帮助中⼼</a></li></ul></li><li><b></b> <a href="#">⽹站导航</a></li></ul></header><div id="top_main"><a href="#" class="lf"><img src="Images/logo-201305.png"></a><div id="search_box"><div class="search"><input class="txtSearch"><button>搜索</button></div><div class="hot_words"><span>热门搜索：</span><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a><a href="#">家纺11⽉⼤促</a><a href="#">彩虹电热毯</a><a href="#">博洋家纺</a><a href="#">霞珍</a></div></div><div id="my_jd">我的京东<b></b></div><div class="clear"></div></div><nav id="nav">主导航</nav><div id="banner">banner⼴告部分</div><section id="main">页⾯主体</section><footer id="foot_box">配送⽅式</footer><footer id="footer">备案号</footer></body></html>外部样式：jd_index.css/*测试属性*/#nav,#banner,#main,#foot_box,#footer{border:1px solid black;}/*通⽤*/body{font:12px "microsoft yahei",Arial,Helvetica,sans-serif; color:#666;margin:0;}ul,p,h1,h2,h3,h4,h5,h6,ol,dl,dd{margin:0;padding:0;list-style:none;}img{vertical-align:bottom;}a{color:#666;text-decoration:none;}a:hover{color:#FF0700;text-decoration:underline;}.lf{float:left;}.rt{float:right;}.clear{clear:both;}/**布局元素样式**/#top,#top_main,#nav,#banner,#main,#foot_box,#footer{}/*******1、页⾯顶部**********/#top{/*⾼度，⾏⾼，背景颜⾊，下边框*/height:30px;line-height:30px;background-color:#f7f7f7;border-bottom:1px solid #eee;}#top>img{margin-top:10px;margin-right:5px;}/*⽂字列表*/#top>ul>li{float:left;margin-right:10px;}#top>ul b{border-left:1px solid #ddd;margin-right:10px;}/*会员俱乐部*/li.vip a{padding-left:34px;background:url(Images/vip.jpg) no-repeat left center;}/*⼤客户*/li.dakehu a{padding-left:31px;background:url(Images/dakehu.jpg) no-repeat left center;}/*⼿机京东*/li.app_jd a{/*左内边距，⾏内块，⾼度，⾏⾼，背景*/padding-left:23px;display:inline-block;height:22px;line-height:22px;background:url(Images/iconlist_2.png) no-repeat -128px -360px;}li.app_jd a:hover{background-position:-128px -399px;}/*客户服务*/li.service>a{/*左右内边距模拟宽度*/padding:0 15px;/*⾼度，⾏⾼*/display:inline-block;height:26px;line-height:26px;/*背景图像：⽔平偏右，垂直居中*/background:url(Images/jt_down.jpg) no-repeat 95% center;/*左右上边框：透明*/border:1px solid transparent;border-bottom:none;}/*客户服务-弹出菜单*/li.service{/*相对定位：配合#service_items 做绝对定位*/position:relative;}#service_items{/*宽度，边框，背景颜⾊，⽂本⽔平居中，定位*/box-sizing:border-box;width:80px;border:1px solid #ddd;border-top:none;background-color:#fff;text-align:center;/*绝对定位*/position:absolute;top:28px;left:11px;/*默认隐藏*/display:none;}/*当⿏标移⼊到li.service上时，找到其⼦级#service_items ,并且显⽰*/ li.service:hover #service_items{display:block;}/*当⿏标移⼊到li.service上时，找到其直接⼦级a标记，设置样式*/ li.service:hover>a{border-color:#ddd;background-color:#fff;background-image:url(Images/jt_up.jpg);}/**********2、LOGO 和搜索框************/#top_main{padding:10px 0;}/*搜索框和搜索按钮和热门搜索*/#search_box{/*左浮动，宽度，左右外边距，min-height*/float:left;width:500px;margin:0 80px 0 40px;min-height:30px;}#search_box div.search{/*⾼度，背景颜⾊*/height:30px;background-color:#e4393c;/*边框*/padding:3px;}/*宽度，⾼度，取消边框*/width:410px;height:30px;border:none;box-sizing:border-box;padding-left:10px;}#search_box button{/*宽度，⾼度，取消边框，背景颜⾊*/width:80px;height:28px;border:none;background-color:#E4393C;/*⽂字：⼤⼩，颜⾊，加粗*/font-size:14px;color:#fff;font-weight:bold;}/*热门搜索*/#search_box div.hot_words{/*上外边距*/margin-top:5px;/*宽度，⾼度，溢出隐藏*/width:500px;height:16px;overflow:hidden;}#search_box div.hot_words span{color:#999;}#search_box div.hot_words a{color:#999;}/*我的京东*/#my_jd{/*左浮动，边框，背景*/float:left;border:1px solid #EFEFEF;background-color:#f7f7f7;/*⾼度，左内边距，背景图像*/ /*20*17*/padding-left:30px;height:27px;line-height:27px;background-image:url(Images/iconlist_2.png);background-repeat:no-repeat;background-position:-116px -25px;padding-right:5px;}#my_jd:hover{background-color:#fff;background-position:-116px -55px;}#my_jd b{/*⾏内块，宽度，⾼度，边框 */display:inline-block;width:0px;height:0px;border:5px solid transparent;border-top-color:#ccc;/*相对定位：实现该元素的位置微调*/position:relative;top:3px;}以上所述是⼩编给⼤家介绍的JS实现京东⾸页之页⾯顶部、Logo和搜索框功能，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。

【前端学习分享】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;}。

我写的京东页面代码

我写的京东页⾯代码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，有很多不⾜之处，希望各位⼤神多多指教。

京东商城弹出式导航代码

.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;}
.user_menu ul li:hover ul .fl1 .fl2 a:hover {text-decoration:underline;}
.user_menu ul li:hover .tanchu {width:120px;height:auto;overflow:hidden;padding-top:0px;font-size:12px;}
.user_menu ul li:hover .tanchu a:hover {background-color:#C30D23;color:white;}</style>
<div class="user_menu">
<ul>
<li>
<div class="fl2">
<a href="/view_search-144316-887121-1-0-20-1.html" target="_blank">普洱茶</a><a href="/view_search-144316-887122-1-0-20-1.html" target="_blank">安化黑茶</a><a href="#" target="_blank"></a>

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

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

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完成了菜单的简单效果，如果需要美化，请您在实际应⽤中⾃⼰搞⼀下吧，兼容性⾮常不错的，欢迎⼤家使⽤。

弹出窗口代码

弹出窗口代码经常上网的朋友可能会到过这样一些网站，一进入首页立刻会弹出一个窗口，或者按一个连接或按钮弹出，通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。

其实制作这样的页面效果非常的容易，只要往该页面的HTML里加入几段Javascript 代码即可实现。

下面俺就带您剖析它的奥秘。

【1、最基本的弹出窗口代码】其实代码非常简单：<SCRIPT LANGUAGE="javascript"></SCRIPT>因为着是一段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签和</script>之间。

是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。

要养成这个好习惯啊。

window.open (‘page.html‘) 用于控制弹出新的窗口page.html，如果page.html不与主窗口在同一路径下，前面应写明路径，绝对路径(http://)和相对路径(../)均可。

用单引号和双引号都可以，只是不要混用。

这一段代码可以加入HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越前越早执行，尤其是页面代码长，又想使页面早点弹出就尽量往前放。

【2、经过设置后的弹出窗口】下面再说一说弹出窗口的设置。

只要再往上面的代码中加一点东西就可以了。

我们来定制这个弹出的窗口的外观，尺寸大小，弹出的位置以适应该页面的具体情况。

<SCRIPT LANGUAGE="javascript"></SCRIPT>参数解释：<SCRIPT LANGUAGE="javascript"> js脚本开始；window.open 弹出新窗口的命令；‘page.html‘ 弹出窗口的文件名；‘newwindow‘ 弹出窗口的名字（不是文件名），非必须，可用空‘‘代替；height=100 窗口高度；width=400 窗口宽度；top=0 窗口距离屏幕上方的象素值；left=0 窗口距离屏幕左侧的象素值；toolbar=no 是否显示工具栏，yes为显示；menubar，scrollbars 表示菜单栏和滚动栏。

经典实用--多种网站弹窗源码

现在我将这里的一些参数说明一下。
dialogHeight: iHeight 设置对话框窗口的高度。
dialogWidth: iWidth 设置对话框窗口的宽度。
dialogLeft: iXPos 设置对话框窗口相对于桌面左上角的left位置。
dialogห้องสมุดไป่ตู้op: iYPos 设置对话框窗口相对于桌面左上角的top位置。
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (documents.cookie.length > 0) {
offset = documents.cookie.indexOf(search)
status: {yes | no | 1 | 0 } 指定对话框窗口是否显示状态栏。对于非模式对话框窗口，默认值是“yes”；对于模式对话框窗口，默认值是 “no”。
六、弹出n 个窗口
这很简单，只要执行n 次window.open()就行了，当然一定要给每个窗口起不同的名字，
还有，设置一下left和top，避免重叠。
四、打开一个连标题栏都没有的窗口（无标题、最小、最大、以及关闭按钮）
[/code]
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<script language="javascript">

html开网站弹窗代码大全,网页弹窗代码大全

【3、⽤函数控制弹出窗⼝】下⾯是⼀个完整的代码。

...任意的页⾯内容...这⾥定义了⼀个函数openwin(),函数内容就是打开⼀个窗⼝。

在调⽤它之前没有任何⽤途。

怎么调⽤呢?⽅法⼀：浏览器读页⾯时弹出窗⼝;⽅法⼆：浏览器离开页⾯时弹出窗⼝;⽅法三：⽤⼀个连接调⽤：注意：使⽤的"#"是虚连接。

⽅法四：⽤⼀个按钮调⽤：value="打开窗⼝">【4、同时弹出2个窗⼝】对源代码稍微改动⼀下：为避免弹出的2个窗⼝覆盖，⽤top和left控制⼀下弹出的位置不要相互覆盖即可。

最后⽤上⾯说过的四种⽅法调⽤即可。

注意：2个窗⼝的name(newwindows和newwindow2)不要相同，或者⼲脆全部为空。

ok?【5、主窗⼝打开⽂件1.htm，同时弹出⼩窗⼝page.html】如下代码加⼊主窗⼝区：加⼊区：即可。

【6、弹出的窗⼝之定时关闭控制】下⾯我们再对弹出的窗⼝进⾏⼀些控制，效果就更好了。

如果我们再将⼀⼩段代码加⼊弹出的页⾯(注意是加⼊到page.html的html中，可不是主页⾯中，否则...)，让它10秒后⾃动关闭是不是更酷了?⾸先，将如下代码加⼊page.html⽂件的区：function closeit(){settimeout("self.close()",10000) //毫秒}然后，再⽤这⼀句话代替page.html中原有的这⼀句就可以了。

(这⼀句话千万不要忘记写啊!这⼀句的作⽤是调⽤关闭窗⼝的代码，10秒钟后就⾃⾏关闭该窗⼝。

)【7、在弹出窗⼝中加上⼀个关闭按钮】οnclick='window.close()'>呵呵，现在更加完美了!【8、内包含的弹出窗⼝-⼀个页⾯两个窗⼝】上⾯的例⼦都包含两个窗⼝，⼀个是主窗⼝，另⼀个是弹出的⼩窗⼝。

通过下⾯的例⼦，你可以在⼀个页⾯内完成上⾯的效果。

function openwin(){openwindow=window.open("", "newwin", "height=250,width=250,toolbar=no,scrollbars="+scroll+",menubar=no");//写成⼀⾏openwindow.document.write("例⼦")openwindow.document.write("bgcolor=#ffffff>")openwindow.document.write("hello!")openwindow.document.write("new window opened!")openwindow.document.write("")openwindow.document.write("")openwindow.document.close()}value="打开窗⼝">看看openwindow.document.write()⾥⾯的代码不就是标准的html吗?只要按照格式写更多的⾏即可。

Javascript弹窗代码大全(收集)

Javascript弹窗代码大全(收集)Javascript弹窗代码大全(收集)2007年08月27日星期一 20:56以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。

首先，将如下代码加入主页面html的<head>区：<script>function openwin(){window.open(”page.html”,”",”width=200,height=200″)}function get_cookie(name){var search = name + “=”var returnvalue = “”;if (documents.cookie.length > 0) {offset = documents.cookie.indexof(search)if (offset != -1) {offset += search.lengthend = documents.cookie.indexof(”;”, offset);if (end == -1)end = documents.cookie.length;returnvalue=”/unescape(documents.cookie.substring(offset,end))”}}return returnvalue;}function loadpopup(){if (get_cookie(’popped’)==”){openwin()documents.cookie=”popped=yes”}}</script>然后，用<body onload=”loadpopup()”>（注意不是openwin而是loadpop啊！）替换主页面中原有的<body>这一句即可。

你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

京东店铺装修代码全集

（京东商城）店铺装修代码大全首先旗舰店店铺设计代码一、大背景不平铺<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;}/*。

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程序设计有所帮助。

用于团购网站的橙色导航菜单代码

用于团购网站的橙色导航菜单代码用于团购网站的橙色导航菜单代码这是一款橙色风格的CSS菜单，没有使用Javascript技术，完全CSS代码实现，当初主要是想用在团购网站上，大家修改一下，可以用在各种各样的网站上。

菜单两头的那个布局或许是你要研究的重要吧。

运行效果截图如下：具体代码如下代码如下:<!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=gb2312" /><title>橙色团购网站导航菜单</title><style>* {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_box { width:960px; height:44px; background:url(images/nav_bg.jpg); margin:0 auto;position:relative; overflow:visible; margin-top:100px; } .nav_box_l { width:32px; height:57px; background:url(images/nav_left.png) no-repeat; position:absolute; left:-32px; top:0; }.nav_box_r { width:31px; height:57px; background:url(images/nav_right.png) no-repeat; position:absolute; right:-31px; top:0; }.nav_box li { float:left; padding:0 30px; font-size:16px; font-weight:bold; line-height:40px; list-style:none;}.nav_box li.li_r { float:right; padding:0 10px; font-size:16px; line-height:40px; color:#FFF; font-size:12px }.nav_box li a { color:#FFF; text-decoration:none }.nav_box li a.font_min { font-weight:400; }</style></head><body style="text-align:center"><P class="nav_box"><P class="nav_box_l"></P><P class="nav_box_r"></P><P class=""><ul><li><a linkindex="16" href="#">今日团购</a></li><li><a linkindex="17" href="#">往期团购</a></li><li><a linkindex="18" href="#">玩转团购</a></li><li><a linkindex="19" href="#">常见问题</a></li><li class="li_r"><a href="#">登录</a> | <a href="#">注册</a></li><li class="li_r"><a linkindex="20" href="#" > <<邀请好友购买返10 元 </a></li></ul></P></body></html>【用于团购网站的橙色导航菜单代码】。

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>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

京东商城网站导航分析

支付页面
序列图
订单序列
支付序列模式面板
Company Logo

1 2
商品页面
用户页面支付页面
总结
3
4
Company Logo

总结
1 2 3
充分的全局导航可以快捷的到达网页的一级目录，减少了深入网页的逐级返回的繁琐。
序列图、模式面板、面包屑的组合使用使用户了解当前所在的页面，不会感到“迷茫”。
简洁、鲜明的人性组织结构，简单、快捷的购物操作使用户体验更舒适更满意。
Company Logo
LOGO

1面
总结
3
4
Company Logo

支付页面
支付流程
加入购物车结算
其中采用了序列图、模式面板等导航模式，使用户更好地购物。
填订单提交订单
提交订单
Company Logo

Company Logo

商品页面
全局导航
顶端全局导航
底端全局导航
通用的全局导航可以帮助用户方便到达常用的页面
Company Logo

商品页面
条件筛选导航
条件筛选丰富，可以组合多个条件筛选，帮助用户更快的找到合适的商品，同时下面的高级搜索按钮可以在需要时显示，满足详细搜索
用户页面
注册页面
明显的导航标签和安全舱口且没有多余的深入跳转页面，用户可以快捷的注册并不会误点造成“迷路”
Company Logo

用户页面
个人页面
多面板拼接，采用全局导航、面包屑导航，色彩编码章节等导航可以明确各个板块

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程序设计有所帮助。

Javascript弹窗代码大全(收集)

弹窗代码大全(收集)以下包括强制弹窗 24小时IP弹窗延时弹窗退弹等我们使用cookie来控制一下就可以了。

你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。

真正的pop-only-once！写到这里弹出窗口的制作和应用技巧基本上算是完成了，俺也累坏了，一口气说了这么多，希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

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

.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>
.user_menu ul li .biaoti {display:block;width:120px;height:30px;overflow:hidden;text-align:center;line-height:30px;margin-right:1px;color:white;text-decoration:none;transition:all 0.4s ease;-moz-transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-o-transition:all 0.4s ease;}
<style type="text/css">.user_menu {width:990px;z-index:1;position:absolute;font-family:microsoft yahei;font-size:13px;margin:0 auto;}
.user_menu .mt {display:none;}
.user_menu ul li .biaoti:hover {background-color:#E60012;}
.user_menu ul li ul {display:none;}
.user_menu ul li:hover {background-color:#E60012;}
.user_menu ul li:hover ul {display:block;width:990px;height:auto;background-color:#DCDDDD;position:absolute;top:30px;left:0px;padding-bottom:10px;padding-top:10px;z-index:1;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90);opacity:0.9;}
.user_menu ul li:hover .tanchu a:hover {background-color:#C30D23;color:white;}</style>
<div class="user_menu">
<ul>
<li>
<a href="/view_search-144316-0-5-1-24-1.html" target="_blank" class="biaoti all">查看所有商品</a>
.user_menu ul li:hover ul .fl1 .fl2 a:hover {text-decoration:underline;}
.user_menu ul li:hover .tanchu {width:120px;height:auto;overflow:hidden;padding-top:0px;font-size:12px;}
<div class="fl2">
<a href="/view_search-144316-907261-1-0-20-1.html" target="_blank">大红袍</a><a href="/view_search-144316-907262-1-0-20-1.html" target="_blank">铁观音</a><a href="/view_search-144316-907263-1-0-20-1.html" target="_blank">老枞水仙</a><a href="/view_search-144316-937673-1-0-20-1.html" target="_blank">铁罗汉</a><a href="#" target="_blank"></a>
<ul>
<div class="fl1">
<a class="title2" href="/view_search-144316-809019-1-0-20-1.html" target="_blank">绿茶</a>
<div class="fl2">
.user_menu ul {width:990px;height:30px;background-color:#C30D23;padding:0;margin:0 auto;list-style:none; }
.user_menu ul li {float:left;margin:0px;position:relቤተ መጻሕፍቲ ባይዱtive;}
.user_menu ul li .all {padding-right:15px;background:url(/cms/g13/M08/15/0C/rBEhU1J53pMIAAAAAAAAUfY5SdkAAFEjAP_-3UAAABp387.gif) 105px top no-repeat #C30D23;}
<div class="fl2">
<a href="/view_search-144316-844160-1-0-20-1.html" target="_blank">黄山贡菊</a><a href="#" target="_blank"></a>
</div>
</div>
<div class="fl1">
<a class="title2" href="/view_search-144316-907260-1-0-20-1.html" target="_blank">乌龙茶</a>
.user_menu ul li:hover ul .fl1 .fl2 {width:840px;height:auto;float:right;border-bottom:1px dashed #C30D23;}
.user_menu ul li:hover ul .fl1 .fl2 a {display:block;width:auto;height:30px;overflow:hidden;padding:0px 10px 0px;float:left;line-height:30px;text-align:center;text-decoration:none;color:#231815;}
.user_menu ul li:hover .tanchu a {display:block;width:120px;height:30px;overflow:hidden;bakcground-color:black;color:black;line-height:30px;text-align:center;text-decoration:none;}
<div class="fl2">
<a href="/view_search-144316-887121-1-0-20-1.html" target="_blank">普洱茶</a><a href="/view_search-144316-887122-1-0-20-1.html" target="_blank">安化黑茶</a><a href="#" target="_blank"></a>