代码
注释:
最外层div css : div class="bgwrap"
center : 表示背景图片随浏览器宽度改变时,保持图片中心显示在浏览器的中心
内容div css : div class="login_wrap"
margin : auto 使页面宽度随浏览器改变时,整个div仍能居中
这2个属性的设置,确保了 内容div 中的元素 与 最外层div 的背景,随浏览器的宽度改变时,相一致。
效果图:
结合前:
[img]http://dl2.iteye.com/upload/attachment/0099/2422/90871945-e4fd-32ae-b80e-5e1725b60295.png[/img]
结合后:
[img]http://dl2.iteye.com/upload/attachment/0099/2424/00c0c786-f945-3078-8b14-d074d7de6c1b.png[/img]
当然,输入框 input 的 css 要设置:
border: none : 不显示边框(边框使用背景)
参考更多:
http://nodebook.info/book/view?bid=53523a3c19980e913e9be3ee
--
<div class="bgwrap">
<div class="login_wrap">
<div class="login_table">
</div>
<div class="login_list">
<p align="right"><a href=" ">更多>></a></p>
<ul>
</ul>
</div>
<div class="clear"></div>
<div class="login_text_tip">
<p><big>注册和登录提示:</big></p>
<p>
<big>1、</big><br>
<big>2、</big> <br>
<big>3、</big></p>
</div>
</div>
<div class="clear_10"></div>
<div class="copyright_mhy">版权所有</div>
</div>
注释:
最外层div css : div class="bgwrap"
.bgwrap {
background: url(../img/bg_02.png) center top no-repeat;
height: 595px;
}
center : 表示背景图片随浏览器宽度改变时,保持图片中心显示在浏览器的中心
内容div css : div class="login_wrap"
.login_wrap {
width: 700px;
margin: 0 auto;
margin-top: 100px;
height: 310px;
}
margin : auto 使页面宽度随浏览器改变时,整个div仍能居中
这2个属性的设置,确保了 内容div 中的元素 与 最外层div 的背景,随浏览器的宽度改变时,相一致。
效果图:
结合前:
[img]http://dl2.iteye.com/upload/attachment/0099/2422/90871945-e4fd-32ae-b80e-5e1725b60295.png[/img]
结合后:
[img]http://dl2.iteye.com/upload/attachment/0099/2424/00c0c786-f945-3078-8b14-d074d7de6c1b.png[/img]
当然,输入框 input 的 css 要设置:
.login_wrap table td input.long_mhy {
width: 140px;
height: 30px;
line-height: 30px;
margin-left: 8px;
background: none;
border: none;
}
border: none : 不显示边框(边框使用背景)
参考更多:
http://nodebook.info/book/view?bid=53523a3c19980e913e9be3ee
--