案例地址：http://wanwanweb.sinaapp.com/yglogin/
源码在下方仅供参考，自己动手设计一款类似的版式，然后亲自动手试一下。
1 <?php 2 ?> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="content-type" content="text/html;charset=utf-8"> 7 <title>昱歌——表单案例</title> 8 <style type="text/css"> 9 *{ 10 margin: 0; 11 padding: 0; 12 list-style: none; 13 font-size: 11px; 14 } 15 body 16 { 17 background: url("../yglogin/images/bj.jpg") #0f2860 repeat-x 0 0; 18 } 19 #box{ 20 width: 320px; 21 height: 569px; 22 /*background: #963ccc;*/ 23 margin: 0 auto; 24 } 25 #logo{ 26 width: 141px; 27 height: 141px; 28 /*background-color: #ccc;*/ 29 position: relative; 30 top: 108px; 31 z-index: 10; 32 visibility: hidden; 33 } 34 #main{ 35 width: 281px; 36 height: 569px; 37 background: #000; 38 position: relative; 39 top:-141px; 40 left:40px; 41 background: url("../yglogin/images/mainbj.jpg"); 42 } 43 #main .login{ 44 width: 248px; 45 height: 361px; 46 background:#ccc; 47 float: left; 48 margin-top: 191px; 49 margin-left: 16px; 50 } 51 #main .login .loginT{ 52 width: 248px; 53 height: 11px; 54 background: url("../yglogin/images/boxT.jpg"); 55 } 56 #main .login .loginC{ 57 width: 248px; 58 height: 339px; 59 background: url("../yglogin/images/box.jpg"); 60 } 61 #main .login .loginC .loginForm{ 62 width: 248px; 63 height: 180px; 64 /*background: #ccc;*/ 65 float: left; 66 margin-top: 83px; 67 } 68 #main .login .loginC .loginForm .loginUser{ 69 width: 218px; 70 height: 78px; 71 /*background: #123099;*/ 72 margin: 0 auto; 73 } 74 .loginUserT{ 75 height: 4px; 76 background: url("../yglogin/images/formT.jpg"); 77 } 78 .loginUserC{ 79 height: 69px; 80 background: url("../yglogin/images/form.jpg"); 81 } 82 83 .loginUserC ul li{ 84 width: 194px; 85 height: 34px; 86 /*background: #ccc;*/ 87 line-height: 34px; 88 color:#797979; 89 90 padding-left: 10px; 91 padding-right:10px; 92 border-bottom-width: 1px; 93 border-bottom-color: #ededed; 94 border-bottom-style: solid; 95 margin: 0 auto; 96 } 97 98 .loginVerifyC ul li{ 99 width: 194px; 100 height: 32px; 101 /*background: #ccc;*/ 102 line-height: 32px; 103 color:#797979; 104 105 padding-left: 10px; 106 padding-right:10px; 107 margin: 0 auto; 108 } 109 110 .loginUserC ul li.liB{ 111 border-top-width: 1px; 112 border-top-color: #fff; 113 border-top-style: solid; 114 } 115 116 .loginUserC ul li img{ 117 float: left; 118 margin-top: 8px; 119 margin-right: 9px; 120 } 121 122 .loginUserC ul li.liB img{ 123 float: left; 124 margin-top: 8px; 125 margin-right: 13px; 126 } 127 128 .loginVerifyC ul li img{ 129 float: left; 130 margin-top: 10px; 131 margin-right: 10px; 132 } 133 134 .loginVerifyC ul li img.getBtn{ 135 float: right; 136 margin: 0; 137 } 138 139 .loginUserC ul li span input{ 140 border: 0; 141 width: 118px; 142 height: 10px; 143 color:#797979; 144 } 145 .loginUserC ul li span.ipt{ 146 width: 118px; 147 height: 10px; 148 border: solid 1px #ededed; 149 display: block; 150 float: right; 151 margin-top: 6px; 152 line-height: 10px; 153 padding:5px; 154 background: #fff; 155 } 156 157 .loginUserB{ 158 height: 4px; 159 background: url("../yglogin/images/formB.jpg"); 160 } 161 162 #main .login .loginC .loginForm .loginVerify{ 163 width: 218px; 164 height: 38px; 165 /*background: #123099;*/ 166 margin: 10px auto 0 auto; 167 } 168 .loginVerifyT{ 169 height: 4px; 170 background: url("../yglogin/images/formT.jpg"); 171 } 172 .loginVerifyC{ 173 height: 28px; 174 background: url("../yglogin/images/form.jpg"); 175 } 176 .loginVerifyB{ 177 height: 4px; 178 background: url("../yglogin/images/formB.jpg"); 179 } 180 #main .login .loginC .loginForm a{ 181 width: 218px; 182 height: 39px; 183 display: block; 184 background: url("../yglogin/images/button.jpg"); 185 margin: 10px auto 0 auto; 186 text-indent: -999px; 187 overflow: hidden; 188 } 189 190 #main .login .loginC .loginForm a:hover{ 191 background: url("../yglogin/images/buttonOver.jpg"); 192 } 193 194 #main .login .loginB{ 195 width: 248px; 196 height: 11px; 197 background: url("../yglogin/images/boxB.jpg"); 198 } 199 </style> 200 </head> 201 <body> 202 <div id="box"> 203 204 <div id="logo"> 205 <img src="../yglogin/images/fuck.png"/> 206 </div> 207 208 <div id="main"> 209 <div class="login"> 210 <div class="loginT"></div> 211 <div class="loginC"> 212 <div class="loginForm"> 213 <div class="loginUser"> 214 <div class="loginUserT"></div> 215 <div class="loginUserC"> 216 <ul> 217 <li> 218 <img src="../yglogin/images/user.jpg"/> 219 <span><label for="uid">用户名</label></span> 220 <span class="ipt"><input type="text" id="uid"/></span> 221 </li> 222 223 <li class="liB"> 224 <img src="../yglogin/images/pwd.jpg"/> 225 <span><label for="pwd">密码</label></span> 226 <span class="ipt"><input type="text" id="pwd"/></span> 227 </li> 228 </ul> 229 </div> 230 <div class="loginUserB"></div> 231 </div> 232 <div class="loginVerify"> 233 <div class="loginVerifyT"></div> 234 <div class="loginVerifyC"> 235 <ul> 236 <li> 237 <img src="../yglogin/images/email.jpg"/> 238 <span><label for="uid">验证码</label></span> 239 <img class="getBtn" src="../yglogin/images/getBtn.jpg"/> 240 </li> 241 </ul> 242 </div> 243 <div class="loginVerifyB"></div> 244 </div> 245 <a href="http://www.cnblogs.com/yuge790615/" onmouseover="logoOverFunction()" onmouseout="logoOutFunction()">登录</a> 246 </div> 247 </div> 248 <div class="loginB"></div> 249 </div> 250 </div> 251 </div> 252 253 </div> 254 </body> 255 </html> 256 257 <script type="text/javascript"> 258 function logoOverFunction(){ 259 var logo = document.getElementById("logo"); 260 logo.style.visibility = "visible"; 261 } 262 function logoOutFunction(){ 263 var logo = document.getElementById("logo"); 264 logo.style.visibility = "hidden"; 265 } 266 </script>
原文：http://www.cnblogs.com/yuge790615/p/4735355.html
