H5 71-网易注册界面4
Posted 甘林梦的开发之路
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5 71-网易注册界面4相关的知识,希望对你有一定的参考价值。
<!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"iVX低代码平台系列制作简单的注册界面