登录部分HTML+CSS：
Copyright © 2004-2016 京东JD.com 版权所有
html/京东项目/京东网页高仿/js/jq/css/java web/
*****************************************************************************************************************************************************
京东主页部分HTML+js+css：
家用电器>
手机、运营商、数码>
电脑、办公>
家居、家具、家装、厨具>
男装、女装、童装、内衣>
个护化妆、清洁用品>
鞋靴、箱包、钟表、奢侈品>
运动户外>
汽车、汽车用品>
母婴、玩具乐器>
食品、酒类、生鲜、特产>
营养保健>
图书、音像、电子书>
彩票、旅行、充值、票务>
理财、众筹、白条、保险>
<
>
- 国际大牌◆
- 国妆名牌◆
- 清洁用品◆
- 男士精品
关于我们 |
联系我们 |
联系客服 |
商家入驻 |
营销中心 |
手机京东 |
友情链接 |
销售联盟 |
京东社区 |
风险监测 |
京东公益 |
English Site |
Contact Us
京公网安备 11000002000088号 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号
互联网出版许可证编号新出网证(京)字150号 | 出版物经营许可证 | 网络文化经营许可证京网文[2014]2148-348号 | 违法和不良信息举报电话：4006561155
Copyright © 2004 - 2016 京东JD.com 版权所有 | 消费者维权热线：4006067733
京东旗下网站：京东钱包
***********************
CSS（jdcss）
**********************
@charset "UTF-8";
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
fieldset, img,input,button { border:none; padding:0;margin:0;outline-style:none; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}
select, input { vertical-align:middle;}
select, input, textarea { font-size:12px; margin:0; }
textarea { resize:none; } /*防止拖动*/
img {border:0; vertical-align:middle; } /* 去掉图片低测默认的3像素空白缝隙*/
table { border-collapse:collapse; }
body {
font:12px/150% Arial,Verdana,"\5b8b\4f53";
color:#666;
background:#fff;
}
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after{clear:both;}
/*.clearfix{*/
/**zoom:1;!*IE/7/6*!*/
/*}*/
a {color:#666666; text-decoration:none; }
a:hover{color:#C81623;}
h1,h2,h3,h4,h5,h6 {text-decoration:none;font-weight:normal;font-size:100%;}
s,i,em{font-style:normal;text-decoration:none;}
.col-red{color: #C81623!important;}
/*公共类*/
.w { /*版心 提取 */
width: 1210px;margin:0 auto;
}
.fl {
float:left
}
.fr {
float:right
}
.al {
text-align:left
}
.ac {
text-align:center
}
.ar {
text-align:right
}
.hide {
display:none
}
/*头部nav开始*/
.shortcut{
height: 30px;
line-height: 30px;
background-color: #f1f1f1;
}
.dt,
.shortcut .fore
{
padding: 0 20px 0 10px;
position: relative;
}
.dt i,.fore i{
font: 400 15px/15px "宋体";
position: absolute;
top: 13px;
right: 3px;
height: 7px;
width:15px ;
overflow: hidden;
}
.dt s ,.fore s{
position: absolute;
top: -8px;
}
.fr li{
float: left;
padding: 0 10px;
}
.fr .line{
width: 2px;
height: 13px;
background-color: #ddd;
margin-top: 9px;
padding: 0px;
}
.shortcut .tel-jd{
padding: 0 20px 0 25px;
}
.tel{
position: absolute;
width: 15px;
height: 20px;
background: url(image/jd2015img.png)no-repeat;
top:5px;
left: 5px;
overflow: hidden;
}
/*头部nav end*/
/*TopBanner begin*/
.topbanner{
background-color: rgb(22,135,255);
}
.close-banner{
position: absolute;
/* right: 0px;
*/ top: 5px;
margin-left: -25px;
margin-top: 5px;
width: 19px;
height: 19px;
background: url(image/x.png) no-repeat;
}
.close-banner:hover{
background-position: bottom;
}
.tp{
position: relative;
}
.logo{
width:360px;
height: 75px;
padding-top: 25px;
margin-right: 20px;
float: left;
position: relative;
}
.db11{
position: absolute;
width: 180px;
height: 60px;
margin: 10px;
top: 10px;
left: 5px;
}
.search{
width:538px;
height: 75px;
float: left;
margin-top: 25px;
}
.search input{
width: 450px;
height: 32px;
border: 2px solid #B61D1D;
padding-left: 4px;
font: 14px/32px "microsoft yahei";
color: #666666;
float: left;
}
.search button{
width: 80px;
height: 36px;
background-color: #B61D1D;
font: 16px/36px "microsoft yahei";
color: #fff;
cursor: pointer;/*鼠标变成小手*/
}
.search .hotwords{
width: 500px;
padding: 7px 7px 7px 0px;
font-size:12px;
}
.search .hotwords a{
margin-right: 13px;
}
.car{
width:96px;
line-height: 34px;
float: right;
margin: 25px 125px 0 0px;
position: relative;
padding-left: 40px;
border: 1px solid #DFDFDF;
}
/*购物小图标*/
.icon1{
position: absolute;
width: 16px;
height: 13px;
background: url(image/jd2015img.png) no-repeat -1px -59px;
top: 10px;
left: 20px;
}
/*>*/
.icon2{
font: 400 13px/13px simsun;
position: absolute;
top: 10px;
right: 10px;
}
.icon3{
position: absolute;
width: 16px;
height: 14px;
background-color: #C81623;
font-size: 12px;
line-height: 14px;
text-align: center;
color: #fff;
border-radius: 7px 7px 7px 0;
top: -4px;
}
.hotwords{
width: 500px;
float: left;
color: black;
}
/* nav部分*/
.jd-nav{
width: 100%;
height: 44px;
margin-top: 20px;
position: relative;
border-bottom: 2px solid #B1191A;
}
.dropdown{
width: 210px;
height: 44px;
float: left;
position: relative;
overflow: visible;
z-index: 10;
}
.dropdown .dt{
height: 44px;
}
.dropdown .dt a{
width: 200px;
display: block;
height: 44px;
font: 400 15px/44px "microsoft yahei";
background-color: #B1191A;
color: #fff;
padding-left:10px ;
margin-left: 10px;
}
.dropdown .dd{
height: 465px;
width: 210px;
background-color: #C81623;
margin-left: 20px;
line-height: 30px;
color: #fff;
}
.dd .item1{
float: left;
font-size: 15px;
font-family: "Microsoft" ;
padding:8px 0px 0px 8px;
}
.item1 a{
clear: both;
color: #fff;
}
.item1 a:hover{color:#C81623;}
.item1 small{
width: 15px;
height: 15px;
float: right;
}
.navitems{
width: 730px;
height: 44px;
float: left;
}
.navitems li{
float: left;
margin-left: 40px;
}
.navitems li.new{
background: url(image/new.jpg) no-repeat right top ;
}
.navitems li a{
display: block;
color: #333;
font: 400 15px/44px "microsoft yahei";
}
/*切换部分*/
.wrapper{
width: 1210px;
height: 600px;
margin: 0 auto;
margin-top: 80px;
}
.tab{
border: 1px solid #DDD;
border-bottom: 0;
height: 36px;
width: 330px;
}
.tab li{
position: relative;
float: left;
width: 81px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span{
position: absolute;
right: 0;
top:10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products{
width: 1210px;
border: 1px solid #ddd;
height: 600px;
}
.products .main{
float: left;
display: none;
}
.main img{
margin-left: 8px;
}
.main a img:hover{
margin-left: 8px;
width: 190px;
height: 190px;
}
.products .main.selected{
display: block;
}
.tab li.active{
border-color: red;
border-bottom: 0;
}
.it{
width: 1210px;
height: 50px;
position: relative;
margin: auto;
background-color: rgb(110,153,180);
}
.dn{
float: left;
font-size: 23px;
color: #FFFFFF;
padding-top: 15px;
margin-left: 50px;
}
.dy{
float: right;
width: 900px;
height: 50px;
/*background-color: rebeccapurple;*/
}
.dy ul{
float:left ;
}
.dy ul li{
display: inline-block;
height: 24px;
line-height: 24px;
padding: 0 7px;
margin-top: 10px;
/*border: 1px solid #fff;*/
/*color: #FFFFFF;*/
margin-left: 10px;
/*margin-bottom: 10px;*/
max-width: 100px;
overflow: hidden;
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
}
.dy ul li a{
color: #FFFFFF;
}
.dy ul li:hover{
/*color:brown;*/
font-size: 16px;
border: 1px solid ghostwhite;
}
/*切换部分结束*/
/*服务板块开始*/
.jd-footer{
width: 1210px;
height: 700px;
margin: 200px auto;
/*background-color: red;*/
}
.slogen{
height: 54px;
padding: 20px 0;
background-color: #f5f5f5;
position: relative;
margin-top: -120px;
margin-bottom: 15px;
}
.item{
width: 302px;
position: absolute;
top: 20px;
left: 50%;
}
.slogen1{
margin-left: -608px;
}
.slogen2{
margin-left: -304px;
}
.slogen3{
margin-left: 2px;
}
.slogen4{
margin-left: 304px;
}
.shopping dl{
width: 198px;
float: left;
}
.shopping dt,
.coverage .dt{
font-size: 16px;
height: 28px;
font-family: "微软雅黑";
padding-top: 10px;
}
.shopping dd{
height: 20px;
}
.coverage{
float: right;
width: 210px;
height: 165px;
background: url(image/china.png) no-repeat left bottom;
}
.coverage .dd{
margin-top: 10px ;
}
.coverage p{
line-height: 18px;
}
.looklook{
text-align: right;
margin-top: 50px;
}
.againw{
border-top: 1px solid #E5E5E5;
padding: 23px 0 30px 0;
margin-top: 20px;
text-align: center;
}
.links{
height: 25px;
}
.links a{
padding: 0 6px;
}
.copyright{
line-height: 18px;
margin-bottom: 10px;
}
**************************
CSS（base）
**************************
.bannner604{
position: relative;
}
.bannner604 a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 604px;
background: url(image/Bigbanner.jpg) no-repeat top center;
}
.daa{
width: 1210px;
height: 540px;
margin: 0 auto;
}
.mian{
position: absolute;
}
#flash{
float: left;
width: 730px;
height: 354px;
margin-left: 233px;
margin-top: 10px;
position:absolute;
cursor: pointer;
/*background-color: red;*/
}
#pic li{
position: relative;
top: 0;
left: 0;
z-index: 1;
display: none;
}
#num{
position: absolute;
left: 40%;
margin-top: -30px;
z-index: 2;
cursor:default;}
#num li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
background: #666;
margin: 3px;
line-height: 20px;
text-align: center;
color: #fff;
cursor: pointer;}
#num li.active{
background: #f00;}
.arrow{
height: 60px;
width: 30px;
line-height: 60px;
text-align: center;
display: block;
position: absolute;
top:45%;
background-color: rgba(0,0,0,0.3);
z-index: 3;display: none;
}
.arrow:hover{background: rgba(0,0,0,0.7);}
#flash:hover .arrow{display: block;}
#left{
left: 1%;
}
#right{
right: -1%;
}
.news{
width: 215px;
height: 451px;
border: 2px solid #DDDDDD;
margin-right: 20px;
margin-top: 10px;
position: relative;
float: right;
}
.news .jd-news{
height: 150px;
border-bottom: 1px dashed #E4E4E4;
}
.jd-news .dt{
height: 60px;
border-bottom: 1px dotted #E8E8E7;
line-height: 43px;
}
.lifeServi .dt{
height: 60px;
margin-top: 240px;
border-bottom: 1px dotted #E8E8E7;
background: url(image/gggggg.jpg);
line-height: 43px;
}
.jd-news .dt h3,.lifeServi .dt h3{
float: left;
font: 14px/43px "microsoft yahei";
color: #666;
line-height: 43px;
padding-left: 15px;
}
.jd-news .dt a{
float: right;
position: relative;
font: 13px/43px "宋体";
margin-right: 15px;
}
.lifeServi{
height: 240px;
/*overflow: hidden;*/
width: 215px;
float: left;
border: 1px solid #666666;
}
.lifeServi ul{
width: 215px;
}
.lifeServi ul li{
width: 52.75px;
height: 70px;
border: 1px solid #E4E4E4;
border-top: 0;
margin-top: 10px;
float: left;
margin-left: -1px;
}
.lifeServi li a{
display: block;
height: 70px;
text-align: center;
padding-top: 44px;
position: relative;
}
.lifeServi li i{
position: absolute;
top: 12px;
left: 18px;
width: 25px;
height: 25px;
background: url(image/icon_lifeserv.png)no-repeat right top;
}
.lifeServi .song{
background: url(image/song.png) no-repeat right top;
}
/*双11活动*/
.watches{
width:1210px;
height: 151px;
margin: -60px auto;
background-color: burlywood;
}
.today{
position: relative;
}
.night{
margin: 0px 213px 0px 0;
}
.night-r{
width: 996px;
height: 160px;
float: right;
}
.night-r li{
float: left;
}
.night-r ul{
position: absolute;
top: 0;
width:1210px;
}
.night-r ul li{
float: left;
}
.night-r ul li.current{
display: block;
}
#watches{
display: none;
}
#watches span{
width: 20px;
height: 40px;
position: absolute;
left: 1px;
top: 50%;
margin-top: -20px;
background: #000;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: "黑体";
font-size: 30px;
color: #FFF;
opacity: 0.2;
border: 1px solid #FFF;
}
#watches #right1{
right: 0px;
left: auto;
}
#watches #left1{
left: 0px;
right: auto;
}
***************
js
***************
/**
* Created by lx on 16/11/3.
*/
$(document).ready(function () {
$(".tab li").mouseenter(function () {
var $this = $(this);
var index = $(this).index();
$this.addClass("active").siblings("li").removeClass("active");
$(".products div").eq(index).addClass("selected").siblings("div").removeClass("selected");
})
})
****************************
jq为：jquery-1.11.1：在网上下载
****************************
转载于:https://www.cnblogs.com/yuguangblog/p/6195866.html