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 的数值。;)

CSS应用二的更多相关文章

  1. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  2. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  3. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  4. 前端之CSS(二)

    一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...

  5. 如何在普清的屏上调试CSS样式二倍图背景

    背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...

  6. CSS 笔记二(Text/Fonts/Links/Lists)

    CSS Text 1> Text Color used to set the color of the text 2> Text Alignment used to set the hor ...

  7. 数往知来 CSS<十二>

    div+css基础 一.外部样式<!--外部样式可以使网页与样式分离,分工处理 1.写网页,主要提供内容,一般都会有固定的结构,具有id等属性的标签包括特定的内容 2.根据结构写样式另存为css ...

  8. CSS布局(二) 盒子模型属性

    盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...

  9. CSS入门(二)

    一.组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一次性控制多个选择器 选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...

  10. 从零开始学 Web 之 CSS(二)文本、标签、特性

    大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...

随机推荐

  1. Java中关于String的split(String regex, int limit) 方法

    今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...

  2. 无递归 A星寻路算法

    整理硬盘的时候,发现我早些年写的A星寻路算法.特放上来,待有缘人拿去,无递归噢,性能那是杠杠的. 码上伺候 public class Node { public int X { get; set; } ...

  3. 转:内核中的内存申请:kmalloc、vmalloc、kzalloc、kcalloc、get_free_pages

    在内核模块中申请分配内存需要使用内核中的专用API:kmalloc.vmalloc.kzalloc.kcalloc.get_free_pages;当然,设备驱动程序也不例外;对于提供了MMU功能的处理 ...

  4. 方便john破解linux密码批处理

    Title:方便john破解linux密码批处理 -- 2011-11-23 17:31 自定义文件HASH名和字典名批处理(单一文件): @echo offcolor 0asetlocal enab ...

  5. 负电压基准电路(-2.5V/-5V电压基准)

    运算放大器大多数都是双电源的,这就要求有正负基准电压,除了从稳压源直接输出电压外,很多时候都是一个单电源对整个电路供电,这就要求要把正电压转换成负电压,从而产生正负的电压基准,对双电源运算放大器进行供 ...

  6. sigaction函数的使用

    sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...

  7. HDOJ 1391 Number Steps(打表DP)

    Problem Description Starting from point (0,0) on a plane, we have written all non-negative integers ...

  8. Windows服务器Pyton辅助运维--02.远程重启IIS服务器

    Windows服务器Pyton辅助运维 02.远程重启IIS服务器 开发环境: u  Web服务器: Windows Server 2008 R2 SP1 IIS 7.5 u  运维服务器: Pyth ...

  9. java与数据结构(4)---java实现双向循环链表

    线性表之链式存储结构双向循环链表 双向循环链表:每个结点包含了数据.直接前驱地址指针和直接后驱地址指针,头结点的直接前驱指向尾结点,尾结点的直接后驱指向头结点,头尾相连构成一个可正可反的圆环.可以形象 ...

  10. iBatis查询结果部分为null的解决办法

    今天第一天接触iBatis,没有系统学习过,遇到了一个简单却闹心的错误:用iBatis查询数据库中某个表的多列结果作为一个对象返回时,会出现对象的部分属性为null值得错误.例如,查询用户表中的用户I ...