html+css京东电商页面

最新推荐文章于 2021-09-27 12:00:05 发布

无叙

最新推荐文章于 2021-09-27 12:00:05 发布

阅读量4.8k

点赞数 15

分类专栏：学习文章标签： css html html5

本文链接：https://blog.csdn.net/qq_43925054/article/details/106538546

版权

学习专栏收录该内容

3 篇文章 1 订阅

订阅专栏

京东电商页面

开始的准备工作

-准备好目录
-准备好图片素材

一级目录是jingdong这个文件，里面包括css+js+images+fonts文件，再包括主页面index以及图标ico

开始写代码

head的内容

简单介绍一下

normalize.css是一个准备好的初始化文件直接用
一般搜索网站的ico直接在后面写上/favicon.ico就可以获取该网站的图标
第三个链接是关于index的头部内容和尾部内容的主要css样式
关于三大标签的优化，title名字起的要有讲究;description网站说明的内容也有讲究；最后一个是keywords关键字一般6~8个关键字，电商可以多一点，当用户搜索你网站会有效果，内容应该是网站卖的产品。

这是关于head中三大标签的一些效果
特别的，获取网页的效果图可以使用火狐浏览器里面的截图工作，ps里面获取位置像素

<head>
	<meta charset="UTF-8">
	
	<!-- 初始化 -->
	<link rel="stylesheet" href="css/normalize.css" />
	<!-- 添加图标 -->
	<link rel="shortcut icon" href="favicon.ico" />
	<!-- 头部和底部  css样式 -->
	<link rel="stylesheet" href="css/base.css" />
	<!-- 三大标签 title desvription keywords -->
	<title>京东(JO.com)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
	<!-- title最先出现的词语权重最高，百度28个中文，Google，35个中文 -->
	<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />
</head>

body的内容

hedaer头部

效果图

<!-- 广告开始 -->
	<header>
		<div class="w">
			<a href="#"> <img src="images/header.jpg" alt=""></a>
		</div>
	</header>
<!-- 广告结束 -->

.w{
	/*版心*/
	width: 1190px;
	margin: 0 auto;/*居中对齐*/
}
header{
	height: 80px;
	background-color: #020000;
}

快速导航栏

效果图
分析一下图片：
在广告header下面有一个区域叫shortcut，给它一个背景颜色字体行高和高度，主要的内容是里面的字体，左边区域是一个小图标加北京，右边是一串文字和图标，我们可以设置左右浮动和列表。
关于小图标的添加，可以在IcoMoon官网下载，在css代码里面导入的方式我附在下面。要结合上图中准备目录里的文件来看

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?a64860');
  src:  url('../fonts/icomoon.eot?a64860#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?a64860') format('truetype'),
    url('../fonts/icomoon.woff?a64860') format('woff'),
    url('../fonts/icomoon.svg?a64860#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.fl{
	float: left;
}
.fr{
	float: right;
}
a{
	text-decoration: none;
	color: #999;
	font-size: 12px;
	/*设置链接文字的颜色以及取消下划线*/
}
a:hover{
	color: #c81623;
}

这是一部分css样式，包括链接的处理以及浮动，字体包的导入

<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="#">我的京东<i></i></a></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="#">客户服务<i></i></a></li>
			<li class="space"></li>
			<li><a href="#">网站导航<i></i></a></li>
			<li class="space"></li>
			<li><a href="#">手机京东</a></li>
		</ul>
	</div>
</div>

再次分析效果图，发现右边的字体有些不一样，有的加了图标，中间有的加了小竖线。还有免费注册的颜色。

/*导航栏开始*/
.shortcut{
	height: 30px;
	background-color: #e3e4e5;
	border-bottom: 1px solid #ddd;
	font-size: 12px;
	line-height: 30px;
	color: #999;

}
.city{
	margin-left: 30px;
	/*因为北京前面还需要一个地方放logo图片*/
}
.shortcut li{
	font-family: 'icomoon';
	float: left;

}
.shortcut i{
	font-style: normal;

}
.space{
	/*小竖线*/
	margin: 10px 12px 0;上左右下
	height: 10px;
	width: 1px;
	background-color: #ccc;
}

.f10{
	color: #f10215;
}
/*导航栏结束*/

快速导航底下的一层

最右边包含一个二维码，但是这个二维码属于导航栏手机京东列表那一部分，
（所以改动的思路是在a标签那里加一个类mobile添加img，设置父类为相对布局，图片为绝对布局调整位置，放到手机京东的最下方。）
最左边有一个logo
二维码部分

在这里插入图片描述

.mobile{
	position: relative;
}
.mobile img{
	position: absolute;
	left: -7px;
	top: 24px;
	border: 1px solid #ccc ;
	padding: 2px;
}

效果如下
在这里插入图片描述

左侧logo部分

分析一下
中间大部分叫做middle然后有一个logo区域，h1标签为了提高权重logo也是一个a下的背景。

为了调试logo的位置，css代码如下：
首先要确定中间middle的高度，然后设置logo的位置，是指a标签里面的背景图片，而且要转化成块状元素。这里定位用的比较多。
还有有一个细节就是logo的h1标签要去除内外边距。

.middle{
	height: 140px;
	
	position: relative;
}
.logo{
	position: absolute;
	top: -30px;
	left: 0;
}
.logo a{
	display: block;
	height: 170px;
	width: 190px;
	background: #fff url(../images/logo.png) no-repeat;
	
}

目前效果图
在这里插入图片描述

搜索框的制作

在这里插入图片描述
html的代码

<div class="search">
		<input type="text" placeholder="扫描仪">
		<button><i></i></button>
	</div>

css代码

先给search这个区域设置一下高度宽度以及它在中间位置的定位
左侧的input搜索内容设置左浮动，同样设置好宽度高度加上红色的边框以及里面字体的大小
右侧的button按钮小红框背景加一个图标，图标设置颜色白色

.search{
	width: 550px;
	height: 35px;
	
	position: absolute;
	top: 25px;
	left: 320px;
}
.search input{
	width: 495px;
	height: 33px;
	border:1px solid #f10215;
	float: left;
	font-size: 14px;
	padding-left: 3px;
}
.search button{
	height: 35px;
	width: 50px;
	background-color: #f10215;
	float: left;
}
.search button i{
	font-family: 'icomoon';
	font-style: normal;
	color: #fff;
}

购物车以及关键字

效果图：在这里插入图片描述
html代码部分

 我的购物车 0


/*购物车*/
.shopCar{
	width: 188px;
	height: 33px;
	border: 1px solid #ccc;
	position: absolute;
	top: 25px;
	right: 95px;
	background-color: #fff;
	line-height: 33px;
	text-align: center;

}

.shopCar i{
	font-family: 'icomoon';
	margin-right: 5px;
	font-style: normal;
}
.shopCar a{
	color: #f10215;
}
.shopCar span{
	width: 15px;
	height: 15px;
	background-color: #f10215;
	border-radius: 50%;
	position: absolute;
	top: 5px;
	right: 30px;
	font-size: 12px;
	color: #fff;
	line-height: 15px;
}

效果图
在这里插入图片描述

<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>
<!--关键字结束-->

.hotwords{
	position: absolute;
	top: 68px;
	left: 320px;
}

无叙

关注

15
点赞
踩
72

收藏

觉得还不错? 一键收藏
4
评论
html+css京东电商页面

京东电商页面开始的准备工作开始写代码head的内容body的内容hedaer头部开始的准备工作-准备好目录-准备好图片素材一级目录是jingdong这个文件，里面包括css+js+images+fonts文件，再包括主页面index以及图标ico开始写代码head的内容简单介绍一下normalize.css是一个准备好的初始化文件直接用一般搜索网站的ico直接在后面写上/favicon.ico就可以获取该网站的图标第三个链接是关于index的头部内容和尾部内容的主要css样式关
复制链接

扫一扫