web练习一——qq注册面开发（二）

最新推荐文章于 2023-02-07 20:48:43 发布

敢跟头像对视三秒吗？

最新推荐文章于 2023-02-07 20:48:43 发布

阅读量241

点赞数

分类专栏： web开发练习

本文链接：https://blog.csdn.net/weixin_45769564/article/details/113726222

版权

web开发练习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

第二节，我们要制作注册网页中左边的主要框架，以及网上我们上一篇文章做的代码格式在这里插入图片描述
在我们网站的右半部，包括了一些小的图标和一写小的标题输入框
可以让我们对一些类似绝对定位相对定位或者一些输入框的对其，美化，网站也叫格式等小细节进行熟悉，博主的想法是，在最开始就要进行一些最真实的体验，反而对我们以后深入学习有不少好处
下面将源码跟大家分享

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>QQ注册--香江小海涛</title>
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />

	</head>
	<body>
		<div id="wrapper">
			<div id="header"></div>
			<div id="main">
				<div id="left">
					<div class="im">
						<!-- <img src="img/1.PNG"> -->

					</div>
					<div class="logo">
						<a href="#">QQ</a>
					</div>

				</div>
				<div id="right">
					<div class="line1">
						<div class="qqlh">
							<img src="img/a.PNG" alt="靓号">
							<div class="qqlh_bj">QQ靓号</div>
						</div>

					</div>
					<div class="line2">
						欢迎注册QQ 

					</div>
					<div class="line3">
						每一天乐在沟通
						<a href="#">免费靓号</a>
					
					</div>



				</div>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>

#wrapper #main #left .im{
	background-image: url(../img/1.PNG);
	width: 480px;
	position: absolute;
	height: 100%;
	background-size: cover;
	
	
	
}
#wrapper #main #left{
	float: left;
	
	
}
#wrapper #main #right{
	float: right;
	/* border: 2px solid green; */
	width: 310px;
}
#wrapper #main #left .logo a{
	font-size: 50px;
	text-decoration: none;
	position: absolute;
	left: 140px;
	top: 5px;
	
}
@media (max-width:800px) {
	#wrapper #main #left .im{
		display: none;
		
		
		
	}
}
#wrapper #right .line1 .qqlh .qqlh_bj{
	width: 70px;
	height: 30px;
	background-color:#fc4f52 ;
	position: absolute;
	left: 0;
	top: 12px;
	z-index: 99;
	color:white ;
	padding-left: 34px;
	border-radius: 5px;
	
}
#wrapper #right .line1 .qqlh{
	position: relative;
	margin-left: 180px;
	
}
#wrapper #right .line1 .qqlh img{
	position: absolute;
	left: 0;
	top: 0;
	z-index: 100;
	
	
}
/* 句对定位会使其位置脱离文档流 */

/* #ff744d */
#wrapper #right{
	
}

/* 浮动无法居中？ */
#wrapper #right .line2{
	margin-top: 60px;
	font-size: 40px;
	
}
#wrapper #right .line1{
	
}
#wrapper #right .line3 a{
	text-decoration: none;
	color: limegreen;
	margin-left: 20px;
	
}
#wrapper #right .line3{
	color: lightblue;
	font-size: 25px;
	margin-top: 10px;
}

这里，基本上在网页中绝对定位的使用方法是比较简单的，但是一般一个绝对定位我们会有个曾位置关系，绝对位置会脱离文档流，我们需要设定层次关系来规定他们谁在上面的图层，这里我们会用到z-index值，需要主义的有两点：这个特性后面的值越大那么就越在上层，另一个是：z-index这个css必须结合position绝对定位才能生效，只为绝对定位服务，最后是一个雄安新的，我们现在的css已经很多了，相同的css从上往下读，下面的css会把上面盖的css覆盖掉