Comment mettre en page un formulaire de connexion en utilisant CSS

Le contenu de cet article explique comment utiliser CSS pour créer un formulaire de connexion. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Mise en page CSS pour créer un formulaire de connexion

Ce cas produit principalement un formulaire de connexion, dans ce cas, la case est utilisée -Attributs tels que l'ombre, le dégradé, la transformation et la transition. La partie la plus difficile est la partie mordue de la zone de saisie. Elle a été initialement réalisée en utilisant des dégradés CSS3 purs avec plusieurs arrière-plans, mais a été limitée par les ombres. Finalement, elle a été modifiée pour utiliser la base 64. -bit images traiter. Code de référence détaillé :

Structure HTML :

<div class="box">
<form action="#" method="get">
<ul>
<li>
<label for="username">Email:</label><input type="text" id="username"  class="username" placeholder="john.smith@strategysoft.com"/>
</li>
<li>
<label for="password">Password:</label><input type="password" id="password" class="password" placeholder="******"/>
</li>
</ul>
<a href="javascript:;" class="button"/><i class="icon-arrow-right"></i></a>
</form>
</div>
CSS代码：
body,ul{
margin: 0;
padding: 0
}
a {
color: rgb（1, 124, 185）；
text-decoration: none;
}
input:focus {
outline: none 0;
}
body{
color: #b5b5b5;
font: 14px &#39;Arial&#39;;
}
body,
li:first-child:after,
li:last-child:after{
background-image: url（data:image/png;base64,…）；/**/
}
.box{
position: relative;
width: 384px;
height: 140px;
margin: 50px auto;
}
.box li{
list-style-type: none;
margin-bottom: 10px;
border-radius: 5px;
overflow: hidden;
position: relative;
height: 42px;
}
.box li input{
box-shadow:inset 0 0 5px rgba（0,0,0,.5），-1px 1px 0 rgba（255,255,255,.05）；
border:0 none;
padding:8px 5px 5px;
border-radius: 5px;
width:300px;
height: 28px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
box-sizing: content-box;
background: rgba（0,0,0,.1）；
color: #fff;
}
.box li:first-child:after,
.box li:last-child:after{
position: absolute;
width: 50px;
height: 50px;
content: "";
border-radius: 25px;
z-index: 2;
right: -23px;
box-shadow: 0 0 8px rgba（0,0,0,.5）；
}
::-webkit-input-placeholder {
color:#fff;
font-weight: bold;
}
.box li:first-child:after{
top: 15px;
}
.box li:last-child:after{
bottom:15px;
}
.box label{
width: 70px;
display: inline-block;
text-align: right;
}
.box span{
display: block;
color: #6296b4;
padding-left: 75px;
}
.button{
position: absolute;
top: 24px;
right: -30px;
width: 44px;
height: 44px;
border-radius: 22px;
border:1px solid #00a1d2;
background: -webkit-linear-gradient（top,#029ecd,#0d7796）；
color: #fff;
text-shadow:1px 1px 0 #666;
box-shadow:0 0 0 5px #2c2c2c;
z-index: 3;
text-align: center;
line-height: 46px;
-webkit-transition: all 0.28s ease-in;
-moz--transition: all 0.28s ease-in;
}
.button:hover{
-webkit-transform:rotate（90deg）；
}
@font-face {
font-family: &#39;FontAwesome&#39;;
src: url（&#39;font/fontawesome-webfont.eot&#39;）；
src: url（&#39;font/fontawesome-webfont.eot?#iefix&#39;） format（&#39;embedded-opentype&#39;），
url（&#39;font/fontawesome-webfont.woff&#39;） format（&#39;woff&#39;），
url（&#39;font/fontawesome-webfont.ttf&#39;） format（&#39;truetype&#39;），
url（&#39;font/fontawesome-webfont.svg#FontAwesome&#39;） format（&#39;svg&#39;）；
font-weight: normal;
font-style: normal;
}
.icon-arrow-right:before {
font-family: FontAwesome;
font-weight: normal;
font-size: 26px;
font-style: normal;
display: inline-block;
text-decoration: inherit;
content: "\f061";
}

Ce qui précède est une introduction complète à la façon d'utiliser le CSS pour mettre en page un formulaire de connexion, si vous souhaitez en savoir plus sur CSS tutoriel , veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!