慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

好大棵葱吖

:root选择器就是html :root{} === html{}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root
2015-05-07
艾步哩吾_ihuge

http://blog.csdn.net/henren555/article/details/9699449 6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下

查看全部

0 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-05-07
好大棵葱吖

element[att^="val"] 以val开头的的任何字符 element[att$="val"] val结尾的任何字符 element[att*="val"] 任意位置包含了val的属性值

查看全部

1 采集收起来源：CSS3选择器属性选择器
2018-03-22
BiLaL

伸缩布局（二） 7.水平垂直居中在Flexbox容器中制作水平垂直居中是微不足道的。设置justify-content或者align-items为center。另外根据主轴的方向设置flex-direction为row或column。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } 8.Flex项目实现自动伸缩您可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-05-07
BiLaL

.flexcontainer{ display: -webkit-flex; -webkit-flex-direction: column; } flex-direction: column（独占一行） | row（默认一行显示）; justify-content: flex-start | flex-end | center; flex-direction值为row用这个 align-items: flex-start | flex-end |center; flex-direction值为column用这个如果flex-direction值为row，即设置了justify-content：center，又设置了align-items: center，效果为水平垂直都居中自动伸缩 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2015-05-07
BiLaL

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit content-box:默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height border-box:重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）。 inherit:使元素继承父元素的盒模型模式其中最为关键的是box-sizing中content-box和border-box 在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成

查看全部

0 采集收起来源：CSS3 盒子模型
2015-05-07
BiLaL

column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-05-07
BiLaL

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明：属性值属性值说明 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色) 例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为： column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
BiLaL

column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明属性值属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。例如：将内容分三列显列，列与列之间的间距为2em，实现代码为： column-count: 3; column-gap: 2em;

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
BiLaL

column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明：属性值属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。例如：将列分成四列显示，代码如下： column-count:4; 任务

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2018-03-22
BiLaL

column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示； column-width: auto | <length> 取值说明属性值说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length> 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2018-03-22
BiLaL

为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。参数参数说明 <column-width> 主要用来定义多列中每列的宽度 <column-count> 主要用来定义多列中的列数举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22
BiLaL

bilal...

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-05-07
BiLaL

perspective:透视方式，也就是近大远小的显示方式。镜头方向只能是平行Z轴向屏幕内，也就是从屏幕正前方向里看。可以调整镜头与平面位置： a) perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2015-05-07
BiLaL

animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 forwards 表示动画在结束后继续应用最后的关键帧的位置 backwards 会在向元素应用动画样式时迅速应用动画的初始帧 both 元素动画同时具有forwards和backwards效果在默认情况之下，动画不会影响它的关键帧之外的属性，使用animation-fill-mode属性可以修改动画的默认行为。简单的说就是告诉动画在第一关键帧上等待动画开始，或者在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。或者同时具有这两个效果。例如：让动画停在最一帧处。代码如下： animation-fill-mode:forwards;

查看全部

0 采集收起来源：CSS3中设置动画时间外属性
2015-05-07

首页上一页 960 961 962 963 964 965 966 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果