月度归档:2015年08月

python开发环境备忘 — pip wheel

python以第三方包闻名天下,但是这又为部署带来了巨大的挑战:一般情况下我们是在开发环境进行开发,然后引入了一大堆包,然后往生产环境推时就遇到这这样几个难题:

1. 外部模块版本管理和版本依赖问题,因为过于自由,所以很多时候不同版本之间就是不兼容,这时就需要我们来记录一下各个模块的版本以及他的依赖。

2. 生产环境一般情况下是与外部网络隔绝的,这就使得我们不能随时联网安装或者更新包,这就需要我们将本地的模块打包,然后部署时快速地安装。

这对这些问题,我们就引入了python包管理的内容:常用的有打包为eggs、whl等。 今天就来介绍下打包为whl的情景:

首先我们安装wheel:
 

pip install wheel

以下列出我经常用到的wheel指令:

1. 为一个包创建whl: 

# 打包python-dateutil :
pip wheel --wheel-dir=wheelhouse python-dateutil
pip wheel --wheel-dir=wheelhouse python-dateutil==2.4.2

# 打包python-dateutil 到当前目录下的wheel-dir: 
pip wheel --wheel-dir=wheelhouse python-dateutil   --trusted-host pypi.douban.com

#按照whl列表打包: 
pip wheel --wheel-dir=/local/wheels -r requirements.txt

2. 安装whl: 

pip install python_dateutil.whl

pip install --use-wheel --no-index --find-links=wheelhouse python-dateutil

3. 创建全量的whl列表:

pip freeze > requirements.txt

4. 全量安装whl:

pip install -r requirements.txt

pip install --use-wheel --no-index --find-links=wheelhouse -r requirements.txt

参考官方文档: https://pip.pypa.io/en/stable/user_guide/

 

两列布局高度自适应

在web设计时我们经常会有这样的需求: 顶部和底部是固定的,内容要分左右两列,而左右的内容高度是不固定的。我们还想要左右有不同的背景(或者边框),这时如果左右的高度能保持一样该多好呀(对应了优雅页面设计的“对齐”的哲学原理)。今天就来研究下对齐的好玩的方法:

  1. 当前最常用也最简单的莫过于实用 js 来控制了,页面加载完毕后计算和重设两边的高度为最大的高度,当页面resize的时候再次处罚计算函数。

     

     

    $(document).ready(function () {
        var highestCol = Math.max($('#leftColumn').height(),$('#rightColumn').height());
        $('.elements').height(highestCol);      
    });
  2. 也比较简单的方法: table布局 。 因为这样就不需要js代码来控制(布局的事情还需要js来参与的话,有木有太业余的感觉?),而且不需要以下第三种方法的添加额外div。我这次使用的方法也是这一种的。

     

     

    .parent_div{display: table-cell;}
    .child_div{display:table-cell;height:100%;}
  3. 实用float来进行相关hack。 参考: http://matthewjamestaylor.com/blog/equal-height-columns-3-column.htm. 基本原理就是使用div 作为父类来对分栏的内容带来影响。 这种方法在两列、三列时使用还是比较方便的,但是如果随着列数增多,额外需要添加的div太多了,“好大一棵树的感觉”。以下代码是使用这种方法构造的三列布局(例子也来自 MATTHEW JAMES TAYLOR 的文章 Equal Height Columns with Cross-Browser CSS):
    如果使用默认的流式布局,代码如下:

     

    <div id="container1">
        <div id="col1">Column 1</div>
        <div id="col2">Column 2</div>
        <div id="col3">Column 3</div>
    </div>
    #container1 {
        float:left;
        width:100%;
    }
    #col1 {
        float:left;
        width:30%;
        background:red;
    }
    #col2 {
        float:left;
        width:40%;
        background:yellow;
    }
    #col3 {
        float:left;
        width:30%;
        background:green;
    }

    将会呈现如下效果:
    1equal-height-columns-container-div
    如果想要实现脱离子元素左右排列,则需要子元素使用float来脱离流式布局。如果再使父元素也浮动起来,则子元素的高度会把父元素的高度撑起来(要不然因为子元素脱离了文档流,去了另一个世界,父元素里东西都不存在了,父元素的高度就为0 了 。但是如果父子同时脱离了标准文档流,虽然都到了另一个世界,但dom结构在那里呢,还是父子关系,父亲下面又有儿子了,有内容了当然就有高度了,而且高度还是儿子的高度呢)。
    html: 

    <div id="container3">
        <div id="container2">
            <div id="container1">
                <div id="col1">Column 1</div>
                <div id="col2">Column 2</div>
                <div id="col3">Column 3</div>
            </div>
        </div>
    </div>

    css:
     

    #container3 {
        float:left;
        width:100%;
        background:green;
    }
    #container2 {
        float:left;
        width:100%;
        background:yellow;
    }
    #container1 {
        float:left;
        width:100%;
        background:red;
    }
    #col1 {
        float:left;
        width:30%;
    }
    #col2 {
        float:left;
        width:40%;
    }
    #col3 {
        float:left;
        width:30%;
    }

    这时显示结果如下:
    2equal-height-columns-3-containers
    现在高度已经正常了,下面只需要我们借助外层了父亲来下换脸,更改背景属性就行了:
    3equal-height-columns-container-positions
    将三列元素重新添加到页面上:
    4equal-height-columns-content-position
    contain1添加overflow兼容:
    5equal-height-columns-complete
    同时我们再给最外层的父亲(不做移位操作的dom,width为100%)加上overflow=hidden,从而让多出的内容不要展示出来
    css如下:

    #container3 {
        float:left;
        width:100%;
        background:green;
        overflow:hidden;
        position:relative;
    }
    #container2 {
        float:left;
        width:100%;
        background:yellow;
        position:relative;
        right:30%;
    }
    #container1 {
        float:left;
        width:100%;
        background:red;
        position:relative;
        right:40%;
    }
    #col1 {
        float:left;
        width:30%;
        position:relative;
        left:70%;
    }
    #col2 {
        float:left;
        width:40%;
        position:relative;
        left:70%;
    }
    #col3 {
        float:left;
        width:30%;
        position:relative;
        left:70%;
    }

    如果还需要在元素上加点内边距,也是可以的。依照以下计算方法:(每个元素加上2% 的边距):
    6equal-height-columns-3-column-offsets
    这种方法主要是为了兼容ie的,因为ie的双边距问题,如果我们的box是200像素,padding为20像素, 正常情况下这个元素宽度应该是240像素,但是IE下就是200像素。IE就是不认为padding是box的一部分。

本文即将结束时发现已有老外在几年前写的一篇文章,大意相同,而且分析的更有深度。 有空我会把这篇文章翻译出来,以释相见恨晚之情:(原文地址: https://css-tricks.com/fluid-width-equal-height-columns/