标签：end mit png 下划线 div 网易公司 个人信息 doc span
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>71-网易注册界面4</title> <style> /*1.清空默认边距*/ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{ margin:0;padding:0 } /*2.清空默认样式*/ a{ text-decoration: none; color: #ccc; } ul, ol{ list-style: none; } /*3.利用body设置整个界面的文字信息 文字大小 文字字体 文字颜色 */ body{ font-size:12px; font-family:"宋体"; color: #333; } .header{ width: 960px; height: 80px; margin:0 auto; padding-top: 28px; box-sizing: border-box; } .header .logo{ width: 644px; height: 27px; background: url("images/glb_v2.png") no-repeat 0 0; float: left; } .header .logo a{ display: inline-block; width: 130px; } .header .links{ width: 200px; height: 27px; float: right; text-align: right; } .header .links a{ line-height: 27px; } .content{ width: 960px; height: 600px; margin:0 auto; } .content .top{ width: 960px; height: 38px; background: url("images/line-center.png") repeat-x; } .content .left{ width: 960px; height: 38px; background: url("images/line-left.png") no-repeat left 0; } .content .right{ width: 960px; height: 38px; background: url("images/line-right.png") no-repeat right 0; } .content .right h1{ color: white; font-size: 12px; line-height: 38px; text-indent: 2em; } .content .bottom{ width: 960px; height: 562px; } .content .bottom .article{ width: 642px; height: 562px; float: left; padding-top: 50px; padding-left: 80px; box-sizing: border-box; background-color: #f9f9f9; border: 1px solid #ccc; border-top:none; } .content .bottom .article .articleTop{ width: 560px; height: 60px; } .content .bottom .article .articleTop ul{ width: 412px; height: 34px; background: url("images/tab.jpg") no-repeat left 0; } .content .bottom .article .articleTop ul li{ float: left; width: 137px; height: 34px; line-height: 34px; text-align: center; } .content .bottom .article .articleBottom{ width: 560px; height: 373px; } .content .bottom .article .articleBottom .line{ width: 413px; height: 28px; } .content .bottom .article .articleBottom .line .star{ width: 0px; color: red; } .content .bottom .article .articleBottom .line span{ width: 60px; height: 28px; float: left; line-height: 28px; text-align: right; } .content .bottom .article .articleBottom .line div{ width: 333px; height: 28px; float: right; } .content .bottom .article .articleBottom .line input{ width: 214px; height: 24px; } .content .bottom .article .articleBottom .line .special{ width: 324px; } .content .bottom .article .articleBottom .line select { width: 100px; height: 28px; } .content .bottom .article .articleBottom .line img{ width: 100px; height: 28px; float: left; } .content .bottom .article .articleBottom .line .vcodeInput{ float: left; margin-right:10px; } .content .bottom .article .articleBottom p{ margin-left: 80px; line-height: 28px; border:none; } .content .bottom .article .articleBottom input[type=submit]{ width: 119px; height: 37px; background: url("images/glb_v2.png") no-repeat -144px -360px; border:none; font-size: 20px; color: white; margin-left: 80px; margin-top:20px; } .content .bottom .aside{ width: 318px; height: 562px; background-color: tomato; float: right; padding-top: 105px; padding-left: 45px; box-sizing: border-box; background-color: #f5f5f5; border: 1px solid #ccc; border-top:none; } .footer{ width: 960px; height: 48px; margin:0 auto; } .footer p{ color: #ccc; text-align: center; line-height: 48px; } </style> </head> <body> <!--头部开始--> <div class="header"> <div class="logo"> <a href="#" title="网易163免费邮"></a><a href="#" title="网易126免费邮"></a><a href="#" title="网易Yeah.net免费邮"></a> </div> <div class="links"> <a href="#">了解更多</a> | <a href="#">反馈意见</a> </div> </div> <!--头部结束--> <!--内容开始--> <div class="content"> <!--内容顶部--> <div class="top"> <div class="left"> <div class="right"><h1>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</h1></div> </div> </div> <!--内容顶部结束--> <!--内容底部--> <div class="bottom"> <div class="article"> <div class="articleTop"> <ul> <li>注册字母邮箱</li> <li>注册手机号码邮箱</li> <li>注册VIP邮箱</li> </ul> </div> <div class="articleBottom"> <div class="line"> <span><span class="star">*</span>邮件地址</span> <div> <input type="text" value="建议使用手机号码注册">@<select> <option value="163.com">163.com</option> <option value="126.com">126.com</option> <option value="lnj.net">lnj.net</option> </select> </div> </div> <p>6~18个字符，可使用字母、数字、下划线，需以字母开头</p> <div class="line"> <span><span class="star">*</span>密码</span> <div> <input type="password" class="special"> </div> </div> <p>6~16个字符, 区分大小写</p> <div class="line"> <span><span class="star">*</span>确认密码</span> <div> <input type="password" class="special"> </div> </div> <p>请再次填写密码</p> <div class="line"> <span><span class="star">*</span>手机号码</span> <div> <input type="password" class="special"> </div> </div> <p>忘记密码时,可以通过该手机号码快速找回密码</p> <div class="line"> <span><span class="star">*</span>验证码</span> <div> <input type="text" class="vcodeInput"> <img src="images/vcode.jpg" alt=""> </div> </div> <p>请填写图片中的字符, 不区分大小写</p> <p> <input type="checkbox" checked="checked"> 同意 <a href="#">“服务条款”</a> 和 <a href="#">“隐私权保护和个人信息利用政策”</a> </p> <input type="submit" value="立即注册"> </div> </div> <div class="aside"> <img src="images/wy_right.jpg" alt=""> </div> </div> <!--内容底部结束--> </div> <!--内容结束--> <!--底部开始--> <div class="footer"> <p> <a href="#">关于网易</a> <a href="#">关于网易免费邮</a> <a href="#">邮箱官方博客</a> <a href="#">客户服务</a> <a href="#">隐私政策</a> | 网易公司版权所有 ? 1997-2016</p> </div> <!--底部结束--> </body> </html>
标签：end mit png 下划线 div 网易公司 个人信息 doc span
原文地址：http://www.cnblogs.com/ljcgood66/p/6659329.html
