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

最新推荐文章于 2022-12-28 20:30:00 发布

敢跟头像对视三秒吗？

最新推荐文章于 2022-12-28 20:30:00 发布

阅读量297

点赞数 1

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

版权

最近可能要窜稀式更新了
临近过年了，博主想在回家前将这段时间的学习总结一下，进度就先不赶了，这篇文章博主就跟大家分享一下近一个半月以来博主利用课余时间学习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/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">
					欢迎注册QQ
				</div>
			</div>
			<div id="footer"></div>
		</div>
	</body>
</html>


```css
#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;
}
#wrapper #main #left .logo a{
	font-size: 50px;
	text-decoration: none;
	position: absolute;
	left: 140px;
	top: 5px;
	
}
@media (max-width:500px) {
	#wrapper #main #left{
		display: none;
		
		
		
	}
}