关闭

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

904人阅读 评论(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
查看评论

html背景色渐变(通过CSS实现)

效果截图: ----------------------------------------------------------------------------------------------------------------------------- 实现代码: ...
  • friendan
  • friendan
  • 2014-03-23 18:31
  • 35161

Html中背景色之颜色渐变

颜色渐变:   原理:以水平中心开始顺时针画圆     1.颜色渐变分为水平渐变与放射性渐变     线性渐变:       写法一:background:liner-gradient(red,black)【表示...
  • qq1556837534
  • qq1556837534
  • 2015-11-23 17:22
  • 1206

背景渐变 兼容IE

CSS 实现元素背景渐变 .demo { width:100%; height:200px; border:solid 1px #213c7c; background: -webkit-gradient(linear, 0 0, 0 100%, fr...
  • huangyibin628
  • huangyibin628
  • 2015-06-20 17:48
  • 1660

第三课:Html5背景属性-背景和渐变

1、背景属性复习: background-image background-color background-repeat background-position background-attachment 2、新增属性: background-size: background-size:x y;...
  • itsme_web
  • itsme_web
  • 2017-04-21 23:34
  • 1868

HTML5画渐变背景图片,自动下载

drawBgLine.html html5画渐变背景图片,并自动下载 //第一步:获取canvas对象 var c = document.getElementById("c"); //第二步:获取canvas对象的上下文对象 ...
  • WANGya822
  • WANGya822
  • 2013-11-08 01:58
  • 1281

盒布局和多栏布局

【摘自HTML5与CSS3权威指南】 使用float或position时,元素的内容高度不一致,则有底部很难对齐的问题 解决方法:盒布局或多栏布局   一.盒布局和多栏布局的区别: 1.使用多栏布局时,各栏宽度必须是相等的,在指定每栏宽度时,也只能为所有栏指定统一的宽度,栏与栏之...
  • alanfancy
  • alanfancy
  • 2015-12-03 22:11
  • 1030

CSS媒体查询和flex实现自适应多栏布局

效果代码<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" c...
  • c_kite
  • c_kite
  • 2017-12-10 14:08
  • 77

HTML5绘制颜色渐变

绘制线性渐变要用到:createLinearGradient,方法如:XXX.createLinearGradient(xStart,yStart,xEnd,yEnd); xStart为渐变起始地点的横坐标,yStart为渐变起始地点的纵坐标,xEnd为渐变结束地点的横坐标,yEnd为渐变起始地点的...
  • u011102207
  • u011102207
  • 2015-08-07 15:58
  • 1010

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

(13)背景渐变 语法:background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000)); 第一个参数:渐变类型---线性渐变 第二个参数:分别为 X,Y轴方向渐变的起始位置 第三个参数:分别为 X,Y轴方向渐变的终止位置 第四个参...
  • u012054869
  • u012054869
  • 2016-05-31 20:20
  • 904

flex:多栏多列弹性布局

可设置的属性有:align-items、flex-direction、align-content、justify-content、flex-wrap、flex、align-self、flex-grow、flex-shrink、flex-basis 前提:父元素设置了display:flex; a...
  • qq8241994
  • qq8241994
  • 2017-07-26 13:17
  • 384
    个人资料
    • 访问:89172次
    • 积分:1814
    • 等级:
    • 排名:千里之外
    • 原创:91篇
    • 转载:19篇
    • 译文:0篇
    • 评论:2条