【设置图片主体部分居中】

网页制作过程中，我们常常需要插入图片，有时需要插入大于浏览器窗口大小的图片，在我们横向改变浏览器窗口大小的时候图片总有一部分会被遮挡，如果我们想要让图片的主体部分一直居中，这个时候可以用我下面讲到的这个方法来实现。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title>title</title>
    <style type="text/css">
        *{   
            margin:0px;
            padding:0px;
        }
        body{
            min-width: 960px;   /*当浏览器窗口宽度调整至960px时开始出现窗口滚动条，主体元素开始被遮挡*/
        }
        .imgBox{
            width: 100%;
            overflow: hidden;
        }
        .imgBox img{   /*实现该效果的主要CSS样式*/
            display: block;
            left: 50%;
            margin-left: -960px;
            position: relative;
        }
    </style>
</head>
<body>
    <div class="imgBox">
        <img src="图片地址"/>  <!-- 这里的图片宽度大于浏览器窗口可视宽度 -->
    </div>
</body>
</html>

 

【编码过程注意事项每日总结】

  1. float 和 position 属性不可以同时使用
  2. IE插入图片时默认有 1px 的边框
  3. 平时在计算Box大小的时候只计算元素的大小，至于元素和其他元素的间隔使用 margin 或者 padding 设置
  4. 双栏布局的时候尽量给每一栏定好宽度，左边一栏左浮动，右边一栏右浮动，这样便不必理会两栏的间隔
  5. 全局定义最好避免使用 overflow:hidden
  6. 定义字体时最好使用字体的英文名称

posted on 2014-04-18 17:25  Elissa.Cool  阅读(230)  评论(1)  编辑  收藏  举报

导航