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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 深秋色
    element width/height = border + padding + content width / height 在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-01-21

  • 深秋色
    2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-01-21

  • 深秋色
    W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 = height + padding(top&bottom) + border(top&bottom) + margin(top&bottom) element空间宽度＝内容宽度＋内距＋边框＋外距 = width + padding(left&right) + border(left&right) + margin(left&right) 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） = height + padding(top&bottom) + border(top&bottom) element宽度＝内容宽度＋内距＋边框（width为内容宽度） = height + padding(left&right) + border(left&right)
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2018-03-22

  • 一个人流浪1102
    在Responsive布局中，可以毫无保留的丢弃： 第一， 尽量少用无关紧要的div； 第二，不要使用内联元素（inline）； 第三，尽量少用JS或flash； 第四，丢弃没用的绝对定位和浮动样式； 第五，摒弃任何冗余结构和不使用100%设置。 有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？ 第一，使用HTML5 Doctype和相关指南； 第二，重置好你的样式（reset.css）； 第三，一个简单的有语义的核心布局； 第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。 使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。 说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。
    查看全部
    0 采集 收起 来源：Responsive布局技巧

    2015-01-21

  • 一个人流浪1102
    link方法 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; @importurl(print.css) print; 在<head>中的<style>标签中引入媒体类型方法。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法 @media是CSS3中新引进的一个特性，被称为媒体查询。在页面中也可以通过这个属性来引入媒体类型。@media引入媒体类型和@import有点类似也具有两方式。 （1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>
    查看全部
    0 采集 收起 来源：media queries——媒体类型（二）

    2018-03-22

  • 真情见我
    6个属性的意思的：第一个宽度比例1就是原大小，第二个是上下倾斜1就是2倍，2就是3倍，第三个是左右倾斜，数字和第二个一样的意思，第四个是高度比例1就是原大小，第五个是X方向的像素位移，X方向就是左右，第六个是Y方向的像素位移，X方向就是上下
    查看全部
    0 采集 收起 来源：CSS3中的变形--矩阵 matrix()

    2015-01-21

  • Sun_MT
    cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 即不是恰好填充 等价于300px 不等于300px 140px
    查看全部
    0 采集 收起 来源：CSS3背景 background-size

    2015-01-21

  • penny_Lu
    /*使用伪元素制作导航列表项分隔线*/ .nav li:before{content:""; position:absolute; top:14px; height:25px;left:-1px; width:1px; background-image:linear-gradient(to bottom,#f65f57,#Ffffff,#f65f57); } /*删除第一项和最后一项导航分隔线*/ .nav li:first-child:before {background:none;}
    查看全部
    0 采集 收起 来源：CSS3背景 制作导航菜单综合练习题

    2018-03-22

  • yangshuyun
    选择器 以前我们通常用class、 ID 或 tagname 来选择HTML元素，CSS3的选择器强大的难以置信。它们可以减少在标签中的class和ID的数量更方便的维护样式表、更好的实现结构与表现的分离。 圆角效果 以前做圆角通常使用背景图片，或繁琐的元素拼凑，现在很简单了 border-radius 帮你轻松搞定。 块阴影与文字阴影 可以对任意DIV和文字增加投影效果。 色彩 CSS3支持更多的颜色和更广泛的颜色定义。新颜色CSS3支持HSL ， CMYK ，HSLA and RGBA。 渐变效果 以前只能用Photoshop做出的图片渐变效果，现在可以用CCS写出来了。IE中的滤镜也可以实现。 个性化字体 网页上的字体太单一？使用@Font-Face 轻松实现定制字体。 多背景图 一个元素上添加多层背景图片。 边框背景图 边框应用背景图片。
    查看全部
    0 采集 收起 来源：CSS3能做什么？

    2015-01-21

  • 聼雨
    这一小节我们来说一下线性渐变： 参数： 第一个参数:指定渐变方向，可以用“角度”的关键词或“英文”来表示： （单击图片可放大） 第一个参数省略时，默认为“180deg”，等同于“to bottom”。 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-01-21

  • 聼雨
    body{background:url(http://static.mukewang.com/static/img/logo_index.png)} 此处 background:url 放在Body处 整体都有背景 背景图片放的位置不同 背景的大小是有区别的
    查看全部
    0 采集 收起 来源：CSS3颜色 颜色之RGBA

    2015-01-21

  • 聼雨
    为边框应用图片：语法： border-image:url(border.png) 70 70 70 70 repeat; 图片延伸方式：repeat(重复) round（平铺）stretch（拉伸）
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-01-21

  • 聼雨
    图片路径
    查看全部
    0 采集 收起 来源：CSS3边框 为边框应用图片 border-image

    2015-01-21

  • yangshuyun
    目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。 前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera
    查看全部
    0 采集 收起 来源：什么是CSS3？

    2015-01-21

  • Leega0
    Safari和chrome现阶段还要加－webkit前缀才能执行部分css3高级属性
    查看全部
    0 采集 收起 来源：CSS3 Keyframes介绍

    2015-01-20

首页上一页1136113711381139114011411142下一页尾页

举报

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

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

查看已购买的课程