京东首页静态页面html+css
个人名片：
作者简介：一名大一在校生，web前端开发专业
个人主页： python学不会
第一次写博客，写的不好望指正
学习目标: 坚持每一次的学习打卡
项目介绍：
- 京东首页项目主要是用html+css完成页面布局
- 项目使用工具为VSCode进行编辑，下载地址（https://code.visualstudio.com/,根据自己的电脑下载对应的版本，按照默认的安装进程将工具安装好。）
- 项目将运用到html基础知识+css样式，div布局，浮动与定位；
项目图如下：
实现步骤：
打开vscode创建images文件夹将所需的图片放入进去，京东图标导入项目中；
将所用到的外部样式文件 normalize.css放入项目的css文件夹中。
将所需要导入的字体文件font文件导入项目中。
导入后的项目如图所示：
先将项目划分为几个模块
- header头部
2.快速导航栏部分
3.中间头部分：搜索栏、购物车、关键词、小导航部分
4.中间分类区域：登录模块、新闻模块、服务扩展模块
5.页面底部 top：帮助模块
引入css样式
<!-- 插入页面小图标 -->
<link rel="shortcut icon" href="案例/favicon.ico" type="image/x-icon" />
<!-- 引入css初始化文件 -->
<link rel="stylesheet" href="案例/css/normalize.css" />
<!-- 头部和底部样式基本相同，我们做基本公共的样式 -->
<link rel="stylesheet" href="案例/css/base.css" />
<!-- 我们做专属首页样式 -->
<link rel="stylesheet" href="案例/css/index.css" />
（一）header头部与快速导航栏html
<!-- header部分 start -->
<header>
<div class="w">
<a href="#">
<img src="案例/img/header.jpg" />
</a>
</div>
</header>
<!-- header部分 start -->
<!-- 快速导航栏部分 start-->
<div class="shortcut">
<div class="w">
<ul class="fl city ">
<li><i class="fl0"></i><a href="#">北京</a></li>
</ul>
<ul class="fr">
<li>
<a href="#">你好，请登录</a>
<a href="#" class="fl0">免费注册</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的订单</a>
</li>
<li class="space"></li>
<li>
<a href="#">我的京东</a>
<i></i>
</li>
<li class="space"></li>
<li>
<a href="#">京东会员</a>
</li>
<li class="space"></li>
<li>
<a href="#">企业采购</a>
</li>
<li class="space"></li>
<li>
<a href="#">客户服务</a>
<i></i>
</li>
<li class="space"></li>
<li>
<a href="#">网站导航</a>
<i></i>
</li>
<li class="space"></li>
<li>
<a href="#" class="mobile">手机京东
<img src="案例/img/mobile.png"/>
</a>
</li>
</ul>
</div>
</div>
<!-- 快速导航栏部分 end-->
（二）中间头部分：搜索栏、购物车、关键词、小导航部分
<!-- 中间头部分 start -->
<div class="w middle">
<div class="logo">
<h1> <!-- 提高权重，便利于搜索引擎优化 -->
<a href="#"></a>
</h1>
</div>
<!-- 搜索 -->
<div class="form">
<input type="text" placeholder="扫描仪">
<button><i></i></button>
</div>
<!-- 购物车 -->
<div class="shopCar">
<i></i><a href="#" class="fl0"> 我的购物车</a>
<span>0</span>
</div>
<!-- 关键词 -->
<div class="hotwords">
<a href="#" class="fl0">199减100</a>
<a href="#">鼠标试用</a>
<a href="#">农资7折</a>
<a href="#">低至29元</a>
<a href="#">抽奖赢空调</a>
<a href="#">记忆棉</a>
<a href="#">坐垫</a>
<a href="#">1分钱买油</a>
<a href="#">智能手表</a>
</div>
<!-- 小导航部分 -->
<div class="navitems">
<ul>
<li><a href="#">秒杀</a></li>
<li><a href="#">优惠券</a></li>
<li><a href="#">闪购</a></li>
<li><a href="#">拍卖</a></li>
<li class="space"></li>
<li><a href="#">服装城</a></li>
<li><a href="#">京东超市</a></li>
<li><a href="#">生鲜</a></li>
<li><a href="#">全球购</a></li>
<li class="space"></li>
<li><a href="#">京东金融</a></li>
</ul>
</div>
</div>
<!-- 中间头部分 end -->
（三）中间分类区域：登录模块、新闻模块、服务扩展模块
<!-- 中间分类区域 start -->
<div class="w grid">
<div class="grid-col1 fl">
<div class="ad">
<img src="./案例/img/images/ad-l.png" height="480" width="250" alt="">
<div class="ad-r"></div>
</div>
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a>/<a href="#">运用商</a>/<a href="#">数码</a></li>
<li><a href="#">电脑</a>/<a href="#">办公</a></li>
<li><a href="#">家居</a>/<a href="#">家具</a>/<a href="#">家装</a>/<a href="#">厨具</a></li>
<li><a href="#">男装</a>/<a href="#">女装</a>/<a href="#">童装</a>/<a href="#">内衣</a></li>
<li><a href="#">美妆个护</a>/<a href="#">宠物</a> </li>
<li><a href="#">女鞋</a>/<a href="#">鞋包</a>/<a href="#">钟表</a>/<a href="#">珠宝</a></li>
<li><a href="#">男鞋</a>/<a href="#">运动</a>/<a href="#">户外</a> </li>
<li><a href="#">汽车</a>/<a href="#">汽车用品</a></li>
<li><a href="#">母婴</a>/<a href="#">玩具乐器</a></li>
<li><a href="#">食品</a>/<a href="#">酒类</a>/<a href="#">生鲜</a>/<a href="#">特产</a></li>
<li><a href="#">礼品鲜花</a>/<a href="#">农资绿植</a></li>
<li><a href="#">医药保健</a>/<a href="#">计生情趣</a></li>
<li><a href="#">图书</a>/<a href="#">音像</a>/<a href="#">电子书</a> </li>
<li><a href="#">机票</a>/<a href="#">酒店</a>/<a href="#">旅游</a>/<a href="#">生活</a></li>
<li><a href="#">理财</a>/<a href="#">众筹</a>/<a href="#">白条</a>/<a href="#">保险</a></li>
</ul>
</div>
<div class="grid-col2 fl">
<div class="grid-col2-t">
<a href="#"><img src="./案例/img/images/banner.jpg" height="340" width="790" alt=""></a>
<a href="#" class="arrow-l"><</a>
<a href="#" class="arrow-r">></a>
<ul class="circle">
<li></li>
<li></li>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="grid-col2-b">
<div><img src="./案例/img/images/l.jpg" height="130" width="390" alt=""></div>
<div><img src="./案例/img/images/r.jpg" height="130" width="390" alt=""></div>
</div>
</div>
<div class="grid-col3 fr">
<!-- 登录模块 -->
<div class="login">
<div class="login-t">
Hi，欢迎来到京东！ <br>
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#" class="user-info">
<img src="案例/img/images/no_login.jpg" alt=""/>
</a>
</div>
<div class="login-b">
<a href="#">新人福利</a>
<a href="#">PLUS会员</a>
</div>
</div>
<!-- 新闻模块 -->
<div class="news">
<div class="news-t">
<a href="#" class="cuxiao">促销</a>
<a href="#" class="gg">公告</a>
<a href="#" class="more">更多</a>
<div></div>
</div>
<div class="news-b">
<ul>
<li><a href="#">挑战三天不洗头</a></li>
<li><a href="#">挑战三天不洗头</a></li>
<li><a href="#">挑战三天不洗头</a></li>
<li><a href="#">挑战三天不洗头</a></li>
</ul>
</div>
</div>
<!-- 服务扩展模块 -->
<div class="expand">
<ul>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
<li>
<a href="#">
<i></i>
<span>话费</span>
</a>
</li>
</ul>
</div>
</div>
</div>
（四）页面底部 ：帮助模块
<!-- 页面底部 start -->
<footer>
<div class="service">
<div class="w">
<ul>
<li>
<h5>多</h5>
<p>品类齐全，轻松购物</p>
</li>
<li>
<h5>快</h5>
<p>多仓直发，极速配送</p>
</li>
<li>
<h5>好</h5>
<p>正品行贷，精致服务</p>
</li>
<li>
<h5>省</h5>
<p>天天低价，畅选无忧</p>
</li>
</ul>
</div>
</div>
<!-- 帮助模块 -->
<div class="w help">
<div class="f1">
<dl>
<dt>购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">大家电</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd><a href="#">上门自提</a></dd>
<dd><a href="#">211限时达</a></dd>
<dd><a href="#">配送服务管理</a></dd>
<dd><a href="#">配送费收取标准</a></dd>
<dd><a href="#">海外配送</a></dd>
</dl>
<dl>
<dt>支付方式</dt>
<dd><a href="#">货到付款</a></dd>
<dd><a href="#">在线支付</a></dd>
<dd><a href="#">分期付款</a></dd>
<dd><a href="#">邮局汇款</a></dd>
<dd><a href="#">公司转账</a></dd>
</dl>
<dl>
<dt>售后服务</dt>
<dd><a href="#">售后政策</a></dd>
<dd><a href="#">价格保护</a></dd>
<dd><a href="#">退款说明</a></dd>
<dd><a href="#">返修/退换货</a></dd>
<dd><a href="#">取消订单</a></dd>
</dl>
<dl>
<dt>特色服务</dt>
<dd><a href="#">夺宝岛</a></dd>
<dd><a href="#">DIY装机</a></dd>
<dd><a href="#">延保服务</a></dd>
<dd><a href="#">京东E卡</a></dd>
<dd><a href="#">京东通信</a></dd>
<dd><a href="#">京东ID+</a></dd>
</dl>
</div>
<div class="fr coverage">
<h5>京东自营覆盖区县</h5>
<p>京东已向全国2661个区县提供自营配送服务，支持货到付款，pos机刷卡和售后上门服务。</p>
<a href="#">查看详情 ></a>
</div>
</div>
<div class="w copyright">
<p>
<a href="#">关于我们</a>
<span>|</span>
<a href="#">联系我们</a>
<span>|</span>
<a href="#">联系客服</a>
<span>|</span>
<a href="#">合作招聘</a>
<span>|</span>
<a href="#">商家帮助</a>
<span>|</span>
<a href="#">营销中心</a>
<span>|</span>
<a href="#">手机京东</a>
<span>|</span>
<a href="#">友情链接</a>
<span>|</span>
<a href="#">销售联盟</a>
<span>|</span>
<a href="#">京东社区</a>
<span>|</span>
<a href="#">风险检测</a>
<span>|</span>
<a href="#">隐私政策</a>
<span>|</span>
<a href="#">京东公益</a>
<span>|</span>
<a href="#">English site </a>
<span>|</span>
<a href="#">moll</a>
<span>|</span>
</p>
<div>
<p>京公网安备 11000002000088号<span>|</span>京ICP证070359号<span>|</span>互联网药品信息服务资格证编号(京)-经营性-2014-0008<span>|</span>新出发京零 字第大120007号</p>
<p>互联网出版许可证编号新出网证(京)字150号<span>|</span>出版物经营许可证<span>|</span>网络文化经营许可证京网文[2014]2148-348号<span>|</span>违法和不良信息举报电话：4006561155</p>
<p>Copyright © 2004 - 2017 京东JD.com 版权所有|消费者维权热线：4006067733经营证照
京东旗下网站：京东支付|京东云</p>
</div>
<p class="foot-icon">
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
</p>
</div>
</footer>
<!-- 页面底部 end -->
</body>
</html>
（五）部分css页面
img {
/* display: block; */
vertical-align: top; /* 解决图片底测有空白缝隙的问题 */
}
.w { /* 版心的公共类 */
width: 1190px; /* 京东的版心是 1190 */
margin: 0 auto;
}
.fl { /* 浮动的公共类 */
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none; /* 取消下划线 */
font-size: 12px;
color: #999;
}
a:hover {
color: #c81623;
}
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{
margin: 0;
padding: 0;
}
input,button {
border: 0;
outline: none; /* 取消轮廓边框 */
}
ul {
list-style: none;
}
body {
background-color: #f6f6f6;
}
.f10{
color: #f10215!important;
}
@font-face { /* 声明字体 */
font-family: 'icomoon';
src: url('../fonts/icomoon.eot?8qhwk5');
src: url('../fonts/icomoon.eot?8qhwk5#iefix') format('embedded-opentype'),
url('../fonts/icomoon.ttf?8qhwk5') format('truetype'),
url('../fonts/icomoon.woff?8qhwk5') format('woff'),
url('../fonts/icomoon.svg?8qhwk5#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* header部分 */
header {
height: 80px;
background-color: #020000;
}
/* 快速导航栏begin */
.shortcut {
height: 30px;
line-height: 30px;
background-color: #e3e4e5;
border-bottom: 1px solid #ddd;
}
.city {
margin-left: 200px;
}
.shortcut li {
float: left;
}
.shortcut i {
font-family: "icomoon";
font-style: normal; /* 让倾斜的不倾斜 */
color: #ccc;
}
.space { /* 小竖线 */
width: 1px;
height: 10px;
background-color: #ccc;
margin: 10px 12px 0; /* 上 10 左右是 12 下是 0 */
}
.mobile {
position: relative;
}
.mobile img {
position: absolute;
left: -3px;
top: 24px;
border: 1px solid #ccc;
padding: 3px;
}
部分css代码有点多不太好发，可以关注我私信发源码和图片，大家可以跟着一起做帮助大家巩固基础
今日分享结束了，谢谢大家观看