下面展示一些 内联代码片
。
登录页面HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../js/login.js"></script>
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="receptacle">
<h2 class="topic">登录</h2>
<p>
<input type="text" placeholder="账号" class="personName"/>
<input type="password" placeholder="密码" class="personName"/>
</p>
<p>
<button class="depressed-button">登录</button>
<a href="regist.html">注册</a>
</p>
</div>
</body>
</html>
登录页面CSS
.topic {
text-align:center;
font-size:22px;
border-bottom:1px dashed rgba(203, 80, 120, 0.9);
}
.receptacle {
overflow:hidden;
clear:both;
margin:10px auto;
width:350px;
padding:40px;
background-image:linear-gradient(-20deg, rgba(166, 163, 93, 1.0) 0%, rgba(193, 209, 134, 0.0) 100%);
border:1px groove rgba(5, 1, 55, 0.8);
box-shadow:20px 0px 5px rgba(166, 6, 142, 0.7);
height:300px;
}
.personName {
width:90%;
height:35px;
margin:20px auto;
display:block;
text-indent:5px;
border:1px ridge rgba(132, 94, 200, 0.3);
border-radius:2px;
}
.logon {
float:right
}
body {
background: rgba(51, 150, 60, 0.4);
}
.title{
display: block;
text-align: center;
}
.depressed-button {
line-height:45px;
display:block;
width:90%;
text-align:center;
margin:30px auto;
height:45px;
text-align:center;
font-size:22px;
border-bottom:1px dashed rgba(203, 80, 120, 0.9);
}
.password {
width:90%;
height:35px;
margin:20px auto;
display:block;
text-align:center;
font-size:22px;
border-bottom:1px dashed rgba(203, 80, 120, 0.9);
}