HTML5+CSS3-第四节（背景渐变、多栏布局column）

（13）背景渐变

语法：background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000));

第一个参数：渐变类型---线性渐变

第二个参数：分别为 X,Y轴方向渐变的起始位置

第三个参数：分别为 X,Y轴方向渐变的终止位置

第四个参数：设置起始位置的颜色

第五个参数：设置终止位置的颜色

 

（14）column----------多栏布局

1、column-width:200px;---------定义每列宽度

2、column-count:3;---------------定义列数（不为负值）

3、column-gap:normal;-------列边距，默认值为normal,为1em

4、column-rule-----列边框

         column-rule-width:100px;-----定义列边框宽度，默认medium,不为负值

column-rule-style:none;-----默认为none,定义边框样式如（double、dashed）

column-rule-color:red;------定义边框颜色

5、column-span:none/all;内容标题横跨所有列

None：默认，不跨任何列；  all：跨越所有的列

例子：

Css.css:

<style type="text/css">

.coumns{

         width:1000px;

         -webkit-column-width:100px;

         -webkit-column-gap:40px;

         -webkit-column-rule:doublered;

        

         }

p:nth-child(2n){-------选择器，是指寻找所有p标记为偶数的

         -webkit-column-span:all;

         }

</style>

 

Index.html:

<div class="coumns">

         <p>1）、所有的命名最好都小写2）、属性的值一定要用双引号("")括起来，3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整</p>

 

  <p>外套 wrap ------------------用于最外层头部 header----------------用于头部主要内容 main ------------用于主体内容（中部）</p>       

 

<p>CSS命名规则 头：header 内容：content/containe尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中</p>

</div>