HTML---仿网易新闻登录页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"/> <title>网易注册界面</title> <style> 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 } a{ text-decoration: none; font-size: 12px; color: #ccc; } /*3.利用body设置整个界面的文字信息 文字大小 文字字体 文字颜色 */ body{ font-size:12px; font-family:"宋体"; color: #333; } ul, ol{ list-style: none; } /*头部样式*/ .header{ width: 960px; height: 80px; margin: 0 auto; padding-top: 28px; box-sizing: border-box; } .header .logo{ width: 644px; height: 27px; float: left; background: url("images/glb_v2.png") no-repeat 0 0; } .header .logo a { display: inline-block; width: 130px; height: 27px; } .header .links{ float: right; width: 200px; height: 27px; 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 p { color:white; font-size: 12px; line-height: 38px; text-indent: 2em; } /* bottom的底部表单 */ .content .bottom { width: 960px; height: 562px; background-color: blue; } .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{ list-style: none; width: 412px; height: 34px; background-color: red; background: url("images/tab.jpg") no-repeat left 0; } .content .bottom .article .articleTop ul li{ float: left; width: 137px; height: 34px; text-align: center; line-height: 34px; } .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; font-size: 12px; 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 select { width: 100px; height: 28px; } .content .bottom .article .articleBottom .line .special{ width: 324px; } .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{ font-size: 12px; 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: #f2f2f2; float: right; padding-top: 105px; padding-left: 45px; box-sizing: border-box; border: 1px solid #cccccc; 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"> <p>欢迎注册无限容量的网易邮箱！邮件地址可以登录使用其他网易旗下产品。</p> </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>请再次填写密码</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>
效果如下：
