HTML和CSS实现京东首页，效果图如下：
基本代码如下：需要源代码和素材的评论区留言
（1）页面部分设计如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title> <meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" /> <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" /> <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" /> </head> <body> <!-- header 部分 start --> <header> <div class="w"> <a href="#"> <img src="images/header.jpg" height="80" width="1190" alt=""> </a> </div> </header> <!-- header 部分 end --> <!-- 快速导航栏部分 start--> <div class="shortcut"> <div class="w"> <ul class="fl city"> <li> <i class="f10"></i><a href="#">北京</a></li> </ul> <ul class="fr"> <li> <a href="#">你好，请登录</a> <a href="#" class="f10">免费注册</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="images/mobile.png" height="60" width="60" alt=""> </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="扫描仪"> <!-- 按钮的意思 双标签 等价于 <input type="button" value=""> --> <button> <i></i> </button> </div> <!-- 购物车 --> <div class="shopCar"> <i></i><a href="#" class="f10">我的购物车</a> <span>0</span> </div> <!-- 关键词 --> <div class="hotwords"> <a href="#" class="f10">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 class="super"> <a href="#"><img src="images/super.png" height="40" width="190" alt=""></a> </div> </div> <!-- 中间头部分 end --> <!-- 中间分类区域 start --> <div class="w grid"> <div class="grid-col1 fl"> <div class="ad"> <img src="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>/<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></li> <li><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>/<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></li> <li><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>/<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></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="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="images/l.jpg" height="130" width="390" alt=""></div> <div><img src="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="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="#">挑战3天不洗头</a></li> <li><a href="#">挑战3天不洗头</a></li> <li><a href="#">益生菌领券满399减100</a></li> <li><a href="#">益生菌领券满399减100</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> <!-- 中间分类区域 end --> <!-- 页面底部分 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="fl"> <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="#">购物流程</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> <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> <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> <dd><a href="#">购物流程</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="#">English Site</a> <span>|</span> <a href="#">Media & IR</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> （2）背景渐变设计： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> div { width: 300px; height: 50px; /* background: linear-gradient(渐变的起始位置， 起始颜色， 结束颜色)； */ background: linear-gradient(top, red, green); background: -webkit-linear-gradient(top, red, green); background: -moz-linear-gradient(top, red, green); /* 因为背景渐变 兼容性问题很严重， 必须在前面添加浏览器的私有前缀 */ margin: 200px auto; } section { width: 400px; height: 100px; margin: 0 auto; /* background:-webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色位置....)； */ background: -webkit-linear-gradient(top, red 0%, green 20%, blue 80%); background: -moz-linear-gradient(left, red 0%, green 50%, skyblue 80%, hotpink 100%) } </style> </head> <body> <div></div> <section></section> </body> </html>
HTML和CSS实现京东首页（html和css详解）（二）https://developer.aliyun.com/article/1382398
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)