用html写京东网页，实现部分功能

最新推荐文章于 2024-03-08 23:10:01 发布

hello_dengdai

最新推荐文章于 2024-03-08 23:10:01 发布

阅读量6.8k

点赞数 4

分类专栏： html

本文链接：https://blog.csdn.net/hello_dengdai/article/details/80947055

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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="image/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="image/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="image/phone.jpg" /></div>
<div class="phone_txt">
<a href="#">手机京东<img src="image/jd_r2_c2.jpg" /></a>
</div>
</li>
<li><a href="#">关注京东<img src="image/jd_r2_c2.jpg" /></a></li>
<li><a href="#">客户服务<img src="image/jd_r2_c2.jpg" /></a></li>
<li><a href="#">网站导航<img src="image/jd_r2_c2.jpg" /></a></li>
</ul>
</div>
<div class="header_ad">
<a href="http://www.baidu.com" target="_blank">
<img src="image/ad.jpg" width="1420" height="80" />
</a>
</div>
<div class="clearit"></div>
<div class="search">
<div id="logo">
<img src="image/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>

hello_dengdai

关注

4
点赞
踩
24

收藏

觉得还不错? 一键收藏
0
评论
用html写京东网页，实现部分功能

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;京东首页&lt;/title&gt; &lt;style&gt; /*global css*/ a,address,b,big,blockquote,body,center,cite,code,dd,
复制链接

扫一扫