张新丁

WEB前端工程师/PHP工程师-技术笔记

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

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>

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012054869/article/details/51548773
个人分类: HTML5 HTML CSS
上一篇HTML5+CSS3-第三节(文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩、)
下一篇HTML5+CSS3-第五节(边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转)
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭