个人名片：
😊作者简介：一名大一在校生，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代码有点多不太好发，可以关注我私信发源码和图片，大家可以跟着一起做帮助大家巩固基础
今日分享结束了，谢谢大家观看😘
