为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
十天精通CSS3_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 十天精通CSS3

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 天羽蔚灵
    跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-10-10

  • 天羽蔚灵
    列表边框column-rule 和border属性差不多
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2015-10-10

  • 天羽蔚灵
    列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length>
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

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

    2018-03-22

  • noodleko
    :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 示例演示： 通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; } “:root”选择器等同于<html>元素，简单点说： :root{background:orange} html {background:orange;} 得到的效果等同。 建议使用:root方法。
    查看全部
    0 采集 收起 来源：CSS3 结构性伪类选择器—root

    2018-03-22

  • noodleko
    E[attr^="val"] 匹配E元素，且属性attr的值是以val开头 E[attr$="val"] 匹配E元素，且属性attr的值是以val结尾 E[attr*="val"] 匹配E元素，且属性attr的值包含val 实例展示： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; } a[title*=more]{ background: blue; color: #fff; }
    查看全部
    0 采集 收起 来源：CSS3选择器 属性选择器

    2018-03-22

  • noodleko
    “伪元素”，顾名思义。它创建了一个虚假的元素，并插入到目标元素内容之前或之后。 第二，在内容模块中提到，伪元素如果没有设置“content”属性，伪元素是无用的。 注入的内容将是有关联的目标元素的子元素，但它会被置于这个元素的任何内容的“前”或“后”。
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2015-10-10

  • noodleko
    background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
    查看全部
    0 采集 收起 来源：CSS3背景 background-size

    2018-03-22

  • noodleko
    用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
    查看全部
    0 采集 收起 来源：CSS3背景 background-clip

    2015-10-10

  • noodleko
    background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
    查看全部
    0 采集 收起 来源：CSS3背景 background-origin

    2015-10-10

  • noodleko
    为字体添加阴影 text-shadow: 2px 2px 0 red;
    查看全部
    0 采集 收起 来源：CSS3文字与字体 文本阴影text-shadow

    2015-10-10

  • noodleko
    显示服务端字体，用户没有也没关系 @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。 比如： p { font-size :12px; font-family : "My Font"; /*必须项，设置@font-face中font-family同样的值*/ }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2018-03-22

  • noodleko
    text-overflow:clip（剪切）/ ellipsis; (省略号) overflow:hidden; white-space:nowrap; word-wrap:normal（表示控制连续文本换行）/ break-word（标示内容将在边界内换行）
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-10-10

  • noodleko
    background-image:linear-gradient(to top left,#ccc,#fff);(到左上角
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-10-10

  • 广藿香Patchouli
    :disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性
    查看全部
    0 采集 收起 来源：CSS3选择器 :disabled选择器

    2015-10-10

首页上一页740741742743744745746下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。
老师告诉你能学到什么？
1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程