当前位置：移动技术网 > IT编程>网页制作>HTML > 仿京东商城主页（静态页面）

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

2020年07月17日 | 移动技术网IT编程 | 我要评论

此项目主要使用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

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

Qt知识总结归类

Qt知识：对qt的知识做了总结和归类，详情请查看链接qt官网网址。一.编码规范Qt c++编码规范Coding ... [阅读全文]
白帽子讲Web安全（重点摘录）

书名：白帽子讲Web安全作者：吴翰清出版社：电子工业出版社阅读进度：重点摘录：第 1 章我的安全世界观第 2 ... [阅读全文]
动态库、静态库、运行时库、引入库之间的区别

动态库、静态库、运行时库、引入库之间的区别杂集。捡对口味的看看吧。转自：http://lingualspark.... [阅读全文]
XSS训练网站XSS Challenges所有题目解（中篇）

目录Stage #6 html事件中的XSSStage #7 列表中的XSSStage #8 列表中的XSSSt... [阅读全文]
【计算机图形学】基于GPU预计算的大气层光效渲染

基于GPU预计算的大气层光效渲染前言大气物理模型渲染方程及其实现实验结果参考文献前言本文叙述基于物理模型的大气层... [阅读全文]
LibGdx学习过程（二）项目结构解析

LibGdx学习过程（二）项目结构解析项目路径及资源分配在根目录中Android/core/desktop/ht... [阅读全文]
[Go] GO语言实战-gin框架项目实现中英文切换

如果项目中需要有多语言的展示，类似网站中英文切换，可以使用下面这个方法来实现主要思路就是，页面html内容展示的... [阅读全文]
杭电多校——第二场（题解）

太难的不会写，因为真的不会。。。1010 Lead of Wisdom现在在题目单中已经可以找到6772Lead... [阅读全文]
如何给未越狱的ios下载历史版本的app？未越狱IOS系统安装历史版本软件的方法，iPhone未越狱的手机如何安装旧版本APP？

IOS由于系统机制问题不支持版本回退某些更新可能导致闪退卡顿等未知bughttps://jingyan.ba... [阅读全文]
itext 根据模板生成pdf 多行数据

前言：基于 html + ccs + itext + 字符串替换完成的。简单，依赖的 jar 少...根据 pd... [阅读全文]

网友评论


验证码：

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

2020年07月17日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论