仿京东商城主页（静态页面）

程序员文章站 2022-06-15 18:50:11

HTML部分：

此项目主要使用HTML5+CSS来编写，对京东商城主业进行了整体的仿制，由于缺少素材，局部无法完全仿制。

HTML5部分：

<!DOCTYPE html>

<head>

<title>京东欢迎你</title>

</head>

<body>

</a>

</div>

</header>

</ul>

<li><a href="#" class="mobile">手机京东

</a></li>

</ul>

</div>

</h1>

</div>

</div>

<a href="#">我的购物车</a>

</div>

</div>

<ul>

<li>

</li>

</ul>

</div>

</div>

<ul>

</li><li><a href="">家用电器</a>/<a href="">手机</a></li>

</ul>

</div>

<ul>

</ul>

<div class="arrow-l">&lt

</div>

<ol>

</ol>

</div>

<div><img src="images/l.jpg" alt=""height="130"

width="390"></div>

</div>

Hi,欢迎来到京东！<br/>

</div>

<li><a href="">PLUS会员</a></li>

</div>

</div>

<ul>

<li><a href="">挑战三天不洗头</a></li>

</ul>

</div>

<ul>

</ul>

</div>

</div>

<ul>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

<li>

</div>

</li>

</ul>

</div>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

<dl>

</dl>

</div>

<h5>京东自营覆盖区县</h5>

<p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p>

</div>

<p>

<a href="#">English Site</a>

<a href="#">Media & IR</a>

</p>

<div>

<p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零字第大120007号</p>

<p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证|网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>

</div>

</p>

</div>

</footer>

</body>

</html>

CSS通用部分

/* 把我们所有标签的内外边距清零 */

* {

margin: 0;

padding: 0;

/* css3盒子模型 */

box-sizing: border-box;

}

/* 京东版心 */

.w{

width: 1190px;

}

/* em 和 i 斜体的文字不倾斜 */

em,

i {

font-style: normal

}

/* 去掉li 的小圆点 */

li {

list-style: none

}

img {

/* border 0 照顾低版本浏览器如果图片外面包含了链接会有边框的问题 */

border: 0;

/* 取消图片底侧有空白缝隙的问题 */

vertical-align: middle;

}

button {

/* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */

cursor: pointer

}

a {

color: #666;

text-decoration: none

}

a:hover {

color: #c81623

}

button,

input {

/* "\5B8B\4F53" 就是宋体的意思这样浏览器兼容性比较好 */

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

/* 默认有灰色边框我们需要手动去掉 */

border: 0;

outline: none;

}

body {

/* CSS3 抗锯齿形让文字显示的更加清晰 */

-webkit-font-smoothing: antialiased;

background-color: #fff;

font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

color: #666

}

.hide,

.none {

display: none

}

/* 清除浮动 */

.clearfix:after {

visibility: hidden;

clear: both;

display: block;

content: ".";

height: 0

}

.clearfix {

*zoom: 1

}

CSS主页部分

/* 京东版心 */

.w{

width: 1190px;

margin: 0 auto;

}

.fl{

float: left;

}

.fr{

float: right;

}

body{

background-color: #f6f6f6;

}

/* header部分 */

header{

height: 80px;

background-color: #020000;

}

/* 快速导航栏开始 */

.shortcut{

height: 30px;

background-color: #e3e4e5;

border-bottom: 1px solid #ddd;

font-size: 12px;

line-height: 30px;

}

.city{

margin-left: 200px;

}

.shortcut li{

float: left;

line-height: 30px;

margin-right: 10px;

}

.mobile{

position: relative;

}

.mobile img{

position: absolute;

left: -3px;

top:24px;

border:1px solid #ccc;

padding: 3px;

}

/* 快速导航栏结束 */

/* 中间部分开始 */

.middle{

height: 140px;

position: relative;

}

.logo{

position: absolute;

top:-30px;

left:0;

box-shadow: 0px -10px 10px rgba(0, 0, 0, .3);

}

.logo a{

display: block;

width: 190px;

height: 170px;

background:#fff url(../images/logo.png) no-repeat;

}

.form{

width: 550x;

height: 35px;

position: absolute;

top:25px;

left:320px;

background-color: pink;

}

.form input{

width: 500px;

height: 35px;

border: 1px solid #f10215;

float: left;

padding: 5px;

}

.form button{

float: left;

width: 50px;

height: 35px;

background-color: #f10215;

color: #f6f6f6;

font-size: 16px;

}

.shopcar{

width: 188px;

height: 33px;

border:1px solid #ccc;

position: absolute;

top:25px;

right: 95px;

background-color: #fff;

line-height: 33px;

text-align: center;

}

.shopcar i{

display: block;

height: 20px;

width: 20px;

border-radius: 50% 50% 50% 0;

color: #fff;

line-height: 20px;

text-align: 20px;

background-color: #f10215;

position: absolute;

top:-5px;

right: 10px;

}

/* 关键词模块 */

.hotword {

position: absolute;

top: 68px;

left: 320px;

}

.hotword a{

float: left;

margin-right: 10px;

}

/* 小导航模块 */

.navtimes{

width: 770px;

height: 40px;

position: absolute;

bottom:0;

left:200px;

line-height: 40px;

}

.navtimes li{

float: left;

}

.navtimes li a{

font-size: 16px;

font-weight: 700;

columns: #555555;

margin-left: 50px;

}

/* 中间部分结束 */

/* 中间分类模块开始 */

.grid{

height: 480px;

z-index: 999;

}

.grid-col1{

width: 190px;

height: 100%;

background-color: #6e6e6e;

color: #fff;

font-size: 14px;

position: relative;

}

.grid-col1 ul{

padding: 10px 0;

}

.grid-col1 ul li{

padding-left: 12px;

height: 30px;

line-height:30px;

}

.grid-col1 ul li:hover{

background-color: #9c9c9c;

}

.grid-col1 ul li a{

color: #fff;

font-size: 14px;

margin:0 3px;

}

/* 广告模块 */

.ad{

width: 250px;

height: 480px;

position: absolute;

top:0;

left:-250px;

}

.ad-r{

position: absolute;

top:0;

left:250px;

z-index: 999;

width: 0;

height: 480px;

transition: all 0.8s;

}

.ad:hover .ad-r{

width: 990px;

}

.grid-col2{

width: 790px;

height: 100%;

margin-left:10px ;

position: relative;

}

/* banner部分 */

.grid-col2-t{

height: 340px;

width: 790px;

position: relative;

}

.banner{

height: 100%;

width: 100%;

overflow: hidden;

position: relative;

}

.banner ul{

height: 100%;

width: 200%;

}

.banner li{

float: left;

}

.banner .arrow-l{

height: 20px;

width: 20px;

position: absolute;

left: 10px;

top:170px;

font-family: 'icomoon';

}.banner .arrow-r{

height: 20px;

width: 20px;

position: absolute;

right:10px;

top:170px;

font-family: 'icomoon';

}

.banner ol{

position: absolute;

bottom: 20px;

left: 200px;

}

.banner ol li{

height: 10px;

width: 10px;

border-radius: 50%;

background-color: #f10215;

margin-left: 20px;

}

.grid-col2-b div{

float: left;

margin-top: 10px;

}

.grid-col2-b div:last-child{

float: right;

margin-left: 10px;

}

/* 右边模块 */

.gird-col3{

width: 190px;

height: 100%;

margin-left: 10px;

}

.login{

height: 115px;

border-bottom: 1px solid #ccc;

position: relative;

}

.login-t{

position: absolute;

top:30px;

left: 50px;

}

.login-b{

position: absolute;

bottom: 20px;

left: 30px;

}

.login-b li{

height: 25px;

width: 70px;

border: 2px solid #f10215;

float: left;

margin-right: 10px;

line-height: 25px;

text-align: center;

}

.login-b li a{

color: #f10215;

font-weight: 600;

}

.news{

height: 155px;

border-bottom: 1px solid #ccc;

background-color: #fff;

padding: 7px 13px 0;

box-sizing: border-box;

}

.news-t{

height: 19px;

border-bottom: 1px solid #ccc;

}

.news-t a{

float: left;

}

.cuxiao{

width: 38px;

height: 17px;

line-height: 17px;

border-right: 1px solid #ccc;

}

.gonggao{

height: 17px;

margin-left: 15px;

}

.news-t .more{

float: right;

}

.news-b li {

margin-top: 10px;

}

.expand{

height: 210px;

overflow: hidden;

}

.expand ul{

margin-left: 5px;

width: 190px;

}

.expand li{

width: 47px;

height: 69px;

border-right: 1px solid #ccc;

border-bottom: 1px solid #ccc;

float: left;

background-image: url(../images/sprite_fs@1x.png);

background-position: 0px 0px;

background-repeat: no-repeat;

}

/* 展示模块 */

.zhanshi{

height: 740px;

margin-top: 20px;

}

.zhanshi li{

height: 300px;

width: 220px;

float: left;

border: 1px solid #666;

overflow: hidden;

}

.zhanshi li a {

height: 80px;

display: block;

width: 100%;

line-height: 80px;

font-size: 16px;

text-align: right;

}

.footer {

height: 500px;

margin-top: 35px;

}

.footer a {

color: #666;

}

/*帮助模块*/

/*左侧*/

.help {

border-bottom: 1px solid #DEDEDE;

height: 200px;

padding-top: 25px;

box-sizing: border-box;

}

.help dl {

width: 192px;

float: left;

}

.help dt {

height: 30px;

font-size: 14px;

font-weight: bold;

color: #666;

}

.help dd {

height: 22px;

}

/*右侧*/

.coverage {

width: 200px;

height: 150px;

background: url(../images/sprite.footer.png) no-repeat;

}

.coverage h5 {

font-size: 14px;

font-weight: bold;

color: #666;

margin-left: 35px;

margin-bottom: 15px;

}

.coverage p {

line-height: 18px;

color: #666;

width: 180px;

}

.coverage a {

display: block;

text-align: right;

margin-top: 5px;

color: #666;

}

/*版权*/

.copyright {

padding-top: 20px;

color: #666;

font-size: 12px;

text-align: center;

}

.copyright span {

margin: 0 10px;

}

.copyright div {

margin-top: 15px;

}

.copyright div p {

line-height: 22px;

}

.footerIcon a {

width: 103px;

height: 32px;

display: inline-block;

background: url(../images/sprite.footer.png) no-repeat -206px 0;

margin: 20px 4px 0;

}

.footerIcon a:nth-child(2) {

background-position: -206px -37px;

}

.footerIcon a:nth-child(3) {

background-position: -206px -74px;

}

.footerIcon a:nth-child(4) {

background-position: -206px -110px;

}

.footerIcon a:nth-child(5) {

background-position: -206px -148px;

}

本文地址：https://blog.csdn.net/weixin_44928106/article/details/107380767

上一篇： js新手问题：JS函数执行完突然自动刷新了

下一篇：令妃：包衣出身却深得乾隆宠爱，纪晓岚都为她写册文

仿京东商城主页（静态页面）

jquery仿京东商品放大浏览页面

JavaScript仿小米商城官网完整页面实现流程

【Android企业级开发案例分享】仿西瓜视频主页面框架，自定义GridLayout条目长按拖拽换位，条目点击删除添加，GreenDao数据持久化，Tab标签顺序实时刷新，Tab标签选中自字体变大变色

Android 仿京东商城底部布局的选择效果(Selector 选择器的实现)

javaweb商城秒杀系统--页面级高并发秒杀优化Redis缓存+静态化分离(四)

前端HTML5+CSS3静态页面开发（实现京东首页）

HTML+CSS 静态页面项目仿写（css仿制js实现效果）