Press "Enter" to skip to content

Tag: DIV+CSS

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>
1 Comment

学了这些,你就算入门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%的问题了,其他的慢慢自己研究。

3 Comments