虽然题目是表格，其实是想把之前的文本，列表，图片，表单结合一起写个简单的小例子。这次就写一个全国最大的同性交友网B站的登录页面吧,毕竟之前的页面写起来不过瘾
权侵删
结构分析
首先把原网页结构搞明白
最上面是header，header里左侧是一个由li组成的导航栏，右侧是搜索、登录、注册和投稿按钮。
header下面是一个宽度为100%的图片。暂时把它称为img_wraper吧。
再往下是网页的content部分，而content内部又分为上左右三部分。上侧为横线和登录图片，左侧为APP下载二维码，右侧为一个登录表单。
content下面就是footer部分 footer内部也分为上左右三部分，上侧为分别为B站的相关链接传送门，左侧为合作机构和备案等法律信息，右侧为B站客户端下载和其他公共账号信息
HTML框架
结构分析明白，HTML框架子还是很好写的
<body>
<div id="header">
<div class="header_left">
<ul class="header_meau">
<li class="home"><a href="#"><span>主站</span></a></li>
<li><a href="#">画友</a></li>
<li><a href="#">游戏中心</a></li>
<li><a href="#">直播</a></li>
<li><a href="#">周边</a></li>
</ul>
</div>
<div class="header_right">
<ul>
<li><a href="#">登录</a> |</li>
<li><a href="#">注册</a></li>
<li><a class="up" href="#">投稿</a></li>
</ul>
</div>
<div class="search">
<form>
<input type="text" value="搜索"></input>
<button type="submit"></button>
</form>
</div>
</div>
<div id="img_wrap">
<div class="header_banner"></div>
</div>
<div id="content">
<div class="line">
<div class="img_login">
<img src="images/t2.png">
</div>
</div>
<div class="content_left">
<div class="QR_Code">
<img src="images/qr-tips.png">
</div>
<p class="qr_title">扫描二维码登录</p>
<p class="qr_text">请使用<a href="#">哔哩哔哩客户端</a></p>
<img class="content_bg" src="images/2233login.png">
<div class="vertical_line"></div>
</div>
<div class="content_right">
<form>
<p><input class="email" type="text" value="你的手机号/邮箱"></input></p>
<p><input class="pwd" type="text" value="密码"></input></p>
<p class="find_pwd"><a href="#">忘记密码?></a></p>
<p class="check">
<input type="text" value="验证码"></input>
<img src="images/captcha.jpg">
<a href="#">换一张</a>
</p>
<p class="remember">
<input type="checkbox"></input>记住我<span>不是自己的电脑上不要勾选此项</span>
</p>
<p>
<input class="login_btn" type="submit" value="登录"></input>
<input class="regist_btn" type="button" value="注册"></input>
</p>
<ul>
<li class="weibo"><a href="#">微博账号登录</a></li>
<li class="qq"><a href="#">QQ账号登录</a></li>
</ul>
</form>
</div>
</div>
<div class="clear"></div>
<div id="footer">
<div class="footer_top">
<ul>
<li>
<div class="tips">Bilibili</div>
<div class="card"><a href="#">关于我们</a></div>
<div class="card"><a href="#">友情链接</a></div>
<a class="taobao" href="#"><img src="images/b-taobao.png"></a>
<div class="card"><a href="#">联系我们</a></div>
<div class="card"><a href="#">加入我们</a></div>
</li>
<li>
<div class="tips">帮助</div>
<div class="card"><a href="#">帮助中心</a></div>
<div class="card card_wide"><a href="#">补档认领处</a></div>
<div class="card"><a href="#">资源免责声明</a></div>
<div class="card"><a href="#">侵权申诉</a></div>
<div class="card longer"><a href="#">建议/BUG汇报</a></div>
</li>
<li>
<div class="tips">传送门</div>
<div class="card"><a href="#">高级弹幕</a></div>
<div class="card"><a href="#">名人堂</a></div>
<div class="card"><a href="#">活动专题页</a></div>
<div class="card"><a href="#">资讯</a></div>
<div class="card"><a href="#">壁纸站</a></div>
<div class="card"><a href="#">分院帽计划</a></div>
<div class="card"><a href="#">活动中心</a></div>
</li>
</ul>
</div>
<div class="footer_content">
<div class="footer_left">
<div class="partner_banner"></div>
<div class="legal_info">
<p>广播电视节目制作经营许可证：（沪）字第1248号</p>
<p>网络文化经营许可证：沪网文[2013]0480-056号</p>
<p>信息网络传播视听节目许可证：0910417</p>
</div>
<div class="legal_info">
<p>互联网ICP备案：沪ICP备13002172号-3</p>
<p>沪ICP证：沪B2-20100043</p>
</div>
</div>
<div class="footer_right">
<a href="#">
<div class="phone_pic"></div>
<span>手机端下载</span>
</a>
<a href="#">
<div class="weibo_pic"></div>
<span>新浪微博</span>
</a>
<a href="#">
<div class="weixin_pic"></div>
<span>官方微信</span>
</a>
</div>
<div class="clear"></div>
</div>
</div>
</body>
首先是没有CSS修饰的页面
header部分CSS
为header部分添加CSS
<style type="text/css">
*{
padding:0;
margin:0;
font-family: 'Microsoft YaHei';
}
ul{
list-style:none;
overflow: hidden;
zoom:1;
}
ul li{
float:left;
}
a{
color: #000;
text-decoration: none;
}
a:hover{
color: rgb(0,160,216);
}
.clear{
clear: both;
}
#header{
width:980px;
height: 42px;
line-height: 42px;
margin:0 auto;
}
#header:after{
clear: both;
visibility: none;
overflow: hidden;
content: "";
height: 0;
line-height: 0;
}
.header_left{
float:left;
}
.header_meau{
overflow: hidden;
zoom:1;
}
.header_meau li{
margin:0 15px;
}
.header_meau a{
font-size:14px;
display: block;
color: #000;
text-align: center;
}
.home{
background: url(images/icons.png) -910px -74px;
}
.home a{
width: 50px;
padding-left:20px;
display: block;
}
.header_right{
float:right;
}
.header_right a{
font-size: 14px;
}
.header_right li{
margin-right: 10px;
}
.up{
width: 58px;
height: 48px;
display: block;
text-align: center;
color: #FFF;
background:url(images/b-post.png);
}
.search {
position: relative;
width: 120px;
height: 32px;
line-height: 32px;
float:right;
margin:5px 20px 5px 0;
}
.search form{
border:1px solid #ccd0d7;
border-radius: 16px;
}
.search input{
font:12px Arial;
border:none;
width: 78px;
height: 30px;
margin:auto 10px;
border-radius: 16px;
color:#99a2aa;
}
.search button{
position: absolute;
top:2px;
right:0;
width: 30px;
height: 30px;
display: block;
border: none;
background:url(images/icons.png) -786px -721px;
}
#img_wrap{
background:url(images/rl_topbg.png) repeat-x 0 0;
}
.header_banner {
background:url(images/rl_top.png);
width: 980px;
height: 106px;
margin:0 auto;
}
content部分CSS
为content部分添加CSS
#content{
width: 980px;
margin:0 auto;
overflow: hidden;
}
.line{
height: 25px;
border-bottom: 2px solid #ddd;
}
.img_login{
width: 120px;
height: 47px;
margin:0 auto;
}
.content_left{
width: 480px;
float: left;
position: relative;
margin-top: 50px;
}
.qr_title{
margin-bottom: 10px;
text-align: center;
}
.qr_text{
z-index: 9;
position: relative;
font-size: 13px;
text-align: center;
color: #717171;
}
.qr_text a{
color:rgb(0,160,216);
}
.qr_text a:hover{
color: rgb(250,130,170);
}
.QR_Code{
width: 175px;
height: 180px;
margin:10px auto;
}
.content_right{
float: right;
margin-top: 50px;
}
.content_bg{
position:absolute;
bottom: -70px;
}
.vertical_line{
width: 2px;
height: 240px;
background-color: #ddd;
position: absolute;
top:0;
right:-15px;
}
.content_right p{
margin-bottom:20px;
}
.email,.pwd{
width: 400px;
height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
color: #aaa;
font-size: 14px;
padding-left: 10px;
}
.find_pwd{
text-align: right;
font-size: 12px;
}
.find_pwd a{
color: rgb(0,160,215);
}
.find_pwd a:hover{
color: rgb(250,130,170);
}
.check{
margin-top: -30px;
}
.check input{
height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
color: #aaa;
font-size: 14px;
padding-left: 10px;
background-color: rgb(249,250,252);
}
.check img{
margin-left: 5px;
border: 1px solid #ddd;
height: 35px;
vertical-align:bottom;
}
.check a{
margin-left: 5px;
font-size: 12px;
color: rgb(0,160,215);
}
.remember input{
margin-right: 10px;
}
.remember{
font-size: 12px;
}
.remember span{
margin-left: 20px;
color: #ddd;
}
.login_btn,.regist_btn{
width: 184px;
height: 36px;
text-align: center;
border-radius: 2px;
cursor: pointer;
}
.login_btn{
border: 1px solid #0381AA;
background-color: #00A7DE;
color: #FFF;
}
.login_btn:hover{
background-color: rgb(0,190,230);
}
.regist_btn{
margin-left: 27px;
border: 1px solid #ccc;
background-color: #FFF;
}
.regist_btn:hover{
background-color: rgb(247,247,247);
}
.weibo{
background:url(images/snsicon.png) no-repeat 0 0;
margin-right: 40px;
}
.weibo a,.qq a{
font-size: 12px;
padding-left: 25px;
}
.qq{
background:url(images/snsicon.png) no-repeat 0 -41px;
}
footer部分CSS
为footer添加CSS
#footer{
margin-top: 20px;
padding: 20px 0;
background-color: #f6f9fa;
}
.footer_top{
width: 980px;
margin:10px auto;
overflow: hidden;
}
.footer_top li{
float: left;
position: relative;
width: 296px;
height: 100px;
padding-left: 30px;
padding-right: 10px;
border-left: solid 1px #e5e9ef;
}
.footer_top li:first-child{
border: none;
padding-left: 0 !important;
}
.card{
float: left;
text-align: left;
width: 86px;
margin:4px 0px 3px 0;
}
.longer{
width: 100px;
}
.tips{
font-size: 14px;
line-height: 22px;
color: #717171;
}
.card a{
font-size: 14px;
display: block;
}
.taobao{
float:right;
margin: 10px 24px 0 0;
}
.card_wide{
margin-right: 25px;
}
.footer_content{
width: 980px;
margin:0 auto;
}
.footer_left{
float: left;
}
.footer_right{
float: right;
}
.partner_banner{
float: left;
width: 96px;
height: 70px;
background: url(images/footpic.gif) no-repeat;
margin-right: 10px;
}
.legal_info{
float: left;
line-height: 22px;
margin: 0 5px;
font-size: 12px;
color: #717171;
}
.footer_right {
width: 310px;
text-align: center;
}
.footer_right a{
float: left;
}
.footer_right span{
font-size: 12px;
padding-right: 20px;
}
.phone_pic,.weibo_pic,.weixin_pic{
width: 65px;
height: 65px;
margin-right: 25px;
}
.phone_pic{
background: url(images/icons.png) no-repeat -1020px -190px;
}
.weibo_pic{
background: url(images/icons.png) no-repeat -1020px -318px;
}
.weixin_pic{
background: url(images/icons.png) no-repeat -1020px -62px;
}
</style>
OK，刷新下页面 还是很像的 大概模仿了一个七八分吧 可以兼容IE B站的登录页面在IE11下排版是错位的
到JavaScript部分会专门在为这个网页添加相应的事件