css京东首页编写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>京东首页</title>
<style>
/*global css*/
a,address,b,big,blockquote,body,center,cite,code,dd,del,div,dl,dt,em,fieldset,font,form,h1,h2,h3,h4,h5,h6,html,i,iframe,img,ins,label,legend,li,ol,p,pre,small,span,strong,u,ul,var{margin:0;padding:0}
body{
font-size:14px;
color:#858585;
font-family: "Microsoft Yahei";
}
.clearit{
clear: both;
}
.red{
color:#B44C50;
}
/*global css end*/

/*header start*/
header{
width:1420px;
height:255px;
border-bottom: 3px solid #9D0000;

}

header .nav{
width:1420px;
height:30px;
background:#F1F1F1;
}
.nav .area{
width:87px;
height:30px;
line-height: 30px;
margin-left: 120px;
font-size:12px;
float:left;

}
.nav ul{
width:820px;
height:30px;
margin-right:80px;
float:right;
}

.phone{
display:inline-block;
width:15px;
height:19px;
float:left;
margin-top:5px;
margin-left:2px;
}
.phone_txt{
width:100px;
line-height:30px;
height: 30px;
float: left;
}
.nav ul li{
float:left;
list-style: none;
line-height: 30px;

}
.nav ul li:last-child a{
border-right:0px;
}
.nav ul li a{
font-size:12px;
text-decoration: none;
color:#858585;
border-right:1px solid #ccc;
padding-right:10px;
padding-left:10px;

}

header .header_ad{
width:1420px;
height:81px;

}

header .search{
width:1215px;
height: 58px;
margin:24px auto 0 auto;

}

#logo{
width:269px;
height: 50px;
float:left;
}
.search_keywords{
width:584px;
height: 60px;
float:left;
margin-left:97px;

}
.request input[type="text"]{
width:459px;
border:2px solid #B71D1D;
height:37px;
float: left;
}
.request input[type=submit]{
width:83px;
height:43px;
background:#B71D1D;
border:0px;
float: left;
color:#fff;
font-size:15px;

}
.keywords_tips{
width:584px;
height: 20px;
display:block;
clear:both;
}
.keywords_tips a{
font-size:12px;
text-decoration: none;
color:#A2A2A2;
margin-right:10px;
}
.buy{
width:141px;
height:37px;
background:#F9F9F9;
border: 1px solid #E9E9E9;
float: left;
margin-left:102px;
line-height: 37px;
text-align: center;
position: relative;
}
.buy .num{
position:absolute;
top:-10px;
left:105px;
width:30px;
height:20px;
border-radius: 15px;
background:#C81622;
color:#fff;
font-size:10px;
line-height: 20px;
}
header .menu{
width:1215px;
height:45px;
margin:17px auto 0 auto;

}

header .flm{
width:211px;
height: 45px;
background:#B2191B;
float: left;
line-height:45px;
color:#fff;
text-align: left;
font-size:15px;
padding-left:10px;
}
header .daohang{
width:712px;
height: 43px;
float: left;
margin-left:20px;

}

.daohang ul li{
float: left;
list-style: none;
font-size:16px;
padding:0 10px 0 10px;
height: 43px;
line-height: 43px;
}
/*header end*/

/*first section start*/

.first{
width:1215px;
height:574px;
margin:0 auto;

}
.first_content{
width: 100%;
height:470px;

}

.first_ad{
width:100%;
height: 97px;
background: red;
margin-top:12px;
}
.dh_left{
width:220px;
height: 100%;
background:#00ff00;
float: left;
}

.player{
width:730px;
height: 100%;
background: #0000ff;
margin-left: 10px;
float: left;
}

.easy{
width:240px;
height: 100%;
background: #ff00ff;
float: left;
margin-left: 10px;
}

/*first section end*/

</style>

</head>
<body>
<header>



<div class="nav">
<div class="area">
送至：北京<img src="img/jd_r2_c2.jpg" />
</div>
<ul>
<li><a href="#">你好，请登录<span class="red"> 免费注册</span></a></li>
<li><a href="#">我的订单</a></li>
<li><a href="#">我的京东<img src="img/jd_r2_c2.jpg"/></a></li>
<li><a href="#">京东会员</a></li>
<li><a href="#">企业采购</a></li>
<li class="mobile_jd">
<div class="phone">
<img src="img/phone.jpg" />
</div>
<div class="phone_txt">
<a href="#">手机京东<img src="img/jd_r2_c2.jpg"/></a>
</div>
</li>
<li><a href="#">关注京东<img src="img/jd_r2_c2.jpg"/></a></li>
<li><a href="#">客户服务<img src="img/jd_r2_c2.jpg"/></a></li>
<li><a href="#">网站导航<img src="img/jd_r2_c2.jpg"/></a></li>
</ul>
</div>



<div class="header_ad">
<a href="http://www.baidu.com" target="_blank">
<img src="img/ad.jpg" width="1420" height="80" />
</a>
</div>




<div class="clearit"></div>
<div class="search">
<div id="logo">
<img src="img/logo.jpg"/>
</div>
<div class="search_keywords">
<div class="request">
<form action="search.php" method="get">
<input type="text" name="keywords" placeholder=" 傅雷家书" />
<input type="submit" value="搜索" />
</form>
</div>
<div class="keywords_tips">
<a href="#">2件8折</a>
<a href="#">两件99元</a>
<a href="#">9.9免邮</a>
<a href="#">低至1元</a>
<a href="#">2件8折</a>
<a href="#">两件99元</a>
<a href="#">9.9免邮</a>
<a href="#">低至1元</a>
</div>
</div>
<div class="buy">
<img src="image/buy.jpg" />
我的购物车 >
<div class="num">0</div>
</div>
</div>


<div class="menu">
<div class="flm">全部商品分类</div>
<div class="daohang">
<ul>
<li>服装城</li>
<li>美装馆</li>
<li>京东超市</li>
<li>生鲜</li>
<li>闪购</li>
<li>团购</li>
<li>全球购</li>
<li>拍卖</li>
<li>金融</li>
</ul>
</div>
</div>
</header>


<section class="first">
<div class="first_content">
<div class="dh_left"></div>
<div class="player"></div>
<div class="easy"></div>
</div>
<div class="first_ad"></div>
</section>
</body>

</html>

猜你喜欢