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;}/*。

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;