关闭

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

597人阅读 评论(0) 收藏 举报
分类:

13)背景渐变

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

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

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

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

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

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

 

14column----------多栏布局

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

2column-count:3;---------------定义列数(不为负值)

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

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

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

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

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

5column-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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:50371次
    • 积分:1369
    • 等级:
    • 排名:千里之外
    • 原创:88篇
    • 转载:15篇
    • 译文:0篇
    • 评论:1条