慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

在你坟前蹭个WiFi

:read-only选择器 “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2016-05-03
在你坟前蹭个WiFi

HTML <input> 标签的 readonly 属性 HTML <input> 标签实例带有两个文本字段和一个提交按钮的 HTML 表单： <form action="form_action.asp" method="get"> Name:<input type="text" name="email" /> Country:<input type="text" name="country" value="China" readonly="readonly" /> <input type="submit" value="Submit" /> </form> 亲自试一试定义和用法 readonly 属性规定输入字段为只读。只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。 readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。 readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。语法 <input readonly="value"> 属性值值描述 readonly 把输入字段设置为只读。

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
侠客岛的含笑

padding属性和content属性层叠background-image属性，层叠background-color属性，这个是存在的，它们四者之间构成了Ｚ轴（垂直屏幕的坐标）多重层叠关系。但是border属性与margin属性、padding属性三者之间应该是平面上的并级关系，并不能构成Ｚ轴的层叠关系。

查看全部

0 采集收起来源：CSS3 盒子模型
2016-05-03
在你坟前蹭个WiFi

HTML 5 <input> placeholder 属性 HTML <input> 标签实例带有 placeholder 文本的搜索字段： <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> 亲自试一试定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。 HTML 4.01 与 HTML 5 之间的差异 placeholder 属性是 HTML5 中的新属性。语法 <input placeholder="text"> 属性值值描述 text 规定用于验证输入字段的模式。

查看全部

0 采集收起来源：CSS3选择器 :read-only选择器
2018-03-22
歪程序猿

多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局，W3C特意给CSS3增加了一个多列布局模块（CSS Multi Column Layout Module）。它主要应用在文本的多列布局方面，这种布局在报纸和杂志上都使用了几十年了，但要在Web页面上实现这样的效果还是有相当大的难度，庆幸的是，CSS3的多列布局可以轻松实现。接下来咱们一起学习多列布局相关的知识。语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2; 到目前为止大部分主流浏览器都对其支持：不过还是要加上每个浏览器的前缀列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则：与border相同. 跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22
qq_殊路同归_0

text-transform: capitalize; //单词首字母变成大写

查看全部

0 采集收起来源：制作3D旋转导航综合练习题
2016-05-03
qq_殊路同归_0

animation-iteration-count:infinite;//动画执行的反复次数为无穷次

查看全部

0 采集收起来源：CSS3中调用动画
2016-05-03
风随依然

在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。

查看全部

0 采集收起来源：CSS3中的变形--原点 transform-origin
2016-05-02
风随依然

以下是在网上查找到的关于translate和position：relative的区别：相同点：两者都是相对于本身移动位置区别： 1、当元素原来已经有position:absolute的时候，这时候你想相对于本身移动，可以使用translate 2、做动画的时候translate更适合，不会引起页面的重排和重绘 3、关于transform类的，可以使用GPU加速，提高浏览器的性能？总之：transform更适用于动画

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-05-02
风随依然

1. top：50%，left：50%，是将色块的左上角定位在了屏幕的中央，但是，整体并不在中央； 2. translate的百分比是根据自身的宽度和高度来定的，translate(-50%,-50%) 配合 top：50%，left：50% 实现了居中

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-05-02
风随依然

注意： scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-05-02
风随依然

注意：Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2016-05-02
风随依然

这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-05-02
歪程序猿

设置动画播放次数 animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1，这意味着动画将从开始到结束只播放一次。 2、如果取值为infinite，动画将会无限次的播放。设置动画播放方向 animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。注意：Chrome或Safari浏览器，需要加入-webkit-前缀！设置动画的播放状态 animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新播放不是从元素动画的开始播放，而是从暂停的那个位置开始播放。

查看全部

0 采集收起来源：CSS3中设置动画播放次数
2018-03-22
歪程序猿

调用动画 animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | IDENT[,none|DENT]*; 1、IDENT是由 @keyframes 创建的动画名，上面已经讲过了（animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致）； 2、none为默认值，当值为 none 时，将没有任何动画效果,这可以用于覆盖任何动画。注意：需要在 Chrome 和 Safari 上面的基础上加上-webkit-前缀，Firefox加上-moz-。设置动画播放时间使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒设置动画播放方式 animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 它和transition中的transition-timing-function一样，具有以下几种变换方式：ease,ease-in,ease-in-out,ease-out,linear和cubic-bezier。设置动画开始播放的时间和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]*

查看全部

0 采集收起来源：CSS3中调用动画
2018-03-22

首页上一页 545 546 547 548 549 550 551 下一页尾页

0/150

提交

取消

开始学习

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

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