京东首页静态页面html+css

个人名片:
作者简介:一名大一在校生,web前端开发专业
个人主页: python学不会
第一次写博客,写的不好望指正
学习目标: 坚持每一次的学习打卡

项目介绍:

  1. 京东首页项目主要是用html+css完成页面布局
  2. 项目使用工具为VSCode进行编辑,下载地址(https://code.visualstudio.com/,根据自己的电脑下载对应的版本,按照默认的安装进程将工具安装好。)
  3. 项目将运用到html基础知识+css样式,div布局,浮动与定位;

项目图如下:


京东首页静态页面html+css_第1张图片

实现步骤:

打开vscode创建images文件夹将所需的图片放入进去,京东图标导入项目中;
将所用到的外部样式文件 normalize.css放入项目的css文件夹中。
将所需要导入的字体文件font文件导入项目中。

导入后的项目如图所示:京东首页静态页面html+css_第2张图片

先将项目划分为几个模块

  1. 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">199100</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>ICP070359<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,html,css,前端)