上一个的后续，想想还是做个记录。

最新推荐文章于 2024-04-25 22:57:55 发布

哈里路啾啾嗨呀呀

最新推荐文章于 2024-04-25 22:57:55 发布

阅读量295

点赞数

分类专栏：随笔

本文链接：https://blog.csdn.net/u010619719/article/details/48627769

版权

随笔专栏收录该内容

2 篇文章 0 订阅

订阅专栏

重写了一遍，照前辈说法要养成良好习惯。。。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<title>简单的结构化页面</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="./common1.css" />
		<link rel="stylesheet" href="./common2.css" />
	</head>
	<body>
		<header>
			<a href="#" class="back-btn">
				<span>&lt;</span>
			</a>
			<h1>登录</h1>
		</header>
		<div class="main">
			<div class="item-login">
				<input class="text-input" type="text" maxlength="13" placeholder="请输入手机号码" onKeypress="if (event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;" />
				<span class="login-input">手机号</span>
			</div>
			<div class="line"></div>
			<div class="item-login">
				<input class="text-input" type="password" maxlength="8" placeholder="请输入密码" />
				<span class="login-input">密&nbsp;&nbsp;&nbsp码</span>
			</div>
			<div class="item-btn">
				<a class="btn-login" href="#">登&nbsp;&nbsp;&nbsp录</a>
			</div>
			<div class="item-login-option">
				<span class="register">
					<a class="login-register" href="#">注册</a>
				</span>
				<span class="retrieve-password">
					<a class="login-retrieve-password" href="#">忘记密码？</a></span>
			</div>
			<div class="item-login-others">
				<dl>
					<dt>其他方式登录</dt>
					<dd>
						<span>
							<a href="">
								<span>QQ</span>
							</a>
							<a href="">
								<span>微信</span>
							</a>
							<a href="">
								<span>微博</span>
							</a>
						</span>
					</dd>
				</dl>
			</div>
		</div>
		<script src="common.js" /></script>
	</body>
</html>

CSS样式表：

html{
	margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    width: 100%;
}

span{
	display: -webkit-inline-box;
}

body{
	background-color: #f8f8f8;
	margin: 0px;
}

/*取消链接默认样式*/
a:link { 
	color: #FFFFFF;
	text-decoration: none; 
	/* color: #d7d7d7; */
} 
a:visited { 
	color: #FFFFFF;
	text-decoration: none; 
} 
a:hover { 
	color: #FFFFFF;
	text-decoration: none; 
} 
a:active { 
	color: #FFFFFF;
	text-decoration: none; 
} 
/*链接样式*/

a.back-btn{
	position:absolute;
	left: 5px;
	font-size: 30px;
	top: 5px;
}

h1{
	font-family: 黑体;
	font-size: 18px;
	color:#FFFFFF;
	text-align: center;
}


header{
	text-align: center;
	background-color: black;
	padding: 1px;
	width: 100%;
}

.main{
	margin-top: 4%;
	font-family: 黑体;
}

.item-login{
	background-color: #FFFFFF;
	position: relative;
}

span.login-input{
	position: absolute;
    
	top: 10px;
    display: block;
    text-align: center;
    line-height: 28px;
    
	width: 24%;
    border-right: 1px solid #d7d7d7;
    font-size: 16px;
}

.text-input{
	border: none;
    height: 46px;
	margin-left: 30%;
    font-size: 16px;
	width: inherit;
	outline:none;
}

div.line{
	width:inherit;
	height: 1px;
	margin-left: 4%;
	background-color: #d7d7d7;
}

::-webkit-input-placeholder{
	font-family: 黑体;
}

.item-btn{
	margin-top:10%;
	margin-left: 4%;
	margin-right: 4%;
}

.btn-login{
	display: inline-block;
    width: 100%;
    
	/* height: 48px; */
    border-radius: 5px;
    background: #f25454;
    text-decoration: none; 
	line-height: 45px;
    text-align: center; 
	font-size: 18px;
}

.item-login-option{
	margin-top:4%;
	position:relative;
	width:inherit;
}

.register{
	position:absolute;
	left:4%;
}

.retrieve-password{
	position:absolute;
	right:4%;
}
.item-login-others{
	margin-top:30%;
}

.h1{
	voice-family:male;
	richness:80;
	cue-before:url(:beep.au);
}

这都是几天前的了，妈的，感觉都要忘了快。接下来就是看JS了。