多列,结构性伪类,过渡

原创 2018年04月15日 13:55:20

1.多列

将文本内容设计成像报纸一样的多列布局

  • column-width:指定列的宽度
  • column-count:要分的列数
  • column-gap列与列之间的间隙
  • column-rule:列与列之间的边框属性,复合属性。(column-rule-style、column-rule-width和column-rule-color的集合样式)
  • column-rule-style:间隔线类型(hidden:定义隐藏规则/dotted:定义点状规则/dashed:定义虚线规则/solid:定义实线规则/double:定义双线规则)
  • column-span:元素是否横跨所有列

direction:定义文字排列方式

rtl:从右向左排列

ltr:从左向右排列

注意要配合unicode-bidi:bidi-override; 一块使用

下面是一首诗的从右到左的4列排列:

<p>锄禾日当午汗滴禾下土谁知盘中餐粒粒皆辛苦</p>
p{direction:rtl;unicode-bidi:bidi-override;column-width:30px;column-count:4;width:150px;font-size:20px;column-gap:10px}

2.结构性伪类

  • E:nth-child(n) 表示E父元素的第n个子节点,且类型为E
  • p:nth-child(odd){background:red} /*匹配奇数行*/
  • p:nth-child(even){background:red} /*匹配偶数行*/
  • E:nth-last-child(n) 表示E父元素的第n个子节点,从后向前算,且类型为E
  • E:nth-of-type(n) 表示E父元素的第n个E子节点
  • E:nth-last-of-type(n)表示E父元素的第n个E子节点,从后向前算
下面是一个伪类的练习:
<div>
	<p>p1</p>
    <p>p2</p>
</div>
<div>
	<div>
    	<p>p3</p>
        <p>p4</p>
    </div>
    <p>p5</p>
    <p>p6</p>
    <p>p7</p>
</div>

p:nth-of-type(2){color:#ccc}
p:nth-child(2n){color:red;}


3.过渡

transition:过渡(css3的动画的一种)
transition-property:要运动的样式(all || [attr] || none)
transition-duration:规定完成过渡效果需要多少秒或毫秒,默认值为0
transition-delay:定义动画延迟多久开始,默认值为0

transition-timing-function:运动速度曲线。ease:(逐渐变慢)默认值;linear:(匀速);ease-in:(加速);ease-out:(减速);ease-in-out:(先加速后减速);cubic-bezier 贝塞尔曲线( x1, y1, x2, y2 ),贝赛尔曲线的图transition: property duration timing-function delay 

下面是一个风车的练习,在6s转上三圈:

<div class="div1">
	<div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
.div1{overflow:hidden;width:400px;height:400px;transition:all 6s;margin:100px auto;}
.div1 div:nth-child(1),.div1 div:nth-child(4){width:200px;height:200px;float:left;border-radius:0 200px 0 200px;background-color:red}
.div1 div:nth-child(2),.div1 div:nth-child(3){width:200px;height:200px;float:left;border-radius:200px 0px 200px 0px;background-color:red}
.div1:hover{transform:rotate(1080deg);}








从快捷方式中读取目标路径(收藏)

http://support.microsoft.com/kb/130698/从快捷方式中读取目标路径
  • jiangsheng
  • jiangsheng
  • 2001-08-02 22:31:00
  • 1485

CSS3中的过渡

1.过渡 transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等 语法:    transition:[transition-property  transiti...
  • qq_37929849
  • qq_37929849
  • 2017-11-09 14:07:17
  • 876

在触屏上使用CSS3为按钮实现激活效果

1. :hover伪类在触屏上表现不完美,在Android的WebView中,WebKit会处理touch事件和mouse事件,当手指停留在按钮上,hover状态的确被触发,但是当手指保持接触屏幕并离...
  • traversing_sha
  • traversing_sha
  • 2013-09-17 15:13:27
  • 408

过渡

CSS 过渡(transition)是通过定义元素从 起点的状态 和 结束点的状态 ,在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间,而不是立即生效...
  • june_ruikang
  • june_ruikang
  • 2016-05-02 14:56:32
  • 117

css样式的简单使用

####4.初识CSS####   ##4.1##     4.1.1CSS的基本语法结构     行内样式,在html标签中直接使用style属性设置css样式 内部样式表,把css代码...
  • weixin_39892293
  • weixin_39892293
  • 2018-01-19 16:40:21
  • 57

HTML基本知识回顾

网页的基本信息:&amp;lt;!DOCTYPE html&amp;gt;DOCTYPE声明:约束HTML文档结构,检验是否符合相关WEB标准,同时告诉浏览器,使用哪种规范来解释这个文档中的代码。DO...
  • qq_38932355
  • qq_38932355
  • 2018-02-20 20:25:28
  • 31

HTML5总结

一、            常用基本标签标题标签~段落标签换行标签水平线标签字体加粗标签文字倾斜标签注释特殊符号:空格:&nbsp大于号:&gt小于号:&lt引号:&quot版权符号:&copy1) ...
  • qq_33646843
  • qq_33646843
  • 2018-01-19 11:11:05
  • 80

第二章 CSS工作原理(伪类与伪元素)

一. 伪类   伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。   汵 UI(User Interface,用户界面)伪类会在 HTML 元素处于某个状态时...
  • Vivianluolita
  • Vivianluolita
  • 2016-06-22 16:16:15
  • 582

HTML5笔记内容

第一章 加粗:strong 标题标签:h1-h6 图像标签:img 超链接:a 换行: 斜体:em 段落标签:p 水平线标签: 空格:&nbsp 大于号:&gt 小于号:&lt ...
  • qq_41305159
  • qq_41305159
  • 2018-02-05 09:25:55
  • 322

CSS3动画和animae.css动画库的使用

原文链接:http://www.cnblogs.com/2050/p/3409129.html  在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工。美你妹啊,请叫我前端工...
  • u010874036
  • u010874036
  • 2016-04-07 10:16:40
  • 303
收藏助手
不良信息举报
您举报文章:多列,结构性伪类,过渡
举报原因:
原因补充:

(最多只允许输入30个字)