HTML +CSS制作QQ登录页面

最新推荐文章于 2024-04-15 09:02:48 发布

茶茶敲代码

最新推荐文章于 2024-04-15 09:02:48 发布

阅读量3.1k

点赞数 2

文章标签： css html 前端

本文链接：https://blog.csdn.net/Pythonfinish/article/details/127597088

版权

用a:link {color: #FF0000}       /* 未访问的链接 */
           a:visited {color: #00FF00}   /* 已访问的链接 */
           a:hover {color: #FF00FF}   /* 鼠标移动到链接上 */
           a:active {color: #0000FF}

超链接为了方便，一直都保存这些格式

<div style="text-align:center; > 居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>QQ注册界面</title>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			a{text-decoration: none;}
			ul,ol
			{
				list-style: none;
			margin-left: 20px;
				list-style-image:url(img/point.jpg);
			}
			nav.menu{
                         width: 100%;
						height: 50px;
						background-color: #5fbdef;
						color: white;
								text-align: center;
								line-height: 50px;
			}
			a:link {color: #FF0000}		/* 未访问的链接 */
			a:visited {color: #00FF00}	/* 已访问的链接 */
			a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
			a:active {color: #0000FF}
			
			.box{
				
				width:200px;
				height:40px;
				text-align: center;
				line-height: 40px;
				background-color: #22be53;
				color: white;
				margin: auto; 
			}
		</style>
	</head>
	<body>
		<nav class="menu">
		<ul>
			<li><h1>QQ登录</h1>
			</li>
			</ul>
		</nav>
		<br>
				<div style="text-align:center; > 
					<p style="height:40px; font-size:15px; line-height:28px;" >推荐使用快速安全登录,防止盗号。</p>
					<br>
				</div>
			
					<div style="text-align:center; > 
				    <form method="get" action="#" id="myform">
					<input type="text" name="账号"  style="width:200px; height:30px; font-size:15px;"  placeholder="支持QQ号/邮箱/手机号登录" >
					<br><br>
					<input type="password" name="密码" style="width:200px; height:30px; font-size:15px;margin: auto; " placeholder="密码">
					</form>
				</div>
<br><br>
		<div class="box" style="text-align:center; >
		
			<a href="#">授权登录</a>
			</div>
		
		
					<br><br>
				<div style="text-align:center; >
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="" ></a>
					<a href="" >忘了密码?</a>
					&nbsp;|&nbsp;
					<a href="" >新账号</a>
					&nbsp;|&nbsp;&nbsp;
					<a href="" >意见反馈</a>
					<br>
				
				</div>
				<div style="text-align:center; >
					<p style="height:28px; font-size:12px; line-height:28px;" >将获得以下权限:</p>
					<br>
					<input type="checkbox" name="" checked="checked">全选<br>
					<input type="checkbox" name="" checked="checked">获得您的昵称、头像、性别
					<td><br><br>
					<p style="height:28px; font-size:12px; line-height:28px;" >腾讯网将获得以下权限:</p>
					</div>
	</body>
</html>