HTML代码

基本结构

需要练手，或者需要代码的留言即可

<!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="icon" href="favicon.ico"><link rel="stylesheet" href="./css/base.css"><link rel="stylesheet" href="./css/header.css"><link rel="stylesheet" href="./css/footer.css"><link rel="stylesheet" href="./css/index.css"><!--    引入图标字体--><link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body><!--导航开始-->
<div class="nav"><div class="w"><div class="l_nav"><b class="iconfont">&#xe6ec;</b><a href="#">湖南</a></div><div class="r_nav"><ul><li><a href="#" style="color: red">你好，请登录</a><a href="#">免费注册</a></li><li class="line"></li><li><a href="#">我的订单</a></li><li class="line"></li><li><a href="#">我的京东</a><b class="iconfont">&#xe749;</b></li><li class="line"></li><li><a href="#">京东会员</a></li><li class="line"></li><li><a href="#">企业采购</a></li><li class="line"></li><li><a href="#">客户服务</a><b class="iconfont">&#xe749;</b></li><li class="line"></li><li><a href="#">网站导航</a><b class="iconfont">&#xe749;</b></li><li class="line"></li><li><a href="#">手机京东</a><span class="phone"><s></s><img src="./image/code.png" alt=""></span></li></ul></div></div>
</div>
<!--导航结束--><!--搜索栏开始-->
<div class="m_nav w"><div class="logo"><a href="#">京东</a></div><div class="search_box"><input type="text" class="search" placeholder="罗技鼠标" autofocus><input type="button" class="btn"><b class="iconfont search_img">&#xe741;</b></div><div class="cart"><b class="iconfont">&#xe746;</b><a href="#">我的购物车</a><span>0</span></div><div class="hot_word"><ul><li><a href="#" style="color: red">飞利浦电视</a></li><li><a href="#">新品上市</a></li><li><a href="#">空调好物</a></li></ul></div><div class="nav_item "><ul><li><a href="#">秒杀</a></li><li><a href="#">优惠券</a></li><li><a href="#">PLUS会员</a></li><li><a href="#">品牌闪购</a></li><li><a href="#">拍卖</a></li><li><a href="#">京东家电</a></li><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="content"><div class="main_body w"><div class="banner"><div class="left_banner"><ul><li><a href="#">家用电器</a></li><li><a href="#">手机 / 运营商 / 数码</a></li><li><a href="#">电脑 / 办公</a></li><li><a href="#">家居 / 家具 / 家装 / 厨具</a></li><li><a href="#">男装 / 女装 / 童装 / 内衣</a></li><li><a href="#">美妆 / 个护清洁 / 宠物</a></li><li><a href="#">女鞋 / 箱包 / 钟表 / 珠宝</a></li><li><a href="#">男鞋 / 运动 / 户外</a></li><li><a href="#">房产 / 汽车 / 汽车用品</a></li><li><a href="#">母婴 / 玩具乐器</a></li><li><a href="#">食品 / 酒类 / 生鲜 / 特产</a></li><li><a href="#">艺术 / 礼品鲜花 / 农资绿植</a></li><li><a href="#">医药保健 / 计生情趣</a></li><li><a href="#">图书 / 文娱 / 教育 / 电子书</a></li><li><a href="#">机票 / 酒店 / 旅游 / 生活</a></li><li><a href="#">理财 / 众筹 / 白条 / 保险</a></li><li><a href="#">安装 / 维修 / 清洗 / 二手</a></li><li><a href="#">工业品</a></li></ul></div><div class="middle_banner"><img src="data:image/banner.png" alt=""></div><div class="right_banner"><div class="top_user"><!-- 用户等录信息 --><div class="login_msg clearfix"><a href="#" class="no_login"><img src="./image/下载.png" alt=""></a><div class="text"><p>Hi~欢迎逛京东</p><p><a href="#">登录</a><span>&nbsp;|</span><a href="#">注册</a></p></div></div><!-- 按钮 --><div class="buttons"><a href="#">新人福利</a><a href="#">PLUS会员</a></div></div><!--中间的公告--><div class="title"><div class="top_title"><span class="hot_title">京东快报</span><a href="#">更多<span class="title_span">></span></a></div><div class="content_title"><div class="public"><a href="#" class="box">公告</a><a href="#">2020年春节物流服...</a></div><div class="public"><a href="#" class="box">最新</a><a href="#">N95口罩今年你备了...</a></div><div class="public"><a href="#" class="box">最新</a><a href="#">一家独霸中国口罩市...</a></div><div class="public"><a href="#" class="box">最新</a><a href="#">小米10配置出炉！5...</a></div></div></div><div class="bottom_user"><img src="data:image/content_title.png" alt=""></div></div></div></div>
</div>
<!--主体结束--><!--底部开始-->
<div class="footer "><div class="top_footer"><div class="w"><ul><li><b>多</b><span>品类齐全，轻松购物</span></li><li><b class="fast">快</b><span>多仓直发，极速配送</span></li><li><b class="good">好</b><span>正品行货，精致服务</span></li><li><b class="save">省</b><span>天天低价，畅选无忧</span></li></ul></div></div><div class="middle_footer  w"><dl><dt>购物指南</dt><dd>购物流程</dd><dd>会员介绍</dd><dd>生活旅行</dd><dd>常见问题</dd><dd>大家电</dd><dd>联系客服</dd></dl><dl><dt>配送方式</dt><dd>上门自提</dd><dd>211限时达</dd><dd>配送服务查询</dd><dd>配送费收取标准</dd><dd>海外配送</dd></dl><dl><dt>支付方式</dt><dd>货到付款</dd><dd>在线支付</dd><dd>分期付款</dd><dd>公司转账</dd></dl><dl><dt>售后服务</dt><dd>售后政策</dd><dd>价格保护</dd><dd>退款说明</dd><dd>返修/退换货</dd><dd>取消订单</dd></dl><dl><dt>特色服务</dt><dd>夺宝岛</dd><dd>DIY装机</dd><dd>延保服务</dd><dd>京东E卡</dd><dd>京东通信</dd><dd>京鱼座智能</dd></dl><dl class="last-dl"><dt>京东自营覆盖区县</dt><dd><p>京东已向全国2661个区县提供自营配送服务，支持货到付款、POS机刷卡和售后上门服务。</p><a href="#">查看详情</a></dd></dl></div><div class="bottom_footer"><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="#">Media & IR</a></p><p class="public"><a href="">京公网安备 11000002000088号</a><span>|</span><a href="">京ICP证070359号</a><span>|</span><a href="">互联网药品信息服务资格证编号(京)-经营性-2014-0008</a><span>|</span><a href="">新出发京零 字第大120007号</a></p><p class="public"><a href="">互联网出版许可证编号新出网证(京)字150号</a><span>|</span><a href="">出版物经营许可证</a><span>|</span><a href="">网络文化经营许可证京网文[2014]2148-348号</a><span>|</span><a href="">违法和不良信息举报电话：4006561155</a></p><p class="public"><a href="">Copyright © 2004 - 2020  京东JD.com 版权所有</a><span>|</span><a href="">消费者维权热线：4006067733经营证照</a><span>|</span><a href="">(京)网械平台备字(2018)第00003号</a><span>|</span><a href="">营业执照</a></p><p class="public"><a href="">Global Site|Сайт России</a><span>|</span><a href="">Situs Indonesia</a><span>|</span><a href="">Sitio de España</a><span>|</span><a href="">เว็บไซต์ประเทศไทย</a></p><p class="public"><a href="">京东旗下网站：京东钱包</a><span>|</span><a href="">京东云</a></p><img src="./image/footer.png" alt=""></div>
</div>
<!--底部结束-->
</body>
</html>

base.css代码

p,h1,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,body{margin: 0;padding: 0;font-size: 12px;font-family: "微软雅黑";color: #666666;list-style: none;
}
img,input{outline-style: none;padding: 0;margin: 0;border: none;vertical-align: middle;
}
.clearfix::after{content: "";height: 0px;line-height: 0px;clear: both;visibility: hidden;display: block;
}
.clearfix{*zoom:1;
}
a{text-decoration: none;color: #666666;
}
a:hover{color:#e4393c;
}
/*登录的版心*/
.login_w{width: 990px;margin: 0 auto;
}
/*首页的版心*/
.w{width: 1190px;margin: 0 auto;
}

footer.css代码

.footer{/*margin-top: 100px;*/background-color: #eaeaea;
}
.top_footer{height: 100px;border-bottom: 1px solid #ccc;
}
.top_footer ul{display: flex;
}
.top_footer li{flex: 1;height: 100px;line-height: 100px;text-align: center;font-size: 18px;font-weight: 700;position: relative;
}
.top_footer b{width: 36px;height: 42px;line-height: 42px;display: block;background: url("../image/ico_service.png") no-repeat;position: absolute;top: 30px;left: 25px;text-indent: -2000em;
}
.top_footer .fast {background-position: 0px -42px;
}
.top_footer .good {background-position: 0px -85px;
}
.top_footer .save {background-position: 0px bottom;
}
.middle_footer {height: 220px;border-bottom: 1px solid #ccc;
}
.middle_footer dl {float: left;width: 198px;margin-top: 28px;
}
.middle_footer dt {height: 30px;font-size: 16px;font-weight: 700;
}
.middle_footer dd {height: 25px;font-size: 13px;
}.middle_footer .last-dl {height: 147px;background: url("../image/ico_footer.png") no-repeat;
}.middle_footer .last-dl dt {text-align: center;
}.middle_footer .last-dl p {padding: 0 5px;line-height: 20px;
}.middle_footer .last-dl a {float: right;margin-right: 10px;margin-top: 5px;
}
.bottom_footer {height: 300px;padding-top: 10px;text-align: center;
}
.bottom_footer p{font-size: 13px;
}
.bottom_footer span {margin: 0 10px;
}
.bottom_footer .public {margin-top: 10px;
}
.bottom_footer .public span{margin: 0 8px;
}
.bottom_footer img{width: 583px;height: 39px;margin-top: 50px;
}

index.css代码

.main_body  .banner  {height: 500px;
}
.content{background-color: #f6f6f6;
}
.left_banner {float: left;width: 190px;height: 472px;background-color: #fff;padding-top: 11px;box-sizing: border-box;margin-top: 12px;
}
.left_banner li {height: 25px;line-height: 25px;padding-left: 12px;font-size: 14px;
}
.left_banner li:hover {background-color: rgba(0,0,0,.5);
}
.left_banner a:hover{color: red;
}
.middle_banner {float: left;width: 789px;height: 472px;margin-top: 12px;margin-left: 11px;
}
.right_banner {margin-top: 12px;float: right;height: 472px;width: 190px;background-color: #fff;
}
.top_user {height: 106px;border-bottom: 1px solid #ccc;padding: 20px 16px 0px 16px;box-sizing: border-box;
}
.top_user .no_login{width: 40px;height: 40px;display: block;border-radius: 50%;float: left;
}
.top_user .no_login  img {width: 100%;height: 100%;border-radius: 50%;
}
.top_user .text {float: left;margin-left: 10px;
}
.top_user .text p {margin-bottom: 5px;
}
.buttons a {width: 70px;height: 24px;display: inline-block;color: #fff;text-align: center;line-height: 24px;background-color: #e01222;margin-top: 10px;border-radius: 10px;
}
.right_banner .title{height: 132px;padding: 0px 15px;
}
.right_banner .title .top_title{margin-top: 8px;height: 26px;line-height: 26px;
}
.right_banner .title .top_title .hot_title{font-size: 14px;font-weight: 700;color: #000000;
}
.right_banner .title  .title_span{float: right;padding-left: 5px;font-family: "黑体";}
.right_banner .title .top_title a{float: right;
}
.title .content_title .public{height: 20px;line-height: 20px;margin-bottom: 6px;
}
.title .content_title .public a:first-child{display: inline-block;height: 16px;line-height: 16px;width: 30px;margin-top: 5px;text-align: center;background-color: rgba(0,0,0,.1);margin-right: 7px;color: red;
}
.right_banner .bottom_user{margin-left: -1px;
}
.right_banner .bottom_user img{width: 192px;height: 226px;
}

header.css代码

.nav{height: 30px;border-bottom: 1px solid #ccc;background-color: #e3e4e5;
}
.l_nav {line-height: 31px;float: left;
}
.l_nav b{position: relative;top: 2px;color: red;font-size: 17px;
}
.r_nav {float: right;line-height: 30px;
}.r_nav li {float: left;position: relative;
}
.r_nav li b {position: relative;top: 2px;
}.r_nav .line {width: 1px;height: 10px;background-color: #ccc;margin: 10px 10px 0px 10px;
}
.r_nav  .phone {display: block;width: 66px;height: 66px;border: 1px solid #ccc;padding: 3px;box-sizing: border-box;position: absolute;left: -7px;
}.r_nav  .phone img {width: 60px;height: 60px;
}.r_nav  .phone s {width: 0px;height: 0px;display: block;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 5px solid transparent;border-bottom: 5px solid #f6f6f6;position: absolute;left: 25px;top: -10px;
}
.m_nav {height: 140px;position: relative;
}
.m_nav .logo {float: left;
}
.m_nav .logo a {width: 190px;height: 140px;display: block;background:url("../image/logo.v3.jpg") no-repeat -50px -12px;text-indent: -2000em;
}
.search_box {float: left;border:1px solid red;margin-left: 20px;margin-top: 25px;position: relative;
}
.search_box .search {width: 498px;height: 33px;padding-left: 25px;box-sizing: border-box;float: left;
}
.search_box .btn {width: 50px;height: 33px;background-color: #f10215;float: left;
}
.search_box .search_img {position: absolute;right: 15px;top: 5px;font-size: 20px;color: #fff;
}
.cart {float: left;width: 122px;height: 31px;border: 1px solid #ccc;line-height: 24px;text-align: center;background-color: #fff;margin-top: 25px;margin-left: 22px;position: relative;
}
.cart a{padding-left: 6px;
}
.cart b {font-size: 20px;color: red;position: relative;top: 2px;
}
.cart span {width: 14px;height: 14px;line-height: 14px;background-color: red;text-align: center;color: #fff;border-radius: 50%;display: block;position: absolute;right: 78px;top: 0px;
}
.hot_word ul{float: left;margin-left: -696px;margin-top: 65px;
}.hot_word li {float: left;margin-right: 10px;
}
.nav_item {float: left;margin-left: -42px;margin-top: 54px;
}
.nav_item ul {float: left;
}.nav_item li {float: left;font-size: 15px;font-weight: 700;
}
.nav_item a {padding: 0 10px;
}

效果演示

京东的登录界面
GitHub下载地址

HTML和CSS实现京东首页（附GitHub地址）相关推荐

HTML和CSS实现京东首页（html和css详解）
HTML和CSS实现京东首页,效果图如下: 基本代码如下:需要源代码和素材的评论区留言 (1)页面部分设计如下: <!DOCTYPE html> <html lang="e ...
【我的安卓进阶之旅】Opengl Es(5)三维图形绘制圆锥、圆柱和球体（附Github地址）
之前的博客中,我们绘制了三角形.正方形.圆形.立方体,今天我们将绘制圆锥.圆柱和球体.能够绘制这些基本的常规几何形体后,其他的常见几何形体的绘制对于我们来说就基本没问题了. 绘制圆锥由之前的博客,我 ...
dubbo-环境搭建,实现一个简单地dubbo实例（附github地址）
一.建立maven模块和provider.consumer.service子模块,其中service是开发接口的模块建立一个maven模块,不选择样板,直接next知道完成,建立三 ...
高精度人脸表情识别（附GitHub地址）
编者按:本文原作者吴捷,目前于中山大学就读研究生.研究领域为计算机视觉与自然语言处理.本文原载于知乎,经作者授权发布.欢迎去GitHub给大佬加星. 先放出GitHub地址: https://gith ...
Top10机器学习开源项目发布，历时一个月评出 | 附GitHub地址
原作:Mybridge 问耕补充整理量子位出品 | 公众号 QbitAI 从将近250个机器学习开源项目中,综合各种条件进行打分排序,最终Mybridge团队评选出十大最新.最棒的机器学习开源项 ...
高并发 WEB 服务器 nginx 源码通读中文分析注释，带详细函数注释及函数调用注释，附 github 地址，后期持续维护更新...
github地址:https://github.com/y123456yz/reading-code-of-nginx-1.9.2 对源码通读注释,函数进行了详细注释.同时对相关功能进行了优化,日志功 ...
Gesture_cognition(手势识别)【附github地址】
Gesture_cognition(手势识别)有问题邮箱联系,免费开源,私信不常看,邮箱:xingchenziyi@163.com 一.项目信息该项目基于Tensorflow2.1开发,自建六种 ...
react无缝滚动_react 实现一个无限循环的轮播器附github地址
一个简单的轮播为了更具有通用和参考性,轮播组件中,轮播只使用了react,没有添加其他的状态管理,或者参数类型限制的库. 所以这个轮播的方法,同样可以用于vue 等其他框架 github地址最终效 ...
[HTML+CSS] 仿京东首页项目实战
实现效果: 此项目要实现结构与样式相分离的设计思想样式文件的分类: 初始化css让浏览器风格统一,把常用的初始化语句放入base.css里面我们把一些公共的样式放入common.css里面(因为 ...

HTML和CSS实现京东首页（附GitHub地址）

HTML代码

基本结构

需要练手，或者需要代码的留言即可

base.css代码

footer.css代码

index.css代码

header.css代码

效果演示

HTML和CSS实现京东首页（附GitHub地址）相关推荐

最新文章

热门文章