一个简单的网站注册页面制作。
创建CSS文件如下：
@charset "utf-8"; /* CSS Document */ * { margin: 0px; padding: 0px; border: 0px; } body { font-family: 宋体; font-size: 12px; color: #333; line-height: 22px; background-color: #FFF; } #login-bg { width: 630px; height: auto; overflow: hidden; margin: auto; background-color: #FFF; background-image: url(../images/login-bg1.jpg); background-repeat: repeat-x; } #login-title { width: 139px; height: 46px; font-family: 微软雅黑; font-size: 16px; font-weight: bold; text-align: center; line-height: 46px; border-top: solid 3px #E91162; border-right: solid 1px #F4F4F4; background-color: #FFF; } #login-text { height: 44px; border-bottom: solid 1px #F4F4F4; color: #ABABAB; font-size: 14px; line-height: 44px; background-image: url(../images/login-ico.gif); background-repeat: no-repeat; background-position: 20px center; padding-left: 60px; } #login-left { width: 630px; height: auto; overflow: hidden; border-right: solid 1px #F4F4F4; float: left; } #login-left dt { width: 130px; height: 69px; font-size: 14px; line-height: 69px; text-align: right; border-bottom: solid 1px #F4F4F4; float: left; } #login-left dd { width: 485px; height: 69px; font-size: 14px; line-height: 69px; padding-left: 15px; border-bottom: solid 1px #F4F4F4; float: left; } .input01 { width: 260px; height: 36px; font-size: 14px; line-height: 36px; background-image: url(../images/login-bg2.gif); background-repeat: repeat-x; border: solid 1px #ABADB3; margin-top: 17px; } .input02 { width: 100px; height: 25px; font-size: 14px; line-height: 36px; background-image: url(../images/login-bg2.gif); background-repeat: repeat-x; border: solid 1px #ABADB3; margin-top: 20px; } .red-font1 { color: #E91162; } .black-font1 { color: #666666; } .black-font2 { color: #999999; } .login-btn { margin-top: 13px; margin-left:200px; }
HTML文件如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <title>无标题文档</title> </head> <div id="login-title">新用户注册</div> <div id="login-text">Hi,<span class="black-font1">新朋友</span> 欢迎注册某某网站。</div> <div id="login-left"> <form id="form1" name="form1" method="post" action=""> <dl> <dt>邮箱</dt> <dd> <input name="username" type="text" class="input01" id="username" /> </dd> <dt>密码</dt> <dd> <input name="password" type="password" class="input01" id="password" /> </dd> <dt>确认密码</dt> <dd> <input name="password" type="password" class="input01" id="password" /> </dd> <dt>昵称</dt> <dd> <input name="username" type="text" class="input01" id="username" /> </dd> <dt>城市</dt> <dd> <select name="city" class="input02"> <option selected="selected">北京</option> <option>广州</option> <option>深圳</option> <option>上海</option> <option>杭州</option> <option>武汉</option> </select> </dd> <dt>验证码</dt> <dd> <input name="yanzheng" type="text" class="input01" id="yanzheng" /> <img src="images/temp1.jpg" width="105" height="27" />看不清，<span class="red-font1">换一个</span></dd> <dd> <input type="checkbox" name="chockbox" id="chockbox" /> 我已认真阅读并同意某某网<span class="red-font1">《使用协议》</span> </dd> <dt></dt> <input name="login-btn" type="image" class="login-btn" id="login-btn" src="images/reg-btn.jpg" /> </dd> </dl> </form> </div> <body> </body> </html>
最终效果图如下：
