纯HTML+CSS仿作京东页面
大一学了一个月的网页制作课程，就在今天，我对京东页面下手了。
我用的是旧版京东的素材。。。
先上效果图
接下来让我们看看HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/bass.css"/>
<link rel="stylesheet" type="text/css" href="css/head.css"/>
<link rel="stylesheet" type="text/css" href="css/footer.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!-- 顶部开始 -->
<div class="header">
<div class="w">
<a href="#"></a>
<span class="close">X</span>
</div>
</div>
<!-- 头部导航开始 -->
<div class="nav">
<div class="w">
<div class="l_address">
<div class="title">
<i><img src="img/dizhi.png" /></i>
<a href="#">广东</a>
</div>
<div class="content"></div>
</div>
<div class="r_list">
<ul>
<li><a href="#">请登入</a> <a href="#">注册</a></li>
<li class="line"></li>
<li><a href="#">我的订单</a></li>
<li class="line"></li>
<li>
<a href="#">
我的京东
<i><img src="img/xiangxia.png"></i>
</a>
</li>
<li class="line"></li>
<li><a href="#">京东会员</a></li>
<li class="line"></li>
<li><a href="#">会员采购</a></li>
<li class="line"></li>
<li>
<a href="#">
客服服务
<i><img src="img/xiangxia.png"></i>
</a>
</li>
<li class="line"></li>
<li>
<a href="#">
网站导航
<i><img src="img/xiangxia.png"></i>
</a>
</li>
<li class="line"></li>
<li><a href="#">手机用户</a></li>
</ul>
</div>
</div>
</div>
<!-- logo开始 -->
<div class="logo w">
<!-- logo -->
<div class="l_logo">
<a href="#">我的京东</a>
</div>
<!-- 搜索框 -->
<div class="m_search">
<input type="text" value="低至5折" class="search"/>
<input type="button" value="搜索" class="btn"/>
</div>
<!-- 购物车 -->
<div class="cart">
<i><img src="img/gwc.png"/></i>
<a href="#">我的购物车</a>
<span>0</span>
</div>
<!-- 热词搜索 -->
<div class="hot_word">
<ul>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
<li><a href="#">5折秒杀</a></li>
</ul>
</div>
<!-- 导航列表 -->
<div class="list">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
<li><a href="#">秒杀</a></li>
</ul>
<div class="hr"></div>
<ul>
<li><a href="#">服装厂</a></li>
<li><a href="#">服装厂</a></li>
<li><a href="#">服装厂</a></li>
<li><a href="#">服装厂</a></li>
</ul>
<div class="hr"></div>
<ul>
<li>
<a href="#">京东金融</a>
</li>
</ul>
</div>
<!-- 宝藏 -->
<div class="treasure">
<a href="#"></a>
</div>
</div>
<!-- 主体内容开始 -->
<div class="banner_bg">
<a href="#"></a>
</div>
<!-- 主体广告开始 -->
<div class="main_banner w">
<div class="l_banner">
<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><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="m_banner">
<div class="top_banner">
<a href="#">
<img src="img/banner.jpg"/>
</a>
<div class="pages">
<a href="#" class="l_page"><</a>
<a href="#" class="r_page">></a>
</div>
<div class="numbers">
<ui>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ui>
</div>
</div>
<div class="bot_banner">
<a href="#">
<img src="img/img1.jpg">
</a>
<a href="#">
<img src="img/img2.jpg">
</a>
</div>
</div>
<div class="r_banner">
<div class="r_top_banner">
<div class="top_user clearfix">
<a href="#">
<img src="img/no_login.jpg">
</a>
<div class="userinfo">
<p class="p1">hi,请登入</p>
<p class="p2">
<a href="#">登入</a>
<a href="#">注册</a>
</p>
</div>
</div>
<div class="bot_btns">
<a href="#">新人福利</a>
<a href="#">PLUS会员</a>
</div>
</div>
<div class="r_mid_banner">留下</div>
<div class="r_bot_banner">
<ul>
<li>
<a href="#">
<i></i>
话费
</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><a href="#">话费</a></li>
<li><a href="#">话费</a></li>
<li><a href="#">话费</a></li>
<li><a href="#">话费</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
bass.css内容
body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,dt,dd{
margin:0;
padding:0;
list-style:none;
font-size:12px;
color:#444444;
font-weight:normal;
}
body {
background-color:#F6F6F6;
}
a {
color:#444444;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:underline;
}
i,s,em {
font-style:normal;
text-decoration:none;
}
input,img {
border:0 none;
outline-style:none;
margin:0;
padding:0;
vertical-align:middle;
}
/*清除浮动*/
.clearfix:after {
content:"";
height:0;
line-height:0;
display:block;
clear:both;
visibility:hidden;
}
.clearfix {
zoom:1;
}
/*板心*/
.w {
width:1190px;
margin:0 auto;
}
head.css内容
/*头部开始*/
.header {
height:80px;
background-color:#000;
}
.header .w {
position:relative;
}
.header a {
height:80px;
width:1190px;
display:block;
background:url(../img/top.jpg) no-repeat;
}
.header .close {
height:20px;
width:20px;
text-align:center;
line-height:20px;
display:block;
position:absolute;
right:0;
top:0;
cursor:pointer;
}
/*导航开始*/
.nav {
height:30px;
line-height:30px;
background-color:#E3E4E5;
}
.nav .w {
height:30px;
}
.l_address {
float:left;
}
.l_address .title {
margin-left: 190px;
}
.r_list {
float:right;
}
.r_list li {
float:left;
padding:0 12px;
}
.r_list .line {
width:1px;
height:10px;
background-color:#ccc;
margin-top:10px;
padding:0;
}
/*logo开始*/
.logo {
height:140px;
position:relative;
}
.l_logo {
float:left;
background-color:#fff;
position:absolute;
top:-30px;
}
.l_logo a {
width:190px;
height:170px;
display:block;
background:url(../img/logo.png) no-repeat;
text-indent:-2000px;
}
/*搜索框*/
.m_search {
float:left;
margin-left:320px;
margin-top:25px;
border:1px solid red;
}
.m_search .search {
width:493px;
height:33px;
padding-left:5px;
float:left;
}
.m_search .btn {
float:left;
width:50px;
height:33px;
background-color:red;
color:#fff;
cursor:pointer;
}
/*购物车*/
.cart {
float:left;
width:188px;
height:33px;
line-height:33px;
border:1px solid #ccc;
background-color:#fff;
margin-top:25px;
margin-left:32px;
text-align:center;
position:relative;
}
.cart a {
color:red;
}
.cart span {
width:16px;
height:16px;
display:block;
line-height:16px;
text-align:center;
background-color:red;
color:#fff;
position:absolute;
top:5px;
right:30px;
border-radius:7px;
}
/*热词搜索*/
.hot_word {
float:left;
margin-left:320px;
margin-top:10px;
}
.hot_word li {
float:left;
margin-right:12px;
}
/*导航列表开始*/
.list {
float:left;
margin-left:220px;
margin-top:25px;
}
.list ul {
float:left;
}
.list li {
float:left;
font-size:16px;
margin-right:30px;
}
.list li a {
color:#555;
font-weight: 700;
}
.hr {
width:1px;
height:10px;
background-color:#ccc;
float:left;
margin:3px -14px;
}
/*保藏*/
.treasure {
float:right;
}
.treasure a {
width:190px;
height:40px;
display:block;
background:url(../img/hd.png) no-repeat;
}
index.css内容
/*主体内容开始*/
.banner_bg {
width:100%;
height:482px;
position: absolute;
}
.banner_bg a{
width:100%;
height:482px;
display:block;
background:url(../img/banner_bg.png) no-repeat top center;
/*设置不占位置*/
/*position: absolute;*/
}
/*主体广告开始*/
.main_banner {
height:482px;
/*background-color:red;*/
position:relative;
z-index: 3;
}
.l_banner {
float:left;
width:190px;
height:467px;
padding-top:15px;
background-color:#6E6569;
}
.l_banner li a {
color:#fff;
}
.l_banner li {
padding-left:13px;
height:30px;
line-height:30px;
}
.l_banner li:hover {
background-color:rgba(255,255,255,.5);
}
.m_banner {
float:left;
margin-left:10px;
width:790px;
height:482px;
/*background-color:pink;*/
}
.m_banner .top_banner {
position:relative;
}
.pages a {
width:30px;
height:60px;
display:block;
text-align:center;
line-height:60px;
color:#fff;
background-color:rgba(0,0,0,.5);
position:absolute;
top:135px;
}
.l_page {
left:0;
}
.r_page {
right:0;
}
.pages a:hover {
background-color:rgba(0,0,0,.7);
}
.numbers {
width:182px;
height:20px;
position:absolute;
left:50%;
margin-left:-91px;
bottom:15px;
border-radius:10px;
background-color:rgba(255,255,255,.3);
}
.numbers li {
float:left;
width:12px;
height:12px;
background-color:#fff;
border-radius:6px;
margin-top:4px;
margin-left:9px;
}
.numbers li:nth-child(2){
background-color:red;
}
.bot_banner {
margin-top:10px;
}
.bot_banner a {
float:right;
}
.bot_banner a:first-child {
/*margin-right:10px;*/
float:left;
}
/*右侧盒子*/
.r_banner {
float:right;
height:482px;
width:190px;
background-color:#fff;
}
.r_top_banner {
height:115px;
border-bottom:1px solid #ccc;
}
.r_top_banner .top_user {
padding-top:15px;
padding-left:10px;
}
.r_top_banner .top_user img {
width:45px;
height:45px;
border-radius:25px;
}
.r_top_banner .top_user a{
float:left;
}
.r_top_banner .top_user .userinfo {
float:left;
margin-left:15px;
line-height:20px;
}
.r_top_banner .userinfo a {
margin-right:5px;
}
.bot_btns {
padding-left:10px;
padding-top:15px;
}
.bot_btns a {
width:70px;
height:20px;
border:2px solid red;
display:block;
float:left;
text-align:center;
line-height:20px;
margin-right:10px;
}
.bot_btns a:hover {
background-color:red;
color:#fff;
}
.r_mid_banner {
height:154px;
border-bottom:1px solid #ccc;
}
/*底部盒子*/
.r_bot_banner li {
width:47px;
height:70px;
float:left;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
text-align:center;
}
.r_bot_banner ul {
width:200px;
}
.r_bot_banner {
overflow:hidden;
}
.r_bot_banner li a {
width:47px;
display:block;
padding-top:46px;
position:relative;
}
.r_bot_banner li a i {
width:24px;
height:24px;
display:block;
background:url(../img/333.png) no-repeat;
position:absolute;
left:10px;
top:10px;
}
总结
继续努力，谢谢大家的观赏。
2561
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
