个人名片：
😊作者简介：一名大一在校生，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代码有点多不太好发，可以关注我私信发源码和图片，大家可以跟着一起做帮助大家巩固基础
今日分享结束了，谢谢大家观看😘
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)