仿京东首页(静态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 */

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

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

你可能感兴趣的:(HTML,前端案例)