CSS
文章平均质量分 53
xuxianmei
这个作者很懒,什么都没留下…
展开
-
30、实例 应用transform属性实现缩放
应用transform属性实现缩放.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{ background:url(ima原创 2014-07-04 22:10:34 · 822 阅读 · 0 评论 -
31、实例 应用transform属性实现倾斜
应用transform属性实现倾斜.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{ background:url(ima原创 2014-07-04 22:11:35 · 707 阅读 · 0 评论 -
32、实例 应用transform属性实现旋转
应用transform属性实现旋转.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{ background:url(ima原创 2014-07-04 22:12:19 · 546 阅读 · 0 评论 -
23、实例 盒模型相关
盒模型相关div{ margin-left:15px; margin-top:15px; width:400px; height:30px; background-color:#3FF;}div.block{ display:block;/*独占一行,可以设置宽和高*/}div.inlineblock{ display:inline-block;/*不独占一行,可以设原创 2014-07-04 21:53:39 · 515 阅读 · 0 评论 -
20、实例 使用盒模型布局之自适应窗口的弹性盒布局
使用盒模型布局之自适应窗口的弹性盒布局/*主要属性:box-flex;*/body{ margin:0px; }div#container{ display:box; display:-moz-box; display:-webkit-box; text-align:left;}#left{ border:1px solid #aaf; width:280px;原创 2014-07-04 21:48:49 · 758 阅读 · 0 评论 -
35、实例 应用transition-property属性实现过渡之指定允许过渡的属性
应用transition-property属性实现过渡之指定允许过渡的属性.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{原创 2014-07-06 15:40:16 · 782 阅读 · 0 评论 -
22、实例 盒组成模式box-sizing
盒组成模式box-sizingdiv{ width:235px; height:209px; padding:10px; margin:10px; border:5px solid #333;}#wall1{ box-sizing:content-box;}#wall2{ box-sizing:border-box;}原创 2014-07-04 21:52:27 · 691 阅读 · 0 评论 -
25、实例 使用inline-block盒设计导航栏
使用inline-block盒设计导航栏body > div/*第一个body下的所有div元素*/{ text-align:center; margin:auto; }div > div { display:inline-block; border:1px solid black;}a{ text-decoration:none; /*设置为block类型,允许设置高原创 2014-07-04 21:55:06 · 1033 阅读 · 0 评论 -
26、实例 resize之二
resize*{ margin:0px; padding:0px;}div{ width:235px; height:209px; padding:10px; margin:10px; border:2px solid #333; box-sizing:content-box;}原创 2014-07-04 22:00:37 · 444 阅读 · 0 评论 -
29、实例 应用transform属性实现平移
应用transform属性实现平移.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{ -moz-transform:tra原创 2014-07-04 22:08:38 · 1057 阅读 · 0 评论 -
21、实例 使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序
使用盒模型布局之自适应窗口的弹性盒布局+改变显示顺序/*主要属性:box-flex;-moz-box-ordinal-group-webkit-box-ordinal-group*/body{ margin:0px; }div#container{ display:box; display:-moz-box; display:-webki原创 2014-07-04 21:49:53 · 803 阅读 · 0 评论 -
28、实例 为盒设置阴影和倒影
为盒设置阴影和倒影盒子阴影原创 2014-07-04 22:06:42 · 534 阅读 · 0 评论 -
33、实例 应用transition-property属性实现过度
应用transition-property属性实现过度.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{ backgrou原创 2014-07-04 22:13:12 · 528 阅读 · 0 评论 -
34、实例 应用transition-property属性实现过渡之指定允许过渡的属性
应用transition-property属性实现过渡之指定允许过渡的属性.preview{ background:url(images/style0.gif) no-repeat; position:absolute; top:0px; left:0px; width:240px; height:210px; border:1px #000000 dashed;}#xy{原创 2014-07-04 22:12:54 · 756 阅读 · 0 评论 -
18、实例 CSS3之分栏布局
CSS3之分栏布局div#content{ column-count:2; -moz-column-count:2; -o-column-count:2; -webkit-column-count:2; border:1px solid black; border-radius:15px; }Android的成功离不开Google的品牌效应,Google在第三方厂商原创 2014-07-04 21:47:26 · 676 阅读 · 0 评论 -
27、实例 inline-table盒模型
inline-table盒模型/*table属性block盒类型 ,独占一行,两边不允许出现任何内容*/td{ border:1px solid black;}table{ width:560px; border-collapse:collapse; display:inline-block; vertical-align:top;}我是前面的内容PHPPH原创 2014-07-04 22:06:56 · 1420 阅读 · 0 评论 -
24、实例 resize
resizediv{ width:235px; height:209px; padding:10px; margin:10px; border:2px solid #333;}#wall1{ box-sizing:content-box;}#wall2{ box-sizing:border-box; resize:both; overflow:hidden;原创 2014-07-04 21:54:20 · 411 阅读 · 0 评论 -
17、实例 背景相关
背景相关body{ background-image:url(images/android.jpg); background-position:center;/*可以使用值代替如:100px 100px*/ background-repeat:no-repeat; background-attachment:fixed;}div{ background-repeat:no-r原创 2014-07-04 21:47:37 · 322 阅读 · 0 评论 -
19、实例 使用盒模型实现多栏布局
使用盒模型实现多栏布局body{ margin:0px; }div#container{ display:box; display:-moz-box; display:-webkit-box; text-align:left;}#container>div{ border:1px solid #aaf; /*设置HTML组件的WIDTH属性包括边框*/ box-si原创 2014-07-04 21:49:21 · 685 阅读 · 0 评论 -
4、盒模型及分栏
一、盒的类型1、盒的基本类型在CSS中,使用display属性来定义盒的类型。总体上来说,CSS中的盒分为block类型与inline类型block类型:这种盒模型的组件默认占据一行,允许通过CSS设置高度、宽度、如div、inline类型:这种盒模型的组件不会占据一行,即使通过CSS设置高度、宽度,也不会起作用,如span、a元素。注:可以使用display来切换盒模原创 2014-07-04 09:30:24 · 536 阅读 · 0 评论 -
9、实例CSS3新增加结构性伪类选择器
明日科技数字出版的倡导者编程词典程序员的私人专家金缕衣劝君莫惜金缕衣劝君惜取少年时花开堪折直须折莫待无花空折枝原创 2014-07-04 15:43:12 · 760 阅读 · 0 评论 -
10、实例分别对序号第奇数个和偶数个设置
分别对序号第奇数个和偶数个设置div{ margin-left:20px; border:2px; border-radius:20%;} :root { background-color:#0FF; } body { background-color:#0FF;原创 2014-07-04 15:45:02 · 599 阅读 · 0 评论 -
CSS小结
1、CSS语法:选择器:html中的元素或者 div 或者 id 或者 class 或者 属性,或者联合。CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1; declaration2; ... declarationN }选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性(原创 2014-07-04 09:20:19 · 513 阅读 · 0 评论 -
1、CSS3新增的选择器
CSS3新特性:1、功能强大的选择器2、半透明效果的实现3、多栏布局4、多背景图5、文字阴影6、开放字体类型7、边框圆角8、边框图片9、盒子阴影(DIV 或者其它任何控件)、文本阴影10、媒体查询(允许在不改变内容的情况下,在样式表中选择一种页面的布局以精确地适应不同的设备,从而改善用户体验)一、主流浏览器对CSS3的支持各主流的浏览器并不是原创 2014-07-04 09:27:24 · 738 阅读 · 0 评论 -
2、CSS3中字体与文本的相关属性
1、给文字添加阴影-text-shadow属性该属性的值如下:color:指定颜色length:指定阴影的水平和垂直延伸距离opacity:指定模糊效果 不可为负值原创 2014-07-04 09:29:18 · 511 阅读 · 0 评论 -
5、布局的相关属性
CSS提供了布局的如下相关属性1、float:该属性控制目标HTML组件是否浮动以及如何浮动。该属性支持left right两个属性值。注:浮动组件将会漂浮紧紧跟随它有前一个组件,直到遇到边框、内补丁(padding)、外补丁(margin)或另一个块组件为止。2、clear:该属性用于设置HTML组件的左侧、右侧是否允许出现浮动对象(清除)。支持 none left ri原创 2014-07-04 09:29:46 · 459 阅读 · 0 评论 -
3、背景、边框和边框的相关属性
1、固定背景图片,不跟随滚动条滚动background-attachment:fixed;2、指定背景的显示范围background-clip:border-box | padding-box | content-box | text分别是:从border区域(不含border)开始向外裁剪背景从padding区域(不含padding)开始向外裁剪背景从content区域开原创 2014-07-04 09:28:44 · 734 阅读 · 0 评论 -
6、尺寸和定位的相关属性
一、CSS3新增的与尺寸相关的属性新增了box-sizing和resize两个与尺寸相关的属性。1、box-sizing用于设置盒模型组成模式:content-box border-box值content-box表示padding和border不被包含在定义的width 和height内,对象的实际宽度=width+padding+border值border-box原创 2014-07-04 15:39:36 · 535 阅读 · 0 评论 -
7、CSS3的多栏布局
1、前面介绍过的float属性或者通过display:inline-box 来实现多栏布局,但是这种方式,如果高不一样,无法实现底部对齐。CSS3专门提供了多栏布局的功能。采用的属性:column-count 属性来实现分栏的实例为了实现分栏效果,CSS3增加了大量属性。columns:通过该属性可同时指定栏目宽度、栏目数两个属性值。相当于column-width column原创 2014-07-04 15:39:55 · 885 阅读 · 0 评论 -
8、CSS 3的动画设计
动画的基本原理:改变属性值(任何属性都可以),同时给一个持续时间,每一个小时间段改变一点,直到持续时间结束,属性修改全部完成。这就形成了动态效果。一、CSS 3 新增了一些用来实现动画效果的属性。可以实现以前通常需要使用javascript或者flash才能实现的效果。比如:对HTML元素进行平稳 缩放 旋转 倾斜 以及添加过渡效果。并且可以将这些组合成动画效果来进行展示1原创 2014-07-04 15:40:25 · 625 阅读 · 0 评论 -
11、实例 针对同类型的元素进行计数,并区别奇与偶
针对同类型的元素进行计数,并区别奇与偶div{ margin-left:20px; border:2px; border-radius:20%;} body { background-color:#666; }h2:nth-of-type(odd){ background-color:yellow;}h2:原创 2014-07-04 15:48:48 · 495 阅读 · 0 评论 -
12、实例 循环使用样式
循环使用样式 div{ margin-left:20px; border:2px; border-radius:20%;} body { background-color:#666; }li:nth-child(3n+1)/* n=Z* */{ background-color:#00F;}li:only原创 2014-07-04 15:49:12 · 491 阅读 · 0 评论 -
13、UI元素状态伪类选择器
UI元素状态伪类选择器input[type="text"]:hover{ background-color:red; }input[type="text"]:focus{ background-color:skyblue; }input[type="text"]:active{ background-color:yellow;} li input[type="text"原创 2014-07-04 15:52:09 · 644 阅读 · 0 评论 -
14、实例 通用兄弟元素选择器
通用兄弟元素选择器div~p{ background-color:#0FF;}弃我去者,昨日之日不可留乱我心者,今日之日多烦忧长风万里送秋雁,对此可以酣高楼蓬莱文章建安骨,中间小谢又清发俱怀逸兴壮思飞,欲上表天揽明月抽刀断水水更流,举杯消愁愁更愁人生在世不称意,明朝散发弄扁舟原创 2014-07-04 15:57:06 · 763 阅读 · 0 评论 -
15、实例 通用兄弟元素选择器
通用兄弟元素选择器div~p{ background-color:#0FF;}弃我去者,昨日之日不可留乱我心者,今日之日多烦忧长风万里送秋雁,对此可以酣高楼蓬莱文章建安骨,中间小谢又清发俱怀逸兴壮思飞,欲上表天揽明月抽刀断水水更流,举杯消愁愁更愁人生在世不称意,明朝散发弄扁舟原创 2014-07-04 21:44:49 · 516 阅读 · 0 评论 -
16、实例 文字阴影
文字阴影 span { display:block; padding:8px; font-size:xx-large;}普通拉伸,只有一个阴影天津理工天津理工天津理工天津理工天津理工立体字<p style="text-align:center;padding:24px;margin:0px; font-family:Georgi原创 2014-07-04 21:45:47 · 506 阅读 · 0 评论