CSS를 사용하여 로그인 양식을 레이아웃하는 방법

이 문서의 내용은 CSS를 사용하여 로그인 양식을 레이아웃하는 방법에 대한 것입니다. 특정 참조 값이 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

로그인 폼을 만드는 Css 레이아웃

이 경우는 주로 로그인 폼을 만드는 경우입니다. 이 경우에는 box-shadow, 그래디언트, 변환 및 전환과 같은 속성이 사용됩니다. 프레임의 물린 부분은 원래 여러 배경의 순수 CSS3 그라데이션을 사용하여 만들어졌으나 그림자로 인해 결국 기본 64비트 이미지 처리를 사용하도록 변경되었습니다. 자세한 참조 코드:

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";
}

위는 CSS를 사용하여 로그인 양식을 레이아웃하는 방법에 대한 전체 소개입니다. CSS 튜토리얼에 대해 더 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 CSS를 사용하여 로그인 양식을 레이아웃하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!