CSS应用二
- 样式中的顺序问题。
如: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;
- 样式中的缩写。
我们在样式中经常看到这样的写法:
margin:0 3px;当top和bottom的数值一样,left和right一样时,可以这样简写。
Margin: 1px 3px 2px;这样的写法为,top的值为1px,bottom的值为2px;left与right的只为:3px;
- 关于居中显示
- align与 text-align属性,在table中可以使用align来为ta设定居中样式。Div中文字居中使用text-align:center来居中。
- width与margin配合定义居中。如:width=”200px”;margin:0 auto;
- 定位居中,position:absolute;left:1px;right:1px;margin:0 auto;
- 关于fixed的使用
Position的属性值。生成绝对定位的元素,相对于浏览器窗口进行定位。通过left,right,bottom,left来控制位置。一旦设定位置,就会固定在浏览器对应的位置,不会跟随浏览器内容的滚动而滚动。多应用在弹出窗口,提示框等条件下。如:position:fixed;Left20px;top:30px;
- 动画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应用二的更多相关文章
- 前端总结·基础篇·CSS(二)视觉
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...
- css入门二-常用样式
css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...
- 基本CSS布局二
基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...
- 前端之CSS(二)
一.盒子模型 说到盒子模型,我们不得不提一下,W3C标准和IE浏览器是有区别的,我昨天就在写抽屉作业的时候踩过坑,建议用谷歌浏览器,并推荐一篇博文:http://www.osmn00.com/tran ...
- 如何在普清的屏上调试CSS样式二倍图背景
背景: 最近就遇到一个同事的项目,还是像平常一样小心切图,认真对像素. 一切测试都没有问题,顺利上线. 但是,上线之后,产品经理跑过来说,有BUG. BUG描述:(不认为是BUG) 前端页面上的图标是 ...
- 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 ...
- 数往知来 CSS<十二>
div+css基础 一.外部样式<!--外部样式可以使网页与样式分离,分工处理 1.写网页,主要提供内容,一般都会有固定的结构,具有id等属性的标签包括特定的内容 2.根据结构写样式另存为css ...
- CSS布局(二) 盒子模型属性
盒子模型的属性 宽高width/height 在CSS中,可以对任何块级元素设置显式高度. 如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样: 如果指定高度小于 ...
- CSS入门(二)
一.组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一次性控制多个选择器 选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...
- 从零开始学 Web 之 CSS(二)文本、标签、特性
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
随机推荐
- Java中关于String的split(String regex, int limit) 方法
今天在对一个String对象进行拆分的时候,总是无法到达预计的结果.呈现数据的时候出现异常,后来debug之后才发现,错误出在String spilt上,于是开始好好研究下这东西,开始对api里的sp ...
- 无递归 A星寻路算法
整理硬盘的时候,发现我早些年写的A星寻路算法.特放上来,待有缘人拿去,无递归噢,性能那是杠杠的. 码上伺候 public class Node { public int X { get; set; } ...
- 转:内核中的内存申请:kmalloc、vmalloc、kzalloc、kcalloc、get_free_pages
在内核模块中申请分配内存需要使用内核中的专用API:kmalloc.vmalloc.kzalloc.kcalloc.get_free_pages;当然,设备驱动程序也不例外;对于提供了MMU功能的处理 ...
- 方便john破解linux密码批处理
Title:方便john破解linux密码批处理 -- 2011-11-23 17:31 自定义文件HASH名和字典名批处理(单一文件): @echo offcolor 0asetlocal enab ...
- 负电压基准电路(-2.5V/-5V电压基准)
运算放大器大多数都是双电源的,这就要求有正负基准电压,除了从稳压源直接输出电压外,很多时候都是一个单电源对整个电路供电,这就要求要把正电压转换成负电压,从而产生正负的电压基准,对双电源运算放大器进行供 ...
- sigaction函数的使用
sigaction函数的功能是检查或修改与指定信号相关联的处理动作(可同时两种操作). 他是POSIX的信号接口,而signal()是标准C的信号接口(如果程序必须在非POSIX系统上运行,那么就应该 ...
- HDOJ 1391 Number Steps(打表DP)
Problem Description Starting from point (0,0) on a plane, we have written all non-negative integers ...
- Windows服务器Pyton辅助运维--02.远程重启IIS服务器
Windows服务器Pyton辅助运维 02.远程重启IIS服务器 开发环境: u Web服务器: Windows Server 2008 R2 SP1 IIS 7.5 u 运维服务器: Pyth ...
- java与数据结构(4)---java实现双向循环链表
线性表之链式存储结构双向循环链表 双向循环链表:每个结点包含了数据.直接前驱地址指针和直接后驱地址指针,头结点的直接前驱指向尾结点,尾结点的直接后驱指向头结点,头尾相连构成一个可正可反的圆环.可以形象 ...
- iBatis查询结果部分为null的解决办法
今天第一天接触iBatis,没有系统学习过,遇到了一个简单却闹心的错误:用iBatis查询数据库中某个表的多列结果作为一个对象返回时,会出现对象的部分属性为null值得错误.例如,查询用户表中的用户I ...