简单的html登录页面
没有你想不到的
·
这篇主要给大家介绍好看的HTML登录页面，代码简洁，具有一定的价值，希望大家用到（♥可以大家在浏览的时候不兼容，这根据具体的情况改一下代码♥）。
个人博客：♥默一♥
浏览效果链接：
http://tingfeng77521.xyz/1.html
效果图如下
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<title>默一博客</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
html{
height:100%;
}
body{
height:100%;
}
.kuangjia{
height:100%;
background-image: linear-gradient(to right, #FED0FC, #63D1EC);
overflow:auto;
}
.gujia{
height:800px;
width:1200px;
border-radius:20px;
position:relative;
margin:80px auto;
}
.huanying{
height: 200px;
width: 1200px;
font-size: 144px;
padding-top: 50px;
text-align: center;
}
.kaishi{
height:80px;
width:1200px;
font-size:36px;
padding-top:20px;
text-align:right;
}
.denglu{
height:100px;
width:700px;
float:left;
margin-left:50px;
margin-top:50px;
font-size:30px;
border-radius:20px;
position:relative;
border: 0;
border-bottom: 1px solid rgb(128, 125, 125);
outline:none;
display:block;
}
.zouni{
height: 80px;
width: 200px;
float: right;
background: #FFF;
margin-right: 150px;
margin-left: 50px;
margin-top: 50px;
font-size: 36px;
text-decoration:none;
padding-top:22px;
border-radius: 20px;
position: relative;
border: 0;
border-bottom: 1px solid rgb(128,125,125);
outline: none;
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="kuangjia">
<div class="gujia">
<div class="huanying">Welcome</div>
<div class="kaishi">Let's have a good day from now on!</div>
<input name="Account number" type="text" class="denglu" placeholder="Account number" size="3" maxlength="8">
<a class="zouni" href="https://blog.csdn.net/weixin_59064057">Anter</a>
</div>
</div>
</body>
</html>
温馨提示
可能部分浏览器不兼容，调一下代码就可以了哈。
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
6
0- 0
已为社区贡献3条内容
所有评论(0)