完整代码|一个简易的静态引导页-1（首页引导页-静态）
时间：2022-04-21 10:34:57 阅读：1308
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>测试</title>
<meta name="keywords" content="测试">
<meta name="description" content="测试！">
<style>
.login-bg{
/*background: #eeeeee url() 0 0 no-repeat;*/
background:url(http://img.zshao.vip/2021/12/10/43a3387505aa010.png) no-repeat center;
background-size: cover;
overflow: hidden;
}
@media (max-width: 768px) {
.login-logo img{
width:250px;
}
}
.login{
margin: 40px auto 0 auto;
min-height: 420px;
max-width: 740px;
padding: 40px;
background-color: #ffffff;
margin-left: auto;
margin-right: auto;
border-radius: 16px;
/* overflow-x: hidden; */
box-sizing: border-box;
}
.login .message {
text-align:center;
font-weight: bold;
margin-bottom: 20px;
position: relative;
color: #D007EE;
font-size: 26px;
}
.login .content {
font-weight: bold;
color: #D007EE;
font-size: 18px;
}
.content p{text-indent: 2em}
.login input[type=text],
.login input[type=file],
.login input[type=password],
.login a, select {
border: 1px solid #DCDEE0;
vertical-align: middle;
border-radius: 3px;
height: 50px;
padding: 0px 16px;
font-size: 14px;
color: #555555;
outline:none;
width:100%;
box-sizing: border-box;
}
.login input[type=text]:focus,
.login input[type=file]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus, select:focus {
border: 1px solid #27A9E3;
}
.login a{
display: inline-block;
vertical-align: middle;
padding: 12px 24px;
margin-right: 20px;
font-size: 18px;
line-height: 24px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
color: #ffffff;
text-decoration: none;
border-radius: 3px;
border: none;
-webkit-appearance: none;
outline:none;
width:100%;
border-radius: 8px;
}
.login hr {
background: #fff url() 0 0 no-repeat;
}
.login hr.hr15 {
height: 15px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
.login hr.hr20 {
height: 20px;
border: none;
margin: 0px;
padding: 0px;
width: 100%;
}
</style>
</head>
<body class="61b2b3aca8dd9 login-bg">
<div class="61b2b3aca8dfb login-logo" style="text-align:center"><img src="http://img.zshao.vip/2021/12/10/7e6fcf231694110.png"/></div>
<div class="61b2b3aca8dff login layui-anim layui-anim-up">
<div class="61b2b3aca8e01 message">测试</div>
<hr class="hr15">
<p style="text-align:center">
<a href="/" target="_blank" style="background-color: #0794EE;width:40%;">测试</a>
</p>
<p style="text-align:center">
<a href="/faka/hpjy.html" target="_blank" style="background-color: #D007EE;width:40%;">测试</a>
<a href="/faka/wzry.html" target="_blank" style="background-color: #07EE9F;width:40%;">测试</a>
</p>
<hr class=" hr20" >
<div class="61b2b3aca8e07 content">
<p>测试。</p>
</div>
</div>
</body>
</html>图片可能会不显示，自己替换一下就好了
网友评论