html/京東項目/京東網頁高仿/js/jq/css/java web/
登陸部分HTML+CSS：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>京東－歡迎登陸</title>
<link rel="shortcut icon" href="favicon.ico"/>
<style type="text/css">
ul, ol { list-style:none; }
.w { /*版心 提取 */
width:100%;margin:0 auto;
}
a {color:#666666; text-decoration:none; }
a:hover{color:#C81623;}
.nav{
width: 100%;
height: 70px;
}
.nav .log{
width: 170px;
height: 70px;
margin-top: 10px;
margin-left: 300px;
font-size: 12px;
background: url(image/logo-201305-b.png);
}
.nav .zh{
width: 160px;
height: 60px;
float: left;
padding-top: 10px;
text-align: center;
margin-left: 470px;
margin-top: -70px;
font-family: "SimSun", "宋體";
font-size: 26px;
/*background-color: brown;*/
}
.back{
width: 100%;
height: 460px;
background: url(image/ttttttttt.png);
}
.back .xbacky{
width: 300px;
height: 380px;
background-color: #FFFFFF;
float: right;
position:absolute;
margin:40px 40% 60px 60% ;
}
.xbacky .top{
width: 300px ;
height: 50px;
text-align: center;
float: left;
font-size: 22px;
padding:8px 0 0 0px;
border-bottom: 1px solid #eeeeee;
}
.xbacky .zhon-up{
position: relative;
width: 296px ;
height: 43px;
margin-top: 100px;
/*background-color: #B61D1D;*/
}
.zhon-up:hover{
border: 1px solid lightskyblue;
}
.zhon-up .yx{
float: right;
margin-top: -47px;
}
.xbacky .zhon-dom{
position: relative;
width: 296px ;
height: 43px;
margin-top: 15px;
/*background-color: #B61D1D;*/
}
.zhon-dom .mm{
float: right;
margin-top: -47px;
}
.zhon-dom:hover{
border: 1px solid lightskyblue;
overflow: hidden;
}
.zhon-up img:hover{
border: 1px solid lightskyblue;
}
.zhon-dom img:hover{
border: 1px solid lightskyblue;
}
.zw{
margin-top: 25px;
position: absolute;
width: 300px;
height: 25px;
/*background-color: #B61D1D;*/
}
.zw .dong{
float: left;
margin-left: 15px;
color: #666666;
cursor: pointer;
}
.zw .pass{
float: right;
margin-right: 15px;
cursor: pointer;
}
.dc li{
width: 150px;
height: 30px;
float: left;
margin-top: 5px;
margin-left: 560px;
font-size: 12px;
text-align: right;
}
.dc img{
float: left;
margin-left: 730px;
}
.foot{
width: 300px;
height: 50px;
margin-top: 22px;
position: absolute;
/*background-color: #B61D1D;*/
}
.foot .foot-l li{
float: left;
text-align: center;
font-size: 12px;
margin-left: -35px;
color:#666666;
cursor: pointer;
}
.foot .foot-r li{
float: right;
font-size: 10px;
margin-right: 15px;
cursor: pointer;
}
.b{
border-radius: 100px;
background-color: #B1191A;
}
.againw{
width: 2000px;
padding: 23px 0 30px 0;
position: absolute;
text-align: center;
}
.links{
height: 25px;
float: left;
margin-left: 500px;
}
.links a{
padding: 0 6px;
}
.againw p{
float: left;
margin-left: 800px;
color: #666666;
}
</style>
</head>
<body>
<div class="nav">
<div class="log"></div>
<div class="zh">歡迎登陸</div>
</div>
<div class="back">
<div class="xbacky" id="icon">
<div class="top"><a href="#">掃碼登陸</a> <span style="color: #eeeeee">|</span> <a href="#"> 帳戶登陸</a></div>
<div class="zhon-up">
<label><img src="image/yyyyyyyy.png" width="47px" height="43" border-color=""></label>
<div class="yx"><input type="text"style="width: 242px;height:35px;margin-left: 42px;" value="郵箱/用戶名/已驗證手機" /></div>
</div>
<div class="zhon-dom">
<label><img src="image/uuuuu.png" width="47px" height="43"></label>
<div class="mm"><input type="password" id="password" name="password" style="width: 242px;height:35px;margin-left: 42px;" value="請輸入密碼123" />
</div>
</div>
<div class="zw">
<div class="dong"><input type="checkbox">自動登陸</div>
<div class="pass"> <a>忘記密碼</a></div>
</div>
<a href="file:///D:/ziliao/%E4%BA%AC%E4%B8%9C/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/jdhtml.html">
<input name="a" type="submit" value="登 錄" style=" width: 270px; height: 30px; margin: 80px 0 0 15px; color:#FFFFFF; font-size: 18px" onclick="checkpassword();"/>
</a>
<div class="foot">
<div class="foot-l" >
<ul>
<li><a href="#">京東錢包 |</a></li>
<li><a href="#">QQ |</a></li>
<li><a href="#">微信</a></li>
</ul>
</div>
<div class="foot-r">
<ul>
<li><a href="#">當即註冊</a></li>
<li class="b">></li>
</ul>
</div>
</div>
</div>
</div>
<script>
function checkpassword(){
var pwd="123";
var inpwd=document.getElementById("password").value;//獲取輸入的代碼
if(pwd == inpwd){ //判斷一下是否同樣
window.location.href="http://localhost:63342/web/%E9%99%88%E7%8E%89%E5%B9%BF11.04%E4%BD%9C%E4%B8%9A/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/jdhtml.html";
}else{
alert("親你輸入的密碼錯誤!");
}
}
</script>
<div class="dc">
<ul>
<li><img src="image/q-icon.png"width="18px" height="14px"></li>
<li><a>登陸頁面，調查問卷</a></li>
</ul>
</div>
<div class="w againw">
<div class="links">
<a href="#">關於咱們</a> |
<a href="#"> 聯繫咱們</a>|
<a href="#">人才招聘</a> |
<a href="#">商家入駐</a> |
<a href="#">廣告服務</a> |
<a href="#">手機京東</a> |
<a href="#">友情連接</a> |
<a href="#">銷售聯盟</a> |
<a href="#">京東社區</a> |
<a href="#">京東公益</a> |
<a href="#">English Site</a>
</div>
<p>Copyright © 2004-2016 京東JD.com 版權全部 </p>
</div>
</div>
</body>
</html>
*****************************************************************************************************************************************************
京東主頁部分HTML+js+css：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>京東</title>
<link rel="shortcut icon" href="image/favicon.ico"/>
<link rel="stylesheet" href="jdcss.css"/>
<link rel="stylesheet" href="base.css" />
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="aijjs.js"></script>
<script>
function ab(id) {
return typeof id==='string'?document.getElementById(id):id;
}
window.onload=function(){
var index=0;
var timer=null;
var pic=ab("pic").getElementsByTagName("li");
var num=ab("num").getElementsByTagName("li");
var flash=ab("flash");
var left=ab("left");
var right=ab("right");
//單擊左箭頭
left.onclick=function(){
index--;
if (index<0) {index=num.length-1};
changeOption(index);
}
//單擊右箭頭
right.onclick=function(){
index++;
if (index>=num.length) {index=0};
changeOption(index);
}
//鼠標劃在窗口上面，中止計時器
flash.onmouseover=function(){
clearInterval(timer);
}
//鼠標離開窗口，開啓計時器
flash.onmouseout=function(){
timer=setInterval(run,2000)
}
//鼠標劃在頁簽上面，中止計時器，手動切換
for(var i=0;i<num.length;i++){
num[i].id=i;
num[i].onmouseover=function(){
clearInterval(timer);
changeOption(this.id);
}
}
//定義計時器
timer=setInterval(run,2000)
//封裝函數run
function run(){
index++;
if (index>=num.length) {index=0};
changeOption(index);
}
//封裝函數changeOption
function changeOption(curindex){
console.log(index)
for(var j=0;j<num.length;j++){
pic[j].style.display="none";
num[j].className="";
}
pic[curindex].style.display="block";
num[curindex].className="active";
index=curindex;
}
}
</script>
</head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<div class="dt">
送至：北京<i><s>◇</s></i>
</div>
</div>
<div class="fr">
<ul>
<li>
<a href="file:///D:/ziliao/%E4%BA%AC%E4%B8%9C/%E4%BA%AC%E4%B8%9C%E9%A1%B9%E7%9B%AE/denlu.html">你好，請登陸</a>
<a href="#" class="col-red">免費註冊</a>
</li>
<li class="line"></li>
<li>個人訂單</li>
<li class="line"></li>
<li class="fore">個人京東
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li >京東會員</li>
<li class="line"></li>
<li >企業採購</li>
<li class="line"></li>
<li class="fore tel-jd">
<em class="tel"></em>手機京東
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">關注京東
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">客戶服務
<i><s>◇</s></i>
</li>
<li class="line"></li>
<li class="fore">網站導航
<i><s>◇</s></i>
</li>
</ul>
</div>
</div>
</div>
<div class="topbanner">
<div class="w tp">
<img src="image/banner.jpg" alt="">
<a href="javascript:;" class="close-banner"></a>
</div>
</div>
<div class="w clearfix">
<div class="logo">
<a href="https://www.jd.com" target="_blank" class="jd-a" title="京東"></a>
<div class="db11">
<a href="https://www.jd.com"><img src="image/logo-201305.png" alt="圖片沒有加載出來"></a>
</div>
</div>
<div class="search">
<input type="text" name="" id="" value="電池" />
<button>搜索</button>
<div class="hotwords">
<a href="" class="col-red">百元神券</a>
<a href="">滿199-100</a>
<a href="">599減400</a>
<a href="">買1送1</a>
<a href="">秋收季</a>
<a href="">奶粉</a>
<a href="">毛呢大衣</a>
<a href="">新品首發</a>
</div>
</div>
<div class="car">
<a href="#">個人購物車</a>
<span class="icon1"></span>
<span class="icon2">></span>
<span class="icon3">0</span>
</div>
</div>
<div class="jd-nav" >
<div class="w">
<div class="dropdown">
<div class="dt"><a href="#">所有商品分類</a></div>
<div class="dd">
<div class="item1">
<a target="_blank" href="#">家用電器</a><small>></small><br/>
<a target="_blank" href="#">手機、運營商、數碼</a><small>></small><br/>
<a target="_blank" href="#">電腦、辦公</a><small>></small><br/>
<a target="_blank" href="#">家居、傢俱、家裝、廚具</a><small>></small><br/>
<a target="_blank" href="#">男裝、女裝、童裝、內衣</a><small>></small><br/>
<a target="_blank" href="#">個護化妝、清潔用品</a><small>></small><br/>
<a target="_blank" href="#">鞋靴、箱包、鐘錶、奢侈品</a><small>></small><br/>
<a target="_blank" href="#">運動戶外</a><small>></small><br/>
<a target="_blank" href="#">汽車、汽車用品</a><small>></small><br/>
<a target="_blank" href="#">母嬰、玩具樂器</a><small>></small><br/>
<a target="_blank" href="#">食品、酒類、生鮮、特產</a><small>></small><br/>
<a target="_blank" href="#">養分保健</a><small>></small><br/>
<a target="_blank" href="#">圖書、音像、電子書</a><small>></small><br/>
<a target="_blank" href="#">彩票、旅行、充值、票務</a><small>></small><br/>
<a target="_blank" href="#">理財、衆籌、白條、保險</a><small>></small><br/>
</div>
</div>
</div>
<div class="navitems">
<ul>
<li><a href="#">服裝城</a></li>
<li><a href="#">美妝館</a></li>
<li><a href="#">京東超市</a></li>
<li><a href="#">生鮮</a></li>
<li><a href="#">全球購</a></li>
<li><a href="#">閃購</a></li>
<li><a href="#">團購</a></li>
<li ><a href="#">拍賣</a></li>
<li class="new"><a href="#">金融</a></li>
</ul>
</div>
<div class="bike">
<a href="#"></a>
</div>
</div>
</div>
<!--nav結束-->
<!--大的背景圖片-->
<div class="bannner604">
<a href="#"></a>
</div>
<div class="daa">
<div class="w main clearfix">
<div id="flash">
<ul id="pic">
<li style="display:block"><img src="image/slider6.jpg" alt=""></li>
<li><img src="image/slider1.jpg" alt=""></li>
<li><img src="image/slider2.jpg" alt=""></li>
<li><img src="image/slider3.jpg" alt=""></li>
<li><img src="image/slider4.jpg" alt=""></li>
<li><img src="image/slider5.jpg" alt=""></li>
</ul>
<ol id="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<a href="javascript:;" class="arrow" id="left" ><</a>
<a href="javascript:;" class="arrow" id="right">></a>
</div>
</div>
<div class="news">
<div class="jd-news">
<div class="dt">
<h3>京東快報</h3>
<a href="#">更多</a>
</div>
<div class="dd">
<ul>
<li><a href=""><span>[特惠]</span>強韌滿分 喚醒元氣秀髮</a></li>
<li><a href=""><span>[公告]</span>山姆會員商店全面入駐京東商城</a></li>
<li><a href=""><span>[特惠]</span>山姆會員店盛大開業，全店熱銷</a></li>
<li><a href=""><span>[公告]</span>廣東、福建受颱風影響配送延遲</a></li>
<li><a href=""><span>[特惠]</span>5折神券提早搶！</a></li>
</ul>
</div>
</div>
<div class="lifeServi">
<div class="dd" id="iconSprite">
<ul>
<li class="lifeServi-icon1"><a href="#"><i></i><span>話費</span></a></li>
<li class="lifeServi-icon2"><a href="#"><i></i><span>機票</span></a></li>
<li class="lifeServi-icon3"><a href="#"><i></i><span>電影票</span></a></li>
<li class="lifeServi-icon4"><a href="#"><i></i><span>遊戲</span></a></li>
<li class="lifeServi-icon5"><a href="#"><i></i><span>彩票</span></a></li>
<li class="lifeServi-icon6"><a href="#"><i></i><span>加油卡</span></a></li>
<li class="lifeServi-icon7" ><a href="#"><i></i><span>酒店</span></a></li>
<li class="lifeServi-icon8"><a href="#"><i></i><span>火車票</span></a></li>
<li class="lifeServi-icon9"><a href="#"><i></i><span>衆籌</span></a></li>
<li class="lifeServi-icon10"><a href="#"><i></i><span>理財</span></a></li>
<li class="lifeServi-icon11"><a href="#"><i></i><span>禮品卡</span></a></li>
<li class="lifeServi-icon12"><a href="#" class="song"><i></i><span>白條</span></a></li>
</ul>
<script>
var iis = document.getElementById("iconSprite").getElementsByTagName("i");
for (var i=0;i<iis.length;i++) {
iis[i].style.backgroundPosition = "right "+(-i*25)+"px";
var num = iis[i].style.backgroundPosition;
console.log(num);
}
</script>
</div>
<div class="dt">
</div>
</div>
</div>
</div>
<!--雙11活動-->
<div class="watches" id="box">
<div class="w today clearfix">
<div class="night">
<div class="night-r">
<ul id="imgs">
<li><a href="#"><img src="image/5.png" alt="" /></a></li>
<li><a href="#"><img src="image/1.jpg" alt="" /></a></li>
<li><a href="#"><img src="image/2.jpg" alt="" /></a></li>
<li><a href="#"><img src="image/3.jpg" alt="" /></a></li>
<li><a href="#"><img src="image/4.jpg" alt="" /></a></li>
</ul>
</div>
<div id="watches">
<span id="left1"><</span>
<span id="right1">></span>
</div>
</div>
</div>
</div>
</div>
<script>
function a(id){
return document.getElementById(id);
}
//切換下一頁的隱藏和顯示
a("box").onmouseover= function(){
a("watches").style.display = "block";
}
$("box").onmouseout = function(){
a("watches").style.display = "none";
}
</script>
<!--<div class="it">-->
<!--<b class="dn">電腦數碼</b>-->
<!--<div class="dy">-->
<!--<ul>-->
<!--<li><a href="#">IT精選</a></li>-->
<!--<li><a href="#">電腦館</a></li>-->
<!--<li><a href="#">遊戲極品</a></li>-->
<!--<li><a href="#">裝機大師</a></li>-->
<!--<li><a href="#">職場辦公</a></li>-->
<!--<li><a href="#">女神頻道</a></li>-->
<!--<li><a href="#">VR</a></li>-->
<!--<li><a href="#">二合一平板</a></li>-->
<!--<li><a href="#">電子教育</a></li>-->
<!--<li><a href="#">攝影社區</a></li>-->
<!--<li><a href="#">全球智選</a></li>-->
<!--<li><a href="#">相機沖印</a></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">國際大牌<span>◆</span></li>
<li class="tab-item">國妝名牌<span>◆</span></li>
<li class="tab-item">清潔用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/c.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/d.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/5814.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/5819.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/l.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/5814.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/5819.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/58178698N8fd691fb.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/l.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/b.jpg" width="180px" height="180px" alt=""/></a>
<a href="#"><img src="image/a.jpg" width="180px" height="180px" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
</div>
<div class="main">
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/a.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/b.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/c.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5819.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/d.jpg" width="190px" height="190px" alt=""/></a>
<a href="###"><img src="image/5814.jpg" width="190px" height="190px" alt=""/></a>
</div>
</div>
</div>
<!--頁面的底部開始-->
<div class="jd-footer">
<div class="service"><!--服務板塊-->
<div class="slogen"> <!--圖標版塊-->
<span class="item slogen1"><img src="image/slogen1.png" alt="" /></span>
<span class="item slogen2"><img src="image/slogen2.png" alt="" /></span>
<span class="item slogen3"><img src="image/slogen3.png" alt="" /></span>
<span class="item slogen4"><img src="image/slogen4.png" alt="" /></span>
<button><div class="tyy"><</div></button>
<button><div class="trr">></div> </button>
</div>
<div class="w shopping clearfix">
<dl>
<dt><a href="#">購物指南</a></dt>
<dd><a href="#">購物流程</a></dd>
<dd><a href="#">會員介紹</a></dd>
<dd><a href="#">生活旅行/團購</a></dd>
<dd><a href="#">常見問題</a></dd>
<dd><a href="#">你們電</a></dd>
</dl>
<dl>
<dt><a href="#">配送方式</a></dt>
<dd><a href="#">上門自提</a></dd>
<dd><a href="#">211限時達</a></dd>
<dd><a href="#">配送服務查詢</a></dd>
<dd><a href="#">配送費收取標準</a></dd>
<dd><a href="#">海外配送 </a></dd>
</dl>
<dl>
<dt><a href="#">支付方式</a></dt>
<dd><a href="#">貨到付款</a></dd>
<dd><a href="#">在線支付</a></dd>
<dd><a href="#">分期付款</a></dd>
<dd><a href="#">郵局匯款</a></dd>
<dd><a href="#">公司轉帳</a></dd>
</dl>
<dl>
<dt><a href="#">售後服務</a></dt>
<dd><a href="#">售後政策</a></dd>
<dd><a href="#">價格保護</a></dd>
<dd><a href="#">退款說明</a></dd>
<dd><a href="#">返修/退換貨</a></dd>
<dd><a href="#">取消訂單</a></dd>
</dl>
<dl>
<dt><a href="#">特點服務</a></dt>
<dd><a href="#">奪寶島</a></dd>
<dd><a href="#">DIY裝機</a></dd>
<dd><a href="#">延保服務</a></dd>
<dd><a href="#">京東E卡</a></dd>
<dd><a href="#">京東通訊</a></dd>
</dl>
<div class="coverage">
<div class="dt">京東自營覆蓋區縣</div>
<div class="dd">
<p>京東已向全國2654個區縣提供自營配送服務，支持貨到付款、POS機刷卡和售後上門服務。</p>
<p class="looklook"><a href="#">查看詳情 ></a></p>
</div>
</div>
</div>
</div>
<div class="w againw">
<div class="links">
<a href="#">關於咱們</a> |
<a href="#"> 聯繫咱們</a> |
<a href="#">聯繫客服</a> |
<a href="#">商家入駐</a> |
<a href="#">營銷中心</a> |
<a href="#">手機京東</a> |
<a href="#">友情連接</a> |
<a href="#">銷售聯盟</a> |
<a href="#">京東社區</a> |
<a href="#">風險監測</a> |
<a href="#">京東公益</a> |
<a href="#">English Site</a> |
<a href="#">Contact Us</a>
</div>
<div class="copyright">
京公網安備 11000002000088號 | 京ICP證070359號 | 互聯網藥品信息服務資格證編號(京)-經營性-2014-0008 | 新出發京零 字第大120007號
互聯網出版許可證編號新出網證(京)字150號 | 出版物經營許可證 | 網絡文化經營許可證京網文[2014]2148-348號 | 違法和不良信息舉報電話：4006561155
Copyright © 2004 - 2016 京東JD.com 版權全部 | 消費者維權熱線：4006067733
京東旗下網站：京東錢包
</div>
<div class="message">
<a href="#"><img src="image/mess.png" alt="" /></a>
<a href="#"><img src="image/mess2.png" alt="" /></a>
<a href="#"><img src="image/mess3.png" alt="" /></a>
<a href="#"><img src="image/mess4.png" alt="" /></a>
<a href="#"><img src="image/mess5.png" alt="" /></a>
</div>
</div>
</div>
<!--頁面的底部結束-->
</body>
</htmlcss
***********************
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;
}html
**************************
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：在網上下載
****************************
java
- 1. 仿京東首頁
- 2. 京東網頁
- 3. 仿京東頁面（筆記）
- 4. 京東商城項目實戰（1）------京東商城首頁
- 5. 仿京東搜索
- 6. demo54-模仿京東
- 7. 京東首頁
- 8. html+css實戰-仿京東電商品優購網頁
- 9. 京東頁面一
- 10. Android 仿京東訂單頁面
- 更多相關文章...
- • Web 網頁 驗證 - 網站建設指南
- • ASP.NET Web Forms - HTML 頁面 - ASP.NET 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • 互聯網組織的未來：剖析GitHub員工的任性之源
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Duang!超快Wi-Fi來襲
- 2. 機器學習-補充03 神經網絡之**函數(Activation Function)
- 3. git上開源maven項目部署 多module maven項目（多module maven+redis+tomcat+mysql）後臺部署流程學習記錄
- 4. ecliple-tomcat部署maven項目方式之一
- 5. eclipse新導入的項目經常可以看到「XX cannot be resolved to a type」的報錯信息
- 6. Spark RDD的依賴於DAG的工作原理
- 7. VMware安裝CentOS-8教程詳解
- 8. YDOOK：Java 項目 Spring 項目導入基本四大 jar 包 導入依賴，怎樣在 IDEA 的項目結構中導入 jar 包 導入依賴
- 9. 簡單方法使得putty（windows10上）可以免密登錄樹莓派
- 10. idea怎麼用本地maven
- 1. 仿京東首頁
- 2. 京東網頁
- 3. 仿京東頁面（筆記）
- 4. 京東商城項目實戰（1）------京東商城首頁
- 5. 仿京東搜索
- 6. demo54-模仿京東
- 7. 京東首頁
- 8. html+css實戰-仿京東電商品優購網頁
- 9. 京東頁面一
- 10. Android 仿京東訂單頁面