纯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;
}

总结
继续努力，谢谢大家的观赏。

纯HTML+CSS仿作京东页面相关推荐

基于HTML和CSS完成京东页面的制作
首先打开京东页面分析页面元素由图可把整个页面分为4个部分,分别为top顶部部分,tip提示部分,mid中间部分,foot底部部分然后编写每一部分的代码,边写边测试结果,防止一步错步步错代码如下: ...
Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）
众所周知,学前端只看不写等于"我没学过",但是我们初学者常常因为找不到合适的网页素材而苦恼.有的太复杂,很多知识没学过:有的太粗糙,没有做的兴趣.正巧,我这儿有份儿合适的,纯HTM ...
html+css实现京东、英雄联盟静态页面
效果展示真高仿,像真的一样,页面的效果几乎都做出来了. 京东刚接触html css的时候写第一个页面,由于当时布局不太熟练,写了将近一个月- 英雄联盟实现功能京东点击切换轮播图京东自动轮播图 ...
HTMl+CSS 模仿京东网登录页面
课后实践项目,仅页面效果,写博客纯属记录! 码云开源仓库地址:https://gitee.com/ynavc/jd 演示地址:https://ynavc.gitee.io/jd 效果图: 实现代码: ...
html和css仿照京东网页页面（文本和链接的跳转）
上图是京东页面的一个参照物用到的语法: 代码块: <!doctype html> <html lang="en"> <head><met ...
Web前端_项目实践02_ins北欧风多肉植本店主网页（纯HTML+CSS静态页面）
众所周知,学前端只看不写等于"我没学过",正巧,我这儿有份儿合适的练手素材,纯HTML+CSS实现,够简单,页面比某些书本上的陈旧素材好看,有兴趣的话,一起来尝试吧. 先上完整效果 ...
php网页悬浮对联代码,不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码
纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: .r1{width:80px;height:80px;backgroun ...
HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...
京东商城（HTML和CSS实现京东商城网站）
学习京东商城(HTML和CSS实现京东商城网站),本文实现该系统的功能截图,HTML和CSS部分关键语句,系统功能图等供大家学习参考本页面模仿京东商城本系统完全模仿京东商城写的页面,页面功能齐全 ...

纯HTML+CSS仿作京东页面

纯HTML+CSS仿作京东页面

纯HTML+CSS仿作京东页面相关推荐

最新文章

热门文章