多列,结构性伪类,过渡

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);}








阅读更多
想对作者说点什么?

博主推荐

换一批

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