Heim >Web-Frontend >CSS-Tutorial >Verschönerung der CSS-Anmeldeschnittstelle
Verschönerung der CSS-Anmeldeschnittstelle
- 墨辰丷Original
- 2018-05-11 16:08:4711243Durchsuche
In diesem Artikel wird hauptsächlich die Verwendung von CSS zur Verschönerung der Website-Anmeldeschnittstelle vorgestellt. Freunde, die es benötigen, können darauf verweisen.
Der Code lautet wie folgt:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>美化登录</title>
<style type="text/css">
*{margin:0;padding:0;}/*去掉页面样式*/
body{color:white;}
.content{
background-color:pink;
position:absolute;/*绝对定位*/
top:50%;
left:0;
width:100%;
height:400px;
margin-top:-200px;
overflow:hidden;/*隐藏滚动条*/
}
.main{
text-align:center;/*文本居中*/
max-width:600px;
height:400px;
padding:100px 0px;/*上下80px,左右为0*/
/*background:yellow;*//*验证div的位置*/
margin:0 auto;/*设置上右下左,居中显示*/
}
.main h1{
font-family:"楷体";/*设置字体*/
font-size:70px;/*设置字体大小*/
font-weight:2px;/*调整字体粗细*/
}
form{
padding:20px 0;
}
form input{
border:1px solid white;
display:block;
margin:0px auto 10px auto;/*上 右 下 左*/
padding:10px;
width:220px;
border-radius:30px;/*H5设置圆角边框*/
font-size:18px;
font-weight:300;
text-align:center;
}
form input:hover{
background-color:pink;
}
form button{
background-color:yellow;
border-radius:10px;
border:0;
height:30px;
width:50px;
padding:5px 10px;
}
form button:hover{
background-color:red;
}
</style>
</head>
<body>
<div class="content">
<div class="main">
<h1>Welcome</h1>
<form>
<input type="text" name="useid" placeholder="请输入账号"/>
<input type="password" name="pw" placeholder="请输入密码">
<button type="submit">登 录</button>
</form>
</div>
</div>
</body>
</html>Verwandte Empfehlungen:
Verschönern HTML mit CSS Detailliertes Beispiel für Formularsteuerung (Formularverschönerung)
CSS-Verschönerung, Optimierung, Zusammenführungstool-Empfehlung_html/css_WEB-ITnose
Verschönern mit reines CSS-Radio und checkbox_html/css_WEB-ITnose
Das obige ist der detaillierte Inhalt vonVerschönerung der CSS-Anmeldeschnittstelle. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS-Animations-TutorialNächster Artikel：CSS-Animations-Tutorial