【HTML】@weijinhai0101：模仿酷狗登录页面半成品（CSS样式和HTML代码放在一起了）

最新推荐文章于 2023-02-19 19:23:46 发布

天元白手

最新推荐文章于 2023-02-19 19:23:46 发布

阅读量1.4k

点赞数 2

分类专栏： html 文章标签： HTML

本文链接：https://blog.csdn.net/qq_44739706/article/details/94197495

版权

html 专栏收录该内容

25 篇文章 24 订阅

订阅专栏

```

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模仿酷狗登录页面</title>
		<style type="text/css">
			/* 去掉外边距 */
			* {
				margin: 0px;
				padding: 0px
			}

			.father {
				width: 490px;
				height: 618px;
				border: 2px solid lightgrey;
				
				border-image: white;
				text-align: center;
				margin: auto;
				
			}
			.delete img{
				float: right;	
			}
			#clear{
				clear: both;
			}
			.biaoti{
				font-size: 38px;
				margin-top: 100px;
				font-family: 宋体;
				width: 490px;
				height: 38px;
				text-align: center;
			}
			/* 账号文本框 */
			.zhanghao{
				
				margin-top: 68px;
				width: 490px;
				height: 50px;
				text-align: center;	
				
				/* border: 1px solid red; */
			}
			.zhanghao input{
				background: url(img/QQ截图20190629174740.png)320px 12px no-repeat;
				font-size: 18px;
				width: 365px;
				height: 50px;
				border: 1px solid lightgray;
			}
			/* 密码文本框 */
			.pwd{
				margin-top: 10px;
				width: 490px;
				height: 50px;
				text-align: center;	
				/* border: 1px solid red; */
			}
			.pwd input{
				background: url(img/QQ截图20190629175348.png)250px 10px no-repeat;
				
				font-size: 18px;
				width: 365px;
				height: 50px;
				border: 1px solid lightgray;
			}
			.jizhumima{
				width: 490px;
				height: 50px;
				font-size: 18px;
				margin-top: 57px;
				/* border: 1px solid red; */
			}
			.password{
				width: 365px;
				height: 30px;
				/* border: 1px solid red; */
				margin-left: 62px;
			}
			/* 改变字体颜色 */
			.password a{
				color: black;
			}
			.denglu input{
				color: #FFFFFF;
				font-size: 30px;
				width: 365px;
				height: 50px;
				border: 1px solid deepskyblue;
				background: deepskyblue;
			}
			/* 去掉下划线 */
			a{
				text-decoration: none;
			}
			.ziti{
				color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div class="father">

			<div class="delete">
				<!-- 此图片右浮动 -->
				<img src="img/QQ截图20190629180920.png" width="25" height="25">
			</div>
			<!-- 清除浮动 -->
			<div id="clear">
				
			</div>

			<h2 class="biaoti">欢迎你的到来</h2>
			
			<p class="zhanghao">

				<input type="text"  placeholder="输入账号" />

			</p>

			<p class="pwd">
				
				<input type="password"  value="" placeholder="输入密码" />

			</p>

			<div class="jizhumima">
				
				<div class="password">
					
					<input type="checkbox" class="jizhumima1" /><a href="#">记住密码</a>
					
					<input type="checkbox" class="jizhumima2" /><a href="#">自动登录</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<a href="#">注册账号</a>
				</div>
				

			</div>
			<p class="denglu">
				
				<a href="#"><input type="submit" class="denglu1" value="登录" /></a>
				
			</p>

			<p class="picture">
				<a href="#"><img src="img/QQ截图20190629173646.png" width="40" height="40"></a>
				<a href="#"><img src="img/QQ截图20190629173726.png" width="40" height="40"></a>
				<a href="#"><img src="img/QQ截图20190629173746.png" width="40" height="40"></a>
				
				
				
			</p>

			<p>

				登录代表你同意
				<a href=""><span class="ziti">用户服务协议</span></a>
				和
				<a href=""><span class="ziti">隐私政策</span></a>
			</p>

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