index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属于自己的京东小网页</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="shortcut icon" href="favicon.ico">
<script type="text/javascript">
window.οnlοad=function(){
var login=document.getElementById("login");
var max=document.getElementById("max");
var box=document.getElementById("box");
var close=document.getElementById("close-all");
login.οnclick=function(){
max.style.display="block";
box.style.display="block";
}
close.οnclick=function(){
max.style.display="none";
box.style.display="none";
}
}
</script>
</head>
<body>
<div class="max" id="max"></div>
<div class="box" id="box">
<span id="close-all">×</span>
<p style="color: red;">登陆／注册</p>
<form >
<input type="text" name="" value="user" style="width: 250px;height: 22px"><br><br>
<input type="text" name="" style="width: 130px;height:22px"> <a>获取动态密码</a><br><br>
<input type="text" name="" value="输入密码" style="width: 250px;height: 22px"><br><br>
<div class="dl">
<a href="index.html" style="color: red;">登陆</a>
</div>
<div class="zc">
<a href="index.html" style="color: red;">注册</a>
</div>
<br><br>
</form>
</div>
<div class="shortcut">
<div class="w">
<div class="fl">
<div class="dt">送至：北京
<i><p>◇</p></i></div>
</div>
<div class="fr">
<ul>
<li>
<a href="javascript:;" id="login">你好，请登陆 </a>  
<a href="#" class="col-red">免费注册</a>
</li>
<li class="line"></li>
<li>我的订单</li>
<li class="line"></li>
<li>我的京东</li>
<li class="line"></li>
<li>京东会员</li>
<li class="line"></li>
<li>企业采购</li>
<li class="line"></li>
<li class="tel-jd">
<i class="tel"></i>
      手机京东
</li>
<li class="line"></li>
<li>客户服务</li>
<li class="line"></li>
<li>网站导航</li>
</ul>
</div>
</div>
</div>
<div id="top-banner" class="top-banner">
<div class="w tp">
<img src="images/topbanner.jpg">
<a href="javascript:;" id="jd-close" class="close-banner"></a>
</div>
</div>
<script type="text/javascript">
var clo=document.getElementById('jd-close');
var topBanner=document.getElementById("top-banner");
clo.οnclick=function(){
topBanner.style.display="none";
}
</script>
<div class="w clearfix">
<div class="logo">
<a href="http://www.jd.com" target="_blank" class="jd-a" title="叮咚"></a>
<div class="db11">
<a href="#"><img src="images/dong.gif"></a>
</div>
</div>
<div class="search">
<input type="text" name="" value="双十一降价，快来抢购！">
<button>搜索</button>
</div>
<div class="car">
<a href="#">       我的购物车</a>
<span class="icon1"></span>
<span class="icon2">   ></span>
<span class="icon3">3</span>
</div>
<div class="hotworld">
<a href="#">11月11日</a>
<a href="#">11.11秒杀</a>
<a href="#">买2免1</a>
<a href="#">iphone8</a>
<a href="#">12期免息</a>
<a href="#">智能科技</a>
<a href="#">清仓</a>
<a href="#">国际服务</a>
<a href="#">优惠卷</a>
</div>
</div>
<div class="jd-nav">
<div class="w">
<div class="dropdown">
<div class="dt">
<a href="#">全部商品分类</a>
</div>
<div class="dd">
<div class="items">
<p>家用电器</p>
<span>></span>
</div>
<div class="items">
<p>手机、数码、京东通信</p>
<span>></span>
</div>
<div class="items">
<p>电脑、办公</p>
<span>></span>
</div>
<div class="items">
<p>家具、家具、套装、厨具</p>
<span>></span>
</div>
<div class="items">
<p>男装、女装、内衣、珠宝</p>
<span>></span>
</div>
<div class="items">
<p>个性化装、清洁用品</p>
<span>></span>
</div>
<div class="items">
<p>户外运动</p>
<span>></span>
</div>
<div class="items">
<p>汽车、汽车用品</p>
<span>></span>
</div>
<div class="items">
<p>母婴、玩具乐器</p>
<span>></span>
</div>
<div class="items">
<p>食品、生鲜、特产</p>
<span>></span>
</div>
<div class="items">
<p>营养保健</p>
<span>></span>
</div>
<div class="items">
<p>图书、管理、电子书</p>
<span>></span>
</div>
<div class="items">
<p>彩票、充值、旅游、票务</p>
<span>></span>
</div>
<div class="items">
<p>保险、白条、众筹</p>
<span>></span></p>
</div>
</div>
</div>
<div class="navitems">
<ul>
<li class="new">
<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>
</ul>
</div>
<div class="bike">
<a href="#"></a>
</div>
</div>
</div>
<div class="banner604">
<div class="w main clearfix">
<div class="box2" id="slide">
<div class="slider" id="slider">
<img src="images/slider1.jpg" id="pic">
</div>
<ul class="circle">
<li class="now" id="li01">1</li>
<li id="li02">2</li>
<li id="li03">3</li>
<li id="circle4">4</li>
<li id="circle5">5</li>
<li id="circle6">6</li>
</ul>
<div class="arrow" id="arr">
<div class="arrow-1"><</div>
<div class="arrow-2">></div>
</div>
</div>
<script>
var arr = document.getElementById("arr");
var slide = document.getElementById("slide");
slide.onmouseover = function(){
arr.style.display = "block";
}
slide.onmouseout = function(){
arr.style.display = "none";
}
var li02 = document.getElementById("li02");
var li01 = document.getElementById("li01");
var pic = document.getElementById("pic");
li02.onmouseover = function(){
pic.src = "images/22.jpg";
}
li01.onmouseover = function(){
pic.src = "images/11.jpg";
}
</script>
<div class="news">
<div class="jd-news">
<div class="dt">
<h4>京东快报</h4>
<a href="#">更多 ></a>
</div>
<div class="dd">
<ul>
<li><a href="#">[特惠] 1元秒杀</a></li>
<li><a href="#">[公告] 母婴APP</a></li>
<li><a href="#">[特惠] 美的品牌日 APP嗨购大放价</a></li>
<li><a href="#">[公告] 京东深入蒙牛基地进行质检</a></li>
<li><a href="#">[特惠] 白条购家电 24期免息！</a></li>
</ul>
</div>
</div>
<div class="life">
<div class="dt">
<h4>生活服务</h4>
</div>
<div class="dd">
<ul>
<li class="life-cion1">
<a href="#" class="song">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion2">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion3">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion4">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion5">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion6">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion7">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion8">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion9">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion10">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion11">
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li class="life-cion12">
<a href="#" class="mian">
<i></i>
<span>话费</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="w todays clearfix">
<div class="night">
<div class="night-l fl">
<img src="images/night.jpg" alt=""/>
</div>
<div class="night-r">
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
</ul>
</div>
</div>
</div>
<div class="jd-footer">
<div class="service">
<div class="slogen">
<span class="item slogen1">
<img src="images/slogen1.png" alt=""/>
</span>
<span class="item slogen2">
<img src="images/slogen2.png" alt=""/>
</span>
<span class="item slogen3">
<img src="images/slogen3.png" alt=""/>
</span>
<span class="item slogen4">
<img src="images/slogen4.png" alt=""/>
</span>
</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>
<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>
<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>
<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>
<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>
<dd><a href="#">联系客服</a></dd>
</dl>
<div class="coverage">
<div class="dt">京东自营覆盖区县</div>
<div class="dd">
<p>京东已向全国2357个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>
<p class="look"><a href="#">查看详情 ></a></p>
</div>
</div>
</div>
</div>
<div class="w again">
<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="#">English Site</a>|
<a href="#">Content Us</a>
</div>
<div class="copyright">
北京市公安局朝阳分局备案编号110105014669 | 京ICP证070359号 | 互联网药品信息服务资格证编号(京)-经营性-2014-0008 | 新出发京零 字第大120007号<br />
音像制品经营许可证苏宿批005号 | 出版物经营许可证编号新出发(苏)批字第N-012号 | 互联网出版许可证编号新出网证(京)字150号<br />
网络文化经营许可证京网文[2014]2148-348号 违法和不良信息举报电话：4006561155 Copyright © 2004-2015 京东JD.com 版权所有<br />
京东旗下网站：360TOP 拍拍网 网银在线</div>
<div class="message">
<a href="#"><img src="images/mess.png"></a>
<a href="#"><img src="images/mess2.png"></a>
<a href="#"><img src="images/mess3.png"></a>
<a href="#"><img src="images/mess4.png"></a>
<a href="#"><img src="images/mess5.png"></a>
</div>
</div>
</div>
<script type="text/javascript">
var circle1=document.getElementById("circle1");
var circle2=document.getElementById("circle2");
var circle3=document.getElementById("circle3");
var circle4=document.getElementById("circle4");
var circle5=document.getElementById("circle5");
var circle6=document.getElementById("circle6");
var slider=document.getElementById("slider");
circle1.οnclick=function(){
slider.img.src="images/slider1.jpg";
}
circle2.οnclick=function(){
slider.img.src="images/22.jpg";
}
</script>
</body>
</html>
css
@charset "UTF-8";
/*css初始化*/
*{
margin: 0px;
padding: 0px;
}
html{
width: 100%;
overflow-x: hidden;
}
body{
font:12px Arial,Verdana,"\5b8b\4f53";
min-width: 1400px;
}
input{
padding-top: 0;
padding-bottom: 0;
font-family: "SimSun","宋体";
vertical-align: middle;
font-size: 12px;
margin: 0;
}
button{
border: none;
padding: 0;
margin: 0;
outline-style: none;
}
img{
border: 0;vertical-align: middle;
}
li{
list-style: none;
}
a{
color: #666;
text-decoration: none;
}
a:hover{
color: #c81623;
}
h1,h2,h3,h4,h5,h6{
text-decoration: none;
}
/*清除浮动*/
.clearfix:before,.clearfix:after{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
zoom:1;/*IE*/
}
.shortcut{
height: 30px;
line-height: 30px;
background-color: #f1f1f1;
width: 100%;
}
.dt{
position: relative;
}
.dt i{
font:400 15px/15px "宋体";
position: absolute;
right: 10px;
top:13px;
height: 7px;
overflow: hidden;
width: 15px;
}
.dt p{
position: absolute;
top: -8px;
left: 0;
}
.w{
width: 50%;
margin: 0 auto;
min-width: 1250px;
}
.max{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0,0,0,.5);
z-index: 999;
display: none;
}
.box{
width: 400px;
height: 275px;
background-color: #fff;
position: fixed;
left: 50%;
top: 50%;
margin: -125px 0 0 -200px;
z-index: 1000;
display: none;
}
.box span{
position: absolute;
top: 10px;
right: 10px;
width: 15px;
height: 15px;
font-size: 15px;
cursor: pointer;
}
.box img{
width: 400px;
height: 300px;
}
.box p{
position: absolute;
top: 25px;
left: 40%;
font-size: 20px;
}
.box form{
position: absolute;
top: 70px;
left: 20%;
color: #ccc;
}
.box a{
font-size: 12px;
}
.box .dl{
width: 125px;
height: 22px;
background-color: #ccc;
text-align: center;
font-size: 15px;
display: inline-block;
}
.box .zc{
width: 125px;
height: 22px;
background-color: #ccc;
text-align: center;
font-size: 15px;
display: inline-block;
}
.fl{
float: left;
}
.fr{
float: right;
}
.dt{
padding:0 25px
}
.fr li{
float: left;
padding: 0 10px;
}
.fr .line{
width: 1px;
height: 12px;
background: #ddd;
margin-top: 9px;
padding: 0;
}
.col-red{
color: red;
}
.shortcut .tel-jd{
padding: 0 15px 0 13px;
}
.tel-jd .tel{
position: absolute;
top: 5px;
width: 15px;
height: 20px;
background: url(../images/sprite.png) no-repeat;
top: 5px;
}
.top-banner{
background-color: #8A25C6;
}
.w img{
width: 100%;
}
.close-banner{
position: absolute;
right: 0;
top: 5px;
width: 19px;
height: 19px;
background: url(../images/close.png) no-repeat ;
}
.close-banner:hover {
background-position: bottom;
}
.tp{
position: relative;
}
.logo{
width: 30%;
height: 75px;
background-color: pink;
float: left;
padding-top: 25px;
background: url(../images/logo.png) no-repeat 0 25px ;
position: relative;
background-size: 80%;
}
.jd-a{
display: block;
width: 70%;
height: 60px;
}
.search{
width: 49%;
height: 35px;
background-color: purple;
float: left;
margin-top: 25px;
position: relative;
}
.db11{
position: absolute;
top: 13px;
left: 49%;
width: 49%;
height: 80px;
}
.search input{
width: 85%;
height: 32px;
border: 2px solid #b61d1d;
padding-left: 5px;
color: #666;
font-size: 14px;
float: left;
}
.search button{
width: 13.5%;
height: 36px;
float:left;
background-color:#b61d1d ;
font: 16px/36px "microsoft yahei";
color: #fff;
cursor: pointer;/*鼠标变化*/
position: absolute;
}
.car{
width: 120px;
float: right;
color: #666;
margin-top: 25px;
margin-right: 4%;
margin-left: 1%;
border: 1px solid #dfdfdf;
line-height: 34px;
padding-left: 10px;
position: relative;
}
.car a{
text-align: center;
}
.icon1{
position: absolute;
top: 9px;
left: 7px;
width: 30%;
height: 13px;
background: url(../images/sprite.png) no-repeat -1px -59px;
}
.icon2{
font-family: "microsoft yahei";
width:20%;
position: absolute;
top: 1px;
margin-left: 5px;
}
.icon3{
position: absolute;
width: 16px;
height: 14px;
background-color: #c81623;
font-size: 12px;
color:#fff;
line-height: 14px;
text-align: center;
top: -4px;
border-radius: 7px 7px 7px 0;
}
.hotworld{
width: 49%;
padding:7px 0;
float: left;
}
.hotworld a{
margin-right: 10px;
}
.slogen {
height: 54px;
padding: 20px 0;
background-color: #f5f5f5;
position: relative;
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;
}
.service dl{
width: 16.6666%;
float: left;
color: #6f6f6f;
}
.coverage .dt,
.service dt{
font-size: 16px;
height: 28px;
font-family: "microsoft yahei";
padding-top: 10px;
}
.service dd{
height: 20px;
}
.coverage{
float: right;
width: 16.6666%;
height: 165px;
color: #6f6f6f;
background: url(../images/china.png) no-repeat left bottom;
}
.coverage p{
line-height: 18px;
margin-top: 20px;
}
.look{
text-align: right;
margin-top: 15px;
}
.jd-footer .again{
border-top: 1px solid #e5e5e5;
padding: 25px 0 40px 0;
margin-top: 15px;
text-align: center;
}
.links{
height: 25px;
}
.links a{
padding: 0 5.5px;
}
.copyright{
color: #6f6f6f;
line-height: 18px;
margin-bottom: 15px;
}
.message img{
width: 103px;
height: 32px;
}
.jd-nav{
width: 100%;
height: 44px;
border-bottom: 2px solid #b1191a;
}
.dropdown{
width: 17%;
height: 44px;
float: left;
background: #b1191a;
position: relative;
z-index: 1;
overflow: visible;
}
.navitems{
width: 60%;
height: 44px;
float: left;
}
.navitems li{
float: left;
}
.navitems .new{
float: left;
background:url(../images/new.jpg) no-repeat right top;
}
.navitems li a{
display: block;
color: #333;
font:400 16px/44px "microsoft yahei";
padding: 0 27.5px;
}
.navitems li a:hover{
color: #c81623;
}
.bike{
width: 15%;
height: 44px;
background:url(../images/bike.jpg) no-repeat;
float: right;
}
.dropdown .dt{
height: 44px;
}
.dropdown .dt a{
display: block;
height: 44px;
background-color: #b1191a;
font:400 15px/44px "microsoft yahei";
color: #fff;
text-align: center;
}
.dropdown .dd{
height: 465px;
background-color: #c81623;
margin-top: 2px;
}
.dropdown .items{
height: 33px;
line-height: 33px;
border-left: 1px solid #b61d1d;
padding-left: 10px;
color: #fff;
font-size: 15px;
font-family: "microsoft yahei";
}
.dropdown .items p{
float: left;
font-family: "microsoft yahei"；
}
.dropdown .items span{
float: right;
margin-right: 15px;
font-family: "宋体";
}
.todays{
position: relative;
}
.night{
margin: 10px 0 28px 0;
}
@charset "UTF-8";
.banner604{
position: relative;
}
.main{
position: relative;
}
.box2{
width:62%;
height:453px;
margin-left: 18%;
background-color: blue;
margin-top: 12px;
float: left;
overflow: hidden;
position: relative;
}
.slider{
width:100%;
background-color: blue;
float: left;
position: relative;
}
.slider img{
width: 100%;
height: 453px;
}
.news{
width: 18.5%;
height: 451px;
border: 1px solid #e4e4e4;
float: right;
margin-top: 12px;
}
.circle{
position: absolute;
bottom: 8px;
left: 50%;
margin-left: -80px;
}
.circle li{
width: 18px;
height: 18px;
border-radius: 50%;
background-color: #313131;
float: left;
text-align: center;
color: #fff;
margin-left: 4px;
cursor: pointer;
}
.circle li.now{
background-color: #b61b1f;
}
.arrow-1,.arrow-2{
position: absolute;
width: 28px;
height: 62px;
background-color: rgba(0,0,0,.3);
top: 50%;
margin-top: -31px;
color: #fff;
font-size: 18px;
font:400 18px/62px "宋体";
text-align: center;
cursor: pointer;
}
.arrow-1{
left: 0;
}
.arrow-2{
right: 0;
}
.arrow-1:hover,.arrow-2:hover{
background-color: rgba(0,0,0,.4);
color: #fff;
}
.jd-news{
height: 200px;
border-bottom: 1px dotted #e8e8e7;
}
.life{
height: 251px;
}
.jd-news .dt,.life .dt{
padding:0;
height: 43px;
border-bottom: 1px dotted #e8e8e7;
line-height: 43px;
}
.jd-news .dt h4{
float: left;
font: 14px/43px "microsoft yahei";
color: #666;
padding-left: 15px;
}
.jd-news .dt a{
float: right;
font:13px/43px "microsoft yahei";
padding-right: 15px;
}
.jd-news .dd ul{
padding: 8px 0 0 15px;
}
.jd-news .dd li{
line-height: 28px;
}
.life .dt h4{
float: left;
font: 14px/43px "microsoft yahei";
color: #666;
padding-left: 15px;
}
.life .dd ul{
width: 100%;
}
.life .dd li{
width: 24.568%;
height: 68px;
border: 1px solid #e4e4e4;
float: left;
margin-left: -1px;
margin-top: -1px;
}
.life li a{
display: block;
height: 70px;
text-align: center;
padding-top: 47px;
position: relative;
}
.life li i{
position: absolute;
top: 12px;
left: 16px;
width: 25px;
height: 25px;
background: url(../images/icon_lifeserv.png) no-repeat right top;
}
.life-cion2 a i{
background-position: right -25px;
}
.life-cion3 a i{
background-position: right -50px;
}
.life-cion4 a i{
background-position: right -75px;
}
.life-cion5 a i{
background-position: right -100px;
}
.life-cion6 a i{
background-position: right -125px;
}
.life-cion7 a i{
background-position: right -150px;
}
.life-cion8 a i{
background-position: right -175px;
}
.life-cion9 a i{
background-position: right -200px;
}
.life-cion10 a i{
background-position: right -225px;
}
.life-cion11 a i{
background-position: right -250px;
}
.life-cion12 a i{
background-position: right bottom;
}
.life .song{
background: url(../images/song.png) no-repeat top right;
}
.life .mian{
background: url(../images/mian.png) no-repeat top right;
}
.todays {
position: relative;
}
.night {
margin: 10px 0 28px 0;
}
.night-l{
width: 17%;
height: 160px;
}
.night-r {
width:83%;
height: 160px;
float: right;
}
.night-r img {
width: 24%;
float: right;
margin-left: 1%;
}
701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
