web练习一——qq注册面开发（四）源码

最新推荐文章于 2022-12-16 08:00:00 发布

敢跟头像对视三秒吗？

最新推荐文章于 2022-12-16 08:00:00 发布

阅读量226

点赞数 1

分类专栏： web开发练习

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

版权

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

16 篇文章 0 订阅

订阅专栏

html部分：

<!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 class="tnav">
							<!-- <img src="img/mail.PNG" > -->
							<a href="">邮箱地址</a>
							<a href="">简体中文</a>
							<a href="">意见反馈</a>
							

						</div>
					</div>

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

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

						</div>
						<div class="line4">
							<input type="text" name="" id="" value="" placeholder="昵称" />


						</div>
						<div class="line5">
							<input type="password" name="" placeholder="密码" />
						</div>
						<div class="line6">
							<select name="phonenum">
								<option value="+49">+49</option>
								<option value="+86">+86</option>
								<option value="+55">+55</option>
								<option value="+21">+21</option>
							</select>
							<input class="shouji" type="text" name="" id="" value="" placeholder="手机号码" />
							<br>
							可通过手机号找到密码
						</div>
						<div class="line7">
							<input type="button" name="register" id="register" value="立 即 注 册" />
							<!-- <button type="button">注册</button> -->
						</div>
						<div class="line8">
							<input type="checkbox" name="know" id="know" value="know1" />同时开通QQ空间
							<br>
							<input type="checkbox" name="know" id="know" value="know2" />我已阅读并同意相关服务条款个隐私条款



						</div>
						<div id="footer">
							&copy;2021 香江小海涛
						</div>

					</div>






				</div>
			</div>

		</div>
	</body>
</html>

#wrapper #main #left .im {
	background-image: url(../img/1.PNG);
	width: 480px;
	position: fixed;
	height: 100%;
	background-size: cover;



}

#wrapper #main #left {
	float: left;


}

#wrapper #main #right {
	float: right;
	/* border: 2px solid green; */
	width: 1000px;

}

#wrapper #main #left .logo a {
	font-size: 50px;
	text-decoration: none;
	position: fixed;
	left: 30px;
	top: 5px;

}

@media (max-width:1250px) {
	#wrapper #main #left .im {
		/* display: none; */
		width: 240px;
		background-size: cover;



	}
}

@media (max-width:1010px) {
	#wrapper #main #left .im {
		display: none;
		/* width:240px ;
		background-size: cover; */



	}
}

@media (max-width:800px) {
	#wrapper #main #right .line1 .qqlh {
		display: none;
		/* width:240px ;
		background-size: cover; */



	}
}

@media (max-width:800px) {
	#wrapper #main #right {
		/* display: none; */

		width: 500px;
		/* background-size: cover; */



	}
}

#wrapper #right .line1 .qqlh .qqlh_bj {
	width: 70px;
	height: 30px;
	background-color: #fc4f52;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 99;
	color: white;
	padding-left: 34px;
	border-radius: 5px;

}

#wrapper #right .line1 .qqlh {
	position: relative;
	margin-left: 350px;

}

#wrapper #right .line1 .qqlh img {
	position: absolute;
	left: 0;
	top: -11.5px;
	z-index: 100;


}

/* 句对定位会使其位置脱离文档流 */

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

/* 浮动无法居中？ */
#wrapper #right .line2 {
	margin-top: 60px;
	font-size: 40px;
	/* margin: auto; */
}

#wrapper #right .line1 {
	/* border: 1px solid lightblue; */
}

#wrapper #right .line1 .tnav {
	text-align: right;
	margin-top: 20px
}

#wrapper #right .line1 .tnav a {
	margin-right: 40px;
	font-size: 15px;
	text-decoration: none;
	color: #AAAAAA;
	;
}

#wrapper #right .line3 a {
	text-decoration: none;
	color: limegreen;
	/* margin-left: 20px; */
}

#wrapper #right .line3 {
	color: lightblue;
	font-size: 25px;
	margin-top: 10px;
}


#wrapper #right .mline1 .line5 input {
	height: 35px;
	margin-top: 30px;
	width: calc(80% - 20px);
	/* 	border: 1px solid lightblue; */

	font-size: ;
	border-radius: 5px;
}

#wrapper #right .mline1 .line4 input {
	height: 35px;
	margin-top: 60px;
	width: calc(80% - 20px);
	/* 	border: 1px solid lightblue; */

	font-size: ;
	border-radius: 5px;
}

#wrapper #right .mline1 {
	/* border: 1px solid greenyellow; */
	width: 500px;
	margin: auto;
	/* font-size: 10px; */
	color: ;
}

#wrapper #right .mline1 select {
	height: 37px;
	margin-top: 30px;
	width: 120px;
	/* border: 2px solid darkturquoise; */
	padding-left: 10px;

	font-size: ;
	border-radius: 5px;



}

#wrapper #right .mline1 select+input {

	height: 30px;
	margin-top: 30px;
	width: 195px;
	/* border: 2px solid fuchsia; */

	font-size: ;
	border-radius: 5px;
	margin-left: 20px;




}

#wrapper #right .mline1 .line6 {
	font-size: 10px;
	color: #aaa;
}

#wrapper #right .mline1 .line7 input[type='button']

/* ,#wrapper #right .mline1 .line7 button[type='button'] */
	{
	background-color: dodgerblue;
	width: calc(80% - 10px);
	color: white;
	height: 50px;
	margin-top: 27px;
	cursor: pointer;
	/* 手势 */

}

#wrapper #right .mline1 .line7 input[type='button']:hover {
	background-color: royalblue;

}

#wrapper #right .mline1 .line8 input[type='checkbox'] {
	/* font-size: 5px; */
	/* width: 50px; */
	height: auto;
	margin: ;
	padding: ;
}

#wrapper #right .mline1 .line8 {
	font-size: 10px;
	margin-top: 20px;
	/* width: 50px; */
	/* border: 1px solid red */
}

#wrapper #right .mline1 #footer {
	margin-top: 150px;
	font-size: 6px;
}

敢跟头像对视三秒吗？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
16
评论
web练习一——qq注册面开发（四）源码

html部分：<!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
复制链接

扫一扫

专栏目录