jquery窗帘样式顶部滑动下拉登陆窗口

准备好需要用到的图标。

新建html文档。

书写hmtl代码。

书写css代码。* { margin: 0; padding: 0; list-style-type: none; }a, img { border: 0; }body { font: 12px/180% Arial, Helvetica, sans-serif, '新宋体'; }#container { width: 100%; height: 100%; text-align: center; }#top { background: url(../images/login_top.jpg) repeat-x 0 0; height: 38px; position: relative; }#top ul.login { display: block; position: relative; float: right; clear: right; height: 38px; width: auto; font-weight: bold; line-height: 38px; margin: 0; right: 150px; color: white; font-size: 12px; text-align: center; background: url(../images/login_r.jpg) no-repeat right 0; padding-right: 45px; }#top ul.login li.left { background: url(../images/login_l.jpg) no-repeat left 0; height: 38px; width: 45px; padding: 0; margin: 0; display: block; float: left; }#top ul.login li { text-align: left; padding: 0 6px; display: block; float: left; height: 38px; background: url(../images/login_m.jpg) repeat-x 0 0; }#top ul.login li a { color: #33CCCC; }#top ul.login li a:hover { color: white; }#login { width: 100%; color: white; background: #1E1E1E; overflow: hidden; position: relative; z-index: 3; height: 0; }#login a { text-decoration: none; color: #33CCCC; }#login a:hover { color: white; }#login .loginContent { width: 550px; height: 80px; margin: 0 auto; padding-top: 25px; text-align: left; }#login .loginContent .left { width: 120px; float: left; padding-left: 65px; }#login .loginContent .right { width: 290px; float: right; text-align: right; padding-right: 65px; }#login .loginContent form { margin: 0 0 10px 0; height: 26px; }#login .loginContent input.field { border: 1px #1A1A1A solid; background: #464646; margin-right: 5px; margin-top: 4px; color: white; height: 16px; }#login .loginContent input:focus.field { background: #545454; }#login .loginContent input.rememberme { border: none; background: transparent; margin: 0; padding: 0; }#login .loginContent input.button_login { width: 47px; height: 20px; cursor: pointer; border: none; background: transparent url(../images/button_login.jpg) no-repeat 0 0; }#login .loginClose { display: block; position: absolute; right: 15px; top: 10px; width: 43px; text-align: left; }#login .loginClose a { display: block; width: 100%; height: 20px; background: url(../images/button_close.jpg) no-repeat right 0; padding-right: 10px; border: none; color: white; }#login .loginClose a:hover { background: url(../images/button_close.jpg) no-repeat right -20px; }

代码整体结构。

查看效果。