css 背景与 页面元素相结合

代码


<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


--
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值