Home > Web Front-end > HTML Tutorial > CSS应用二_html/css_WEB-ITnose

CSS应用二_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:32:35
Original
1289 people have browsed it

  1. 样式中的顺序问题。

如:padding,margin,border,等,都是按照顺时针方向赋值的,及上右下左。

Padding:1px 2px 3px 4px;(top:1px;right:2px;bottom:3px;left:4px;)

Border-radius:3px;表示四个角都是3像素的圆角。

Border-radius:3px 4px 5px 6px;四个角的圆角度数都不一样,左上为:3px;右上为:4px,右下为5px;左下为6px;

  1. 样式中的缩写。

我们在样式中经常看到这样的写法:

margin:0 3px;当top和bottom的数值一样,left和right一样时,可以这样简写。

Margin: 1px 3px 2px;这样的写法为,top的值为1px,bottom的值为2px;left与right的只为:3px;

  1. 关于居中显示
    1. align与 text-align属性,在table中可以使用align来为ta设定居中样式。Div中文字居中使用text-align:center来居中。
    2. width与margin配合定义居中。如:width=”200px”;margin:0 auto;
    3. 定位居中,position:absolute;left:1px;right:1px;margin:0 auto;
  2. 关于fixed的使用

Position的属性值。生成绝对定位的元素,相对于浏览器窗口进行定位。通过left,right,bottom,left来控制位置。一旦设定位置,就会固定在浏览器对应的位置,不会跟随浏览器内容的滚动而滚动。多应用在弹出窗口,提示框等条件下。如:position:fixed;Left20px;top:30px;

  1. 动画animation属性

Animation为简写属性,用来设置六个动画属性:

 

animation-name  规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间,以秒或毫秒计。

animation-timing-function 规定动画的速度曲线。

animation-delay 规定在动画开始之前的延迟。

animation-iteration-count 规定动画应该播放的次数。

animation-direction 规定是否应该轮流反向播放动画。

 

属性定义为:animation: name duration timing-function delay iteration-count direction;

如:animation:myfirst 5s;  定义一个名为myfirst 的动画,时间为5s。

    @keyframes myfirst

{

from {background:red;}

to {background:yellow;}

} 定义该动画,的背景由红边黄。

animation-timing-function 规定动画的速度曲线。

曲线包括(

linear:动画从头到尾的速度是相同的。

ease:默认。动画以低速开始,然后加快,在结束前变慢。

ease-in:动画以低速开始。

ease-out :动画以低速结束。

ease-in-out:动画以低速开始和结束。

cubic-bezier(n,n,n,n):在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。;)

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template