HTML栅格化示例

如果需要将一个DIV平均分割成几个小方格, 栅格化是比较好的解决方案, 本文演示一下

CSS代码:

    <style>
        .features .feat_list{
            width: 60%;
            margin: 20px auto;
            outline: 1px solid blue; 
        }
        .features .feat_list::before,
        .features .feat_list::after{
            content: '';
            display: table;
            clear: both;
        }
        .features .feat_list .gird{
            height: 300px;
            background-color:#FFDCDC;
            box-sizing: border-box;               /* CSS属性 */
            float: left;
            margin: 0 1%;     /* 如果这里margin是0, 则表格没有间隙, 下面width应该使用精准的数字, 例如33.33%, 66.66%等 */
            outline: 1px solid red;
            /* padding: 12px; */  /* 如果这里margin是0, 一般是需要设置padding */
        }
        .features .feat_list .gird-1{width: 31.33%;}   /* 三栏表格宽度, 用33.33%减去margin的1%, 得到31.33% */
        .features .feat_list .gird-2{width: 64.66%;}   /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
        .features .feat_list .gird-5{width: 18%;}      /* 三栏表格占2栏, 用33.33%减去margin的1%, 得到31.33% */
        .features .feat_list .gird-4{width: 23%;}
    </style>

继续阅读

学了这些,你就算入门DIV+CSS了

CSS功能复杂多变,大多数新手莫不着头脑,不知道怎么去控制。所以做个简易教程。

1,文字控制类

font-size:12px; 文字大小,通常为12px。现在又流行14px。大小自己控制。

color:#666; 颜色控制,颜色自己下个取色板吧。16进制
line-height:2em; 行高,em为字符,支持px 百分比等等多种单位
text-align:center; 文字居中,居左不要,居右为right
font-weight:bold; 文字加粗
text-indent:2em; 每段缩进,两个字符,常用

用以上CSS便可基本供职90%的问题了,其他的慢慢自己研究。 继续阅读