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


--