基于HTML和CSS完成京东页面的制作

最新推荐文章于 2023-04-04 18:58:50 发布

小希一夏

最新推荐文章于 2023-04-04 18:58:50 发布

阅读量1.1w

点赞数 21

文章标签： HTML CSS 京东页面制作

本文链接：https://blog.csdn.net/weixin_42454678/article/details/99480188

版权

首先打开京东页面分析页面元素
在这里插入图片描述
由图可把整个页面分为4个部分，分别为top顶部部分，tip提示部分，mid中间部分，foot底部部分
然后编写每一部分的代码，边写边测试结果，防止一步错步步错
代码如下：
HTML部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/jd-work.css"/>
	</head>
	<body>
		<div class="top">
			<img src="https://misc.360buyimg.com/lib/img/e/logo-201305-b.png" id="img_1"/>
			<span id="login">欢迎登录</span>
			<div class="top_1">
				<a href="" id="top_a">登录页面，调查问卷</a>
			</div>
		</div>
		<div class="tip">
			<span>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！ 新版《京东隐私政策》已上线，将更有利于保护您的个人隐私。</span>
		</div>
		<div class="mid">
			<div class="mid_1">
			</div>
		</div>
		<div class="foot">
			<div class="foot_1">
				<ul id="ul_1">
				<li><a href="" id="foot_a">关于我们</a></li>
				<li><a href=""id="foot_a">练习我们</a></li>
				<li><a href=""id="foot_a">人才招聘</a></li>
				<li><a href=""id="foot_a">商家入驻</a></li>
				<li><a href=""id="foot_a">广告服务</a></li>
				<li><a href=""id="foot_a">手机京东</a></li>
				<li><a href=""id="foot_a">友情链接</a></li>
				<li><a href=""id="foot_a">销售联盟</a></li>
				<li><a href=""id="foot_a">京东社区</a></li>
				<li><a href=""id="foot_a">京东公益</a></li>
				<li><a href=""id="foot_a">English&nbsp;&nbsp;Site</a></li>
				</ul>
			</div>
			<div class="foot_2">
				<span id="foot_span">
					Copyright © 2004-2019  京东JD.com 版权所有
				</span>
			</div>
		</div>
	</body>
</html>

CSS部分：

/*去除留白*/
body,html{
	margin: 0px;
	padding: 0px;
}
/*头部部分*/
.top{
	width: 100%;
	height: 80px;
	border: 1px solid #fff8f0;
}
#img_1{
	margin-left: 170px;
}
#login{
	color: black;
	font-family: "微软雅黑";
	font-size: 25px;
	position: absolute;
	left: 360px;
	top: 25px;
}
#top_a{
	color: gray;
	font-size: 12px;
	font-family: "宋体";
	text-decoration: none;
	float: right;
}
.top_1{
	position: absolute;
	top: 50px;
	right: 200px;
}
#top_a:hover{
	color: red;
	text-decoration: underline;
}

/*提示部分*/
.tip{
	width: 100%;
	height: 35px;
	background-color: #fff8f0;
	text-align: center;
	line-height: 35px;
}
.tip>span{
	color: gray;
	font-size: 10px;
	font-family: "宋体";
}

/*中间部分*/
.mid{
	width: 100%;
	height: 470px;
	background-image: url("http://img11.360buyimg.com/da/jfs/t1/46924/22/7292/98299/5d4d0922E6f2c0705/a19b5f67a496b209.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-color: #971FE3;
}
.mid_1{
	width: 350px;
	height: 440px;
	background-color: #ffffff;
	float: right;
	position: relative;
	top: 10px;
	right: 170px;
}

/*链接部分*/
.foot{
	width: 100%;
}
#ul_1{
	margin-left: 170px;
}
#ul_1>li{
	list-style: none;
	text-decoration: none;
	float: left;
	margin-left: 15px;
}
#foot_a:hover{
	color: red;
}
/*#foot_a:hover{
	text-decoration: underline;
	color: red;
}*/
.foot_1{
	width: 100%;
	height: 30px;
	/*background-color: red;*/
	text-align: center;
	line-height: 30px;
}
.foot_2{
	width: 100%;
	height: 20px;
	/*background-color: green;*/
	text-align: center;
	line-height: 20px;
}
#foot_span{
	color: gray;
	font-size: 12px;
	font-family: "宋体";
}

最终实现结果如图：
在这里插入图片描述
用户扫码登录的功能还没有完成，但是整体思路以及具体怎样去实现有了大致了解，以下是编写工程中用到的知识点，总结如下：

引入CSS的四种方式：
1）行内式，在标签内添加属性style=””,不好维护,不推荐使用。
2）内嵌式，使用style标签
3）连接式，在head头部添加标签link引入css文件,推荐使用。
4）内嵌连接式，用style标签，用@import url(css文件)

三种常用选择器的使用场景
1）标签选择器:可以选择到所有相同的指定标签
2）class选择器:可以选择到指定类的标签。
3）id选择器:可以选择的指定到唯一的标签。
常用选择器的优先级：
ID选择器>类选择器>元素选择器

CSS中的定位：
	绝对定位:
	absolute  :定位离开之后释放的之前的位置   基于外层父级标签来说
    相对定位：
	 relative: 定位离开之后之前的位置没有释放  基于之前的位置来说 
	固定定位：
     fixed   ：始终是基于浏览器的左上角定位    适合做广告
    默认定位： static   ：初始的定位的操作

CSS常用属性：
字体：
	            /*字体的颜色*/
				color: gray;
				/*字体的大小*/
				font-size: 12px;
				/*
				/*字体的加粗*/
				/*font-weight: bold;*/
				/*字体的风格*/
			    /*font-family: 宋体;*/
				/*字体倾斜*/
				/*font-style: italic;*/
text：
	            /*下划线展示*/
				text-decoration: underline;
	           /*去除下划线*/
				text-decoration: none;
	           /*文本居中*/
				text-align: center;
行高：行高的高度和div外面的高度一致这时候里面的内容就会垂直居中
                line-height: 40px; 
背景：
                /*设置背景图片*/
                background-image: url("http://img30.360buyimg.com/da/jfs/t22399/154/765213112/96035/f94f9605/5b17512dN2de9d722.jpg");
				/*设置背景图片不重复*/
				background-repeat: no-repeat;			
				/*调整背景图片的位置   X   Y*/
				background-position: center;
				/*调整背景图片的大小   宽  高  */
				/*background-size: 300px  500px;*/
				/*背景颜色    red   #f0000  rgb(255,0,0)  rgba(255,0,0,.5){包含透明度} */
				background-color: rgba(255,0,0,.5);
				
				.div1{
				width: 200px;
				height: 200px;
				border: 1px solid rgba(255,0,0);
				/*rgba(0,0,255,0.5)调整颜色 	最后一个参数表示透明度*/
				background-color: red;
				color: rgba(255,0,0);
				/*设置透明度，整个背景和字体都会改变	0-1*/
				opacity: 0.5;
				/*超出部分隐藏*/
				/*overflow: hidden;*/
				/*超出部分有滚动条*/
				overflow: auto;
			}
			#span_1{
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/*行内元素转块级元素   inline   block  none(隐藏)*/
				display: block;
			}
			ul{
				/*设置向右浮动*/
				float: right;
			}
			li{
				list-style: none;
				/*设置向左浮动*/
				float: left;
				/*内边距*/
				padding-left: 15px;
			}