zoukankan html css js c++ java

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

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

<!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>

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

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

查看全文

相关阅读:
mysql/mariadb学习记录——查询2
mysql/mariadb学习记录——查询
 touchSwipe 上下左右滑动，二指缩放效果不好。
c# 调用c++ 使用指针传递的时候
 c# 调用 matlab 引发初始化错误异常
 创建非主键唯一约束
 sql 中如果添加时间戳字段 timestamp
JS frame 跨域传值
 VS 附加进程调试
 Aspose.words 替换字符操作

原文地址：https://www.cnblogs.com/guduoduo/p/3673726.html