仿京东首页(静态html+css)

京东首页的头部和尾部代码

html代码:


<head><meta charset="utf-8"><title>京东(JD.COM)-综合网购首选-正品低价、品质保证、配送及时、轻松购物!title><meta name="description" content="京东JD.COM-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。"><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"><link rel="shortcut icon" type="image/x-icon" href="favicon.ico"><link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/base.css">head><body><header><div class="w"><a href="#"><img src="images/Advertisment.jpg" alt="头广告">a>div>header><div class="shortcut"><div class="w"><ul class="fl city" ><li><i class="f10">i>北京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="#">手机京东<div class="qrcode">div>a>li>ul>div>div><div class="w middle"><div class="logo"><h1>	<a href="#">a>h1>div><div class="form"><input type="text" name="search" placeholder="手机"><div class="camera"><i>i>div><button type="button"> <i>i>button>div><div class="shopCar"><a href="#"><i class="f10">i>我的购物车<span>0span>a>div><div class="hotwords"><a href="#" class="f10">阿胶滋补节a><a href="#">玩所未玩a><a href="#">圣诞礼物a><a href="#">每100-30a><a href="#">养殖取暖a><a href="#">圣诞狂欢a><a href="#">OPPOa><a href="#">满千减百a>div><div class="navitems"><ul><li><a href="#">秒杀a>li><li><a href="#">优惠券a>li><li><a href="#">PLUS会员a>li><li><a href="#">闪购a>li><li class="space1">li><li><a href="#">拍卖a>li><li><a href="#">京东时尚a>li><li><a href="#">京东超市a>li><li><a href="#">京东生鲜a>li><li class="space1">li><li><a href="#">海囤全球a>li><li><a href="#">京东金融a>li>ul>div><div class="advertisement"><a href="#">a>div>div><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"><ul><li><dl><dt><h5>购物指南h5>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>li><li><dl><dt><h5>配送方式h5>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>li><li><dl><dt><h5>支付方式h5>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>li><li><dl><dt><h5>售后服务h5>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>li><li><dl><dt><h5>特色服务h5>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="#">京东JD+a>dd>dl>li>ul>div><div class="fr"><div class="content"><h5>京东自营覆盖区县h5><div class="contentP"><p>京东已向全国2661个区县提供自营配送服务,支持货到付款、POS机刷卡和售后上门服务。p><p><a href="#">查看详情<i>i>a>p>div>div>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 Sitea><span>|span><a href="#">Media & IRa>p><div class="safe"><p><a href="#">京公网安备 11000002000088号a><span>|span><a href="#">京ICP证070359号a><span>|span><a href="#">互联网药品信息服务资格证编号(京)-经营性-2014-0008a><span>|span><a href="#">新出发京零 字第大120007号a><span>|span>p><p><a href="#">互联网出版许可证编号新出网证(京)字150号a><span>|span><a href="#">出版物经营许可证a><span>|span><a href="#">网络文化经营许可证京网文[2014]2148-348号a><span>|span><a href="#">违法和不良信息举报电话:4006561155a><span>|span>p><p><a href="#">Copyright © 2004 - 2018  京东JD.com 版权所有a><span>|span><a href="#">消费者维权热线:4006067733经营证照a><span>|span><a href="#">(京)网械平台备字(2018)第00003号a><span>|span><a href="#">营业执照a><span>|span>p><p><a href="#">Global Sitea><span>|span><a href="#">Сайт Россииa><span>|span><a href="#">Situs Indonesiaa><span>|span><a href="#">Sitio de Españaa><span>|span><a href="#">เว็บไซต์ประเทศไทยa><span>|span>p><p><a href="#">京东旗下网站:京东钱包a><span>|span><a href="#">京东云a><span>|span>p>div><div class="icomoon"><p><a href="#">a><a href="#">a><a href="#">a><a href="#">a><a href="#">a>p>div>div>footer>body>
html> 

css文件中的代码

/* 公共样式表 */
.w { width: 1190px;/* 京东的版心 */margin: 0 auto;
}
body {background-color: #f0f3ef;
}
.fl {float: left;
}
.fr {float: right;
}
.f10 {color: #f10215!important;
}
input, button {border: 0px;outline: none; /* 清除输入框的蓝边 */
}
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 {list-style: none;margin: 0;padding: 0;
}
a {text-decoration: none;color: #999999;display: inline-block;
}
span {color: #ccc;margin: 0 5px;
}
@font-face {  /* 声明字体 */font-family: 'icomoon';src:  url('../fonts/icomoon.eot?ycbsl3');src:  url('../fonts/icomoon.eot?ycbsl3#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?ycbsl3') format('truetype'),url('../fonts/icomoon.woff?ycbsl3') format('woff'),url('../fonts/icomoon.svg?ycbsl3#icomoon') format('svg');font-weight: normal;font-style: normal;
}
/* header--开始 */header {height: 80px;background-color: #5a0b11;}
/* header--结束 */
/* 快速导航栏--开始 */.shortcut {height: 30px;background-color: #e3e4e5;border-bottom: 1px solid #cccccc;font-size: 12px;color: #999999;}.city {line-height: 30px;margin-left: 205px;}.shortcut a {	line-height: 30px;	}.shortcut a:hover {color: #e33333;}.shortcut ul li {float: left;position: relative;}.shortcut i {font-family: "icomoon";	font-style: normal;}.space {width: 1px;height: 10px;background-color: #cccccc;margin: 11px 12px 0;}a .qrcode {position: absolute;right: -12px;margin: 0 1px 0px 0px;width: 66px;height: 66px;border: 2px solid #cfcfcf;background: #f6f6f6 url(../images/mobile_qrcode.png) 50% no-repeat;}
/* 快速导航栏--结束 */
/* 导航栏--开始 */.middle {height: 140px;position: relative;}.logo h1 a {display: block;width: 190px;height: 170px;background: url(../images/sprite.head.png) no-repeat;position: absolute;left: 0;top: -31px;box-shadow: 1px 0px 1px rgba(0, 0, 0, 0.2), -1px 0px 1px rgba(0, 0, 0, 0.2);}.form {width: 550px;height: 35px;position: absolute;left: 320px;top: 25px;display: flex;position: relative;}.form input {width: 91%;padding-left: 6px;font-size: 14px;color: #333;}.form button {width: 9%;background-color: #f10215; }.form .camera i {font-family: "icomoon";font-style: normal;font-size: 20px;color: #999;position: absolute;right: 65px;top: 5px;}.form button i {font-family: "icomoon";font-style: normal;color: #fff;font-size: 20px;}.form button, .form .camera i {cursor: pointer;}.shopCar a {width: 188px;height: 33px;line-height: 33px;text-align: center;background-color: pink;position: absolute;right: 100px;top: 25px;border: 1px solid #ccc;background-color: #fff;font-size: 12px;color: #f10214;}.shopCar i {font-family: "icomoon";font-style: normal;font-size: 14px;margin-right: 6px;}.shopCar span {height: 14px;width: 14px;font-size: 12px;text-align: center;line-height: 15px;background-color: #f10214;color: #fff;border-radius: 50%;position: absolute;right: 36px;top: 6px;}.hotwords {position: absolute;left: 320px;top: 65px;}.hotwords a {margin: 0 3px;font-size: 12px;}.navitems {position: absolute;bottom: 0;left: 225px;padding-bottom: 10px;}.navitems li {float: left;margin-right: 23px;}.navitems li a {font-size: 14px;color: #333;}.navitems li a:hover {color: #e33333;}.navitems .space1 {width: 1px;height: 10px;background-color: #cccccc;margin-top: 5px;}.advertisement a {display: block;width: 190px;height: 40px;background: url(../images/广告.gif) no-repeat;position: absolute;right: 0;bottom: 10px;}
/* 导航栏结束 */
/* 页面底部--start */footer {margin-top: 35px;background-color: #F0F3EF;}.service {padding: 30px 0;border-bottom: 1px solid #dedede;	}.service ul {display: flex;flex-direction: row;}.service ul li {text-align: center;font-size: 18px;font-weight: 700;color: #444;flex: 1;position: relative;}.service ul li:nth-child(1) h5,.service ul li:nth-child(2) h5,.service ul li:nth-child(3) h5,.service ul li:nth-child(4) h5 {width: 36px;height: 43px;position: absolute;bottom: -12px;left: 22px;		}.service ul li:nth-child(1) h5 {background: url(../images/sprite.footer.png) no-repeat left bottom;}.service ul li:nth-child(2) h5 {background: url(../images/sprite.footer.png) no-repeat -41px bottom;}.service ul li:nth-child(3) h5 {background: url(../images/sprite.footer.png) no-repeat -82px bottom;}.service ul li:nth-child(4) h5 {background: url(../images/sprite.footer.png) no-repeat -123px bottom;}.help {height: 200px;border-bottom: 1px solid #dedede;}.help ul li {float: left;padding-right: 140px;}.help ul li:last-child {padding-right: 0;}.help  dl dt {margin-top: 20px;margin-bottom: 5px;color: #666;}.help dl dd a {margin-top: 10px;font-size: 12px;color: #666;}.help dl dd a:hover {color: #c81623;}.content {width: 200px;height: 150px;margin-top: 20px;color: #666;background: url(../images/sprite.footer.png) no-repeat;font-size: 12px;}.content h5 {text-align: center;	font-size: 14px;}.content p:first-child {line-height: 18px;margin: 20px 10px 0;		}.content p a {float: right;color: #666;margin-right: 10px;}.content p a i {font-family: "icomoon";font-style: normal;font-size: 16px;color: #666;}.copyright {padding-top: 20px;text-align: center;}.copyright p a{color: #666;font-size: 12px;}.safe {margin-top: 10px;}.safe p a {color: #999;padding-top: 10px;}.content p a:hover,.copyright p a:hover,.safe p a:hover {color: #c81623;}.icomoon p a {display: inline-block;margin-top: 35px;width: 105px;height: 30px;text-align: center;	}.icomoon p a:nth-child(1) {background: url(../images/sprite.footer.png) no-repeat right top;}.icomoon p a:nth-child(2) {background: url(../images/sprite.footer.png) no-repeat right -38px;}.icomoon p a:nth-child(3) {background: url(../images/sprite.footer.png) no-repeat right -76px;}.icomoon p a:nth-child(4) {background: url(../images/sprite.footer.png) no-repeat right -114px;}.icomoon p a:nth-child(5) {background: url(../images/sprite.footer.png) no-repeat right -152px;}
/* 页面底部--end */

以上是学习记录过程做一份保存

此处插播一条重要消息!!!
如果你喜欢冷知识,
渴望探索神奇的世界,
想当一个无所不知的学霸,
就来关注我们吧。
在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部