이 문서의 내용은 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 'Arial'; } 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: 'FontAwesome'; src: url('font/fontawesome-webfont.eot'); src: url('font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('font/fontawesome-webfont.woff') format('woff'), url('font/fontawesome-webfont.ttf') format('truetype'), url('font/fontawesome-webfont.svg#FontAwesome') format('svg'); 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!