网页设计心得

最新推荐文章于 2025-08-22 23:47:35 发布

weixin_33682790

最新推荐文章于 2025-08-22 23:47:35 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/raydchang/blog/186100

2019独角兽企业重金招聘Python工程师标准>>>

为适应不同分辨率浏览效果

TOP菜单简化，不要超出750px，很多内容可以放到左右sidebar中；
sidebar一般需要固定宽度，内容区可以用动态宽度，如百分比或用js动态计算；
兼容IE6吧，毕竟国内还有14%的使用率；所以简单就好；用js动态处理会是一种不错的选择
参考Open的框架，但千万别照搬，不然会死得很难看；
布局可固定宽度与按比例分配；

分享一段代码：宽度可固定可按比例并存，可以兼容IE6，代码本生可能还有一些欠缺，重点是分享思路，欢迎交流：

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../assets/js/jquery1.8.js"></script>
<link href="../assets/css/daxuu1.css" rel="stylesheet">
<style>

/**
 * container
 */
.container {
    margin: 0 auto;
    width: 1190px;
    /*background: #eeeeee;*/
}

/**
 * row
 */
.row {
    /*margin-left: -15px;
    margin-right: -15px;
    */
    
}

.row:before,.row:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.row:after {
    clear: both;
}

/**
 * col-?的间距
 */
.space {
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   public
   ========================================================================== */
body {
  background: url('../images/background_gradient.png') repeat-x scroll 0 0 #ededed;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
  /*font-size: 13px;
  text-align: center;
  */
}
 
.clear {
    clear: both;
    font-size: 1px;
    line-height: 0;
}
.left
{
    float:left;    
}
.right
{
    float:right;        
}

</style>
</head>
<body>
    <div>
        <div id="msg">width:</div>

    </div>
    <hr>
    <div>
        <div>
            <div class="left col-fix-180">
                <h2>col fixed 180px</h2>
                <p>Donec id elit non mi porta gravida at eget
                    metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam
                    porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                <p>
                    <a class="btn btn-default" href="#" role="button">View details
                        &raquo;</a>
                </p>
            </div>
            
            <div class="left col-7">
                <div>
                    <h1>Hello, world! col-7:7/9</h1>
                    <p>This is an example to show the potential of an offcanvas
                        layout pattern in Bootstrap. Try some responsive-range viewport
                        sizes to see it in action.</p>
                </div>
            </div>
        
            <div class="left col-2">
                <h2>col-2:2/9</h2>
                <p>Donec id elit non mi porta gravida at eget
                    metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                    condimentum nibh, ut fermentum massa justo sit amet risus. Etiam
                    porta sem malesuada magna mollis euismod. Donec sed odio dui.</p>
                <p>
                    <a class="btn btn-default" href="#" role="button">View details
                        &raquo;</a>
                </p>
            </div>
        </div>
    </div>
    <hr>
    <div>
        <p>Copyright XXX</p>
    </div>
    <script type="text/javascript">
    (function() {
        /*疑难问题记录
        1.var w_row = $(".row").width()在IE6中取不到真实宽度
        var w_row = $(".row").parent().width();
         */
        //adjust col's width to fit row's width
        var w_col_tmp = 0;
        var w_row = $(".row").parent().width();
        var w_rest = w_row;
        var w_dyn_count = 0;
        var cols = [];
        $(".row").children().each(
                function(i, e) {
                    var obj = {
                        col : $(this),
                        width : 0,
                        fix : true
                    };
                    var cls;
                    if ($(this).attr('class')
                            && $(this).attr('class').indexOf('col-') >= 0) {
                        //fix width col
                        if ($(this).attr('class').indexOf('col-fix') >= 0) {
                            $(this).width()
                            cls = $(this).attr('class').split(' ');
                            for ( var i in cls) {
                                //class contains col-fix-200
                                if (cls[i].indexOf("col-fix") >= 0) {
                                    obj.width = cls[i].substr(8);
                                    w_rest -= obj.width;
                                    //console.log("obj.width=" + obj.width);
                                }
                            }                        
                        } else {
                            cls = $(this).attr('class').split(' ');
                            for ( var i in cls) {
                                //class contains col-1...12
                                if (cls[i].indexOf("col-") >= 0
                                        && cls[i].indexOf("col-fix") < 0) {
                                    obj.width = cls[i].substr(cls[i]
                                            .indexOf('-'));
                                    obj.fix = false;
                                    w_dyn_count += Math.abs(obj.width);
                                    //console.log("obj.width=" + obj.width);
                                }
                            }
                        }
                    }
                    cols.push(obj);
                });

        /**/
        for ( var i in cols) {
            //console.log("w_rest=" + w_rest + " w_dyn_count=" + w_dyn_count);
            var w = 0;
            if (cols[i].width > 0) {

                w = Math.abs(cols[i].width);
            } else {
                w = Math
                        .round(w_rest * (Math.abs(cols[i].width) / w_dyn_count));
            }

            if (i == cols.length - 1) {
                w = w_row - Math.abs(w_col_tmp);
            } else {
                w_col_tmp += w;
            }
            //console.log("width=" + w + " w_col_tmp=" + w_col_tmp);
            //alert("width=" + w + " w_col_tmp=" + w_col_tmp);
            cols[i].col.width(w);
        }
        
    })();
    </script>
</body>
</html>

转载于:https://my.oschina.net/raydchang/blog/186100