adobe dreamweaver
准备好需要用到的图标和图片
新建html文档。
书写hmtl代码。
点我弹出登录框
书写css代码。 *{word-wrap:break-word}html{overflow:hidden}body{margin:0}ul{padding:0;margin:0}ul li{list-style-type:none}a{text-decoration:none}a:hover{text-decoration:underline}input[type='text']:focus,input[type='password']:focus{outline:0}.uncheck{background:url(../images/icon_2.png) no-repeat -74px -163px}.checked{background:url(../images/icon_2.png) no-repeat -92px -163px}.qlogin{display:none}.login,.login_no_qlogin{margin:0 auto;width:488px;border:1px solid #b1b3b4;position:relative}.header{height:60px;border-bottom:1px solid #e2e2e2;position:relative;font-family:'Hiragino Sans GB','微软雅黑'}.header .logo{position:absolute;width:200px;height:60px;background-size:200px 60px}.header .switch{height:45px;position:absolute;left:150px;bottom:0;font-size:16px}.header .switch #switch_qlogin{margin-right:80px}.header .switch .switch_btn{color:#999;display:inline-block;height:45px;line-height:45px;outline:0;*hide-focus:expression(this.hideFocus=true)}.header .switch .switch_btn_focus{color:#333;display:inline-block;height:45px;line-height:45px;outline:0;*hide-focus:expression(this.hideFocus=true)}.header .switch .switch_btn:hover{text-decoration:none;color:#333}.header .switch .switch_btn_focus:hover{text-decoration:none}.header .switch .switch_bottom{position:absolute;bottom:-1px;border-bottom:2px solid #848484}.header .close{width:47px;height:20px;float:right;background:url(../images/icon_2.png) no-repeat -221px -126px;outline:0;*hide-focus:expression(this.hideFocus=true)}.header .close:hover{background-position:-221px -151px}.login_no_qlogin .header .switch{height:40px;position:absolute;left:105px;bottom:0;font-size:22px}.login_no_qlogin .header .switch .switch_bottom{display:none}.login_no_qlogin .header .switch .switch_btn{display:none}.login_no_qlogin .header .switch .switch_btn_focus{color:#333;cursor:default;text-decoration:none;display:inline-block;height:30px;line-height:30px}.web_login{width:488px;position:relative;padding-bottom:65px}.web_login .tips{height:50px;width:270px;position:relative;margin:0 auto;z-index:11}.web_login .error_tips{text-align:center;padding:5px;border:1px solid #dad699;background:#f9f5c7;display:none;position:absolute;bottom:-2px;border-radius:2px}.web_login .error_tips .error_logo{position:absolute;left:3px;height:18px;line-height:18px;width:18px;background:url(../images/icon_2.png) no-repeat 0 -162px}.web_login .error_tips .err_m{display:inline-block;padding-left:20px;line-height:18px;color:#434343;vertical-align:middle;text-align:left}.web_login .operate_tips{display:none;padding:8px;border:1px solid #dad699;background:#f9f5c7;position:absolute;bottom:-2px;border-radius:2px}.web_login .operate_tips .tips_link{color:#f39800}.web_login .operate_tips .down_row{position:absolute;bottom:-6px;_bottom:-7px;left:20px;width:12px;height:6px;background:url(../images/icon_2.png) no-repeat -162px -161px;font-size:1px}.web_login .operate_tips .operate_content{width:100%;text-align:left}.web_login .loading_tips{text-align:center;height:24px;display:none;position:absolute;top:10px;width:274px}.web_login .login_form{width:272px;margin:0 auto}.web_login .inputOuter{width:272px;height:42px;background:url(../images/icon_2.png) no-repeat -1px -1px}.web_login .inputOuter_focus{width:272px;height:42px;background:url(../images/icon_2.png) no-repeat -1px -45px}.web_login .inputstyle{width:258px;position:relative;top:2px;left:2px;height:18px;padding:11px 0 11px 10px;line-height:18px;border:0;background:0;color:#333;font-family:Verdana,Tahoma,Arial;font-size:16px;ime-mode:disabled}.web_login .input_tips,.web_login .input_tips_focus{position:absolute;top:13px;+top:15px;left:13px;font-size:14px;line-height:16px;color:#aaa;cursor:text}.web_login .input_tips_focus{color:#ddd}.web_login .uinArea{height:55px;position:relative;z-index:10}.web_login .uin_del{width:21px;height:21px;cursor:pointer;position:absolute;right:15px;top:10px;background:url(../images/icon_2.png) no-repeat -116px -160px;display:none}.web_login .uin_del:hover{background-position:-139px -160px}.web_login .email_list{border:1px solid #70c2ec;background:#fff;width:266px;position:absolute;z-index:10;display:none;border-radius:1px;padding:1px;left:2px}.web_login .email_list li,.web_login .email_list p{height:31px;line-height:31px;margin:0;overflow:hidden;padding-left:10px}.web_login .email_list p{height:16px;line-height:10px}.web_login .email_list .hover{background:#cbe2fa}.web_login .pwdArea{height:55px;position:relative;z-index:3}.web_login .lock_tips{position:absolute;top:32px;left:-15px;height:16px;padding:5px;text-align:center;display:none;border:1px solid #dad699;background:#f9f5c7;border-radius:2px}.web_login .lock_tips .lock_tips_row{position:absolute;top:-6px;left:25px;width:12px;height:6px;background:url(../images/icon_2.png) no-repeat -162px -168px}.web_login .verifyArea{display:none;height:120px;position:relative}.web_login .verifyinputArea{height:55px}
书写js并引用js代码。
查看效果
jquery-1.9.1.min.js是个js包，可以网上下载。
jquery.login.js是个js包，可以网上下载。
如果点击之后没有弹出，请将第六步的js代码放到网页最下面