(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>