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

首先打开京东页面分析页面元素
基于HTML和CSS完成京东页面的制作_第1张图片
由图可把整个页面分为4个部分,分别为top顶部部分,tip提示部分,mid中间部分,foot底部部分
然后编写每一部分的代码,边写边测试结果,防止一步错步步错
代码如下:
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: "宋体";
}


最终实现结果如图:
基于HTML和CSS完成京东页面的制作_第2张图片
用户扫码登录的功能还没有完成,但是整体思路以及具体怎样去实现有了大致了解,以下是编写工程中用到的知识点,总结如下:

引入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;
			}

你可能感兴趣的:(基于HTML和CSS完成京东页面的制作)