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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • 曦呦
    text-overflow 与 word-wrap text-overflow:ellipsis|clip overflow:hidden; white-space:nowrap; word-wrap:normal|break-word;
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-05-16

  • 懒羊洋
    @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
    0 采集 收起 来源：CSS3文字与字体 嵌入字体@font-face

    2015-05-16

  • 懒羊洋
    text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
    查看全部
    0 采集 收起 来源：CSS3文字与字体 text-overflow 与 word-wrap

    2015-05-16

  • 懒羊洋
    CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。
    查看全部
    0 采集 收起 来源：CSS3颜色 渐变色彩 

    2015-05-16

  • 懒羊洋
    background-color:rgba(100,120,60,0.5);
    查看全部
    0 采集 收起 来源：CSS3颜色 颜色之RGBA

    2015-05-16

  • n15
    图片中：在宽屏下是3列布局，当屏幕在小于480时是单列显示 当width>480px的时候，就是一个绿色的div里面包含一个橙色的div和一个蓝色的div,因为左边的div设置的宽度是20%，右边的div是%78,还剩下100-20-78=2,即2%，所以中间会出现一小段绿色的背景，是因为父div的背景色还没完全覆盖掉； 当width<=480px的时候，@media (max-width: 480px) {....}这段样式代码就生了，float：none；width:100%; 把float去除了，宽度设置%100，所以橙色div和绿色div就分2行显示了，这时候，父div的绿色背景色就被全部覆盖掉了；
    查看全部
    0 采集 收起 来源：Responsive设计——不同设备的分辨率设置

    2018-03-22

  • Lincimy
    border-radius:50px 0 0 50px;
    查看全部
    0 采集 收起 来源：CSS3边框 圆角效果 border-radius

    2015-05-15

  • aashine
    在web中插入内容，可通过CSS3的 1.伪类“:before”，“:after”和 2.CSS3的伪元素“::before”、“::after” 中的“content”实现。 【注意:不过这个属性对于img和input元素不起作用】 参数： 1.none：不生成任何内容 2.attr：插入标签属性值 3.url：使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） 4.string：插入字符串 例：
    查看全部
    0 采集 收起 来源：CSS生成内容

    2015-05-15

  • aashine
    outline：外轮廓属性 外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 语法：outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit 参数： 1.outline-color：定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 2.outline-style：定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。 3.outline-width：定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。 4.outline-offset：定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 5.inherit：元素继承父元素的outline效果。 例：
    查看全部
    0 采集 收起 来源：CSS3外轮廓属性

    2015-05-15

  • aashine
    resize属性，自由缩放元素的大小。 语法：resize: none | both | horizontal | vertical | inherit 参数： 1.none：用户不能拖动元素修改尺寸大小。 2.both：用户可以拖动元素，同时修改元素的宽度和高度 3.horizontal：用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 4.vertical：用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 5.inherit：继承父元素的resize属性值。 例：
    查看全部
    0 采集 收起 来源：自由缩放属性resize

    2015-05-15

  • aashine
    几种媒体设备尺寸： 1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ } 2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ } 3.640px显屏 @media screen and (max-width : 640px) { /* 样式写在这*/ } 4.iPad横板显屏 @media screen and (max-device-width: 1024px) and (orientation: landscape) { /* 样式写在这 */ } 5.iPad竖板显屏 @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */ } 6.iPhone 和 Smartphones @media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* 样式写在这 */ }
    查看全部
    0 采集 收起 来源：Responsive设计——不同设备的分辨率设置

    2015-05-15

  • aashine
    可视区域meta标签 语法：<meta name=”viewport” content=”” /> 参数：http://img1.sycdn.imooc.com//53660f2c0001190005270386.jpg 浏览Web页面适应屏幕的大小（没看懂）： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 考虑兼容情况（IE6-8不支持CSS3 Media）： media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ​<![endif]>
    查看全部
    0 采集 收起 来源：Responsive设计——meta标签

    2018-03-22

  • aashine
    响应式布局： 1.流体网格：将每个网格格子使用百分比单位来控制网格大小（让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放） 2.弹性图片 2.1img {max-width:100%;}（在IE8中会使图片消失） 2.2 <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" /> 对应的CSS代码： @media (min-device-width:600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-width:800px){ img[data-src-800px] { content:attr(data-src-800px,url); } } 3.媒体查询
    查看全部
    0 采集 收起 来源：Responsive设计（一）

    2018-03-22

  • aashine
    1.“max-width”指媒体类型小于或等于指定的宽度时，样式生效 @media screen and (max-width:480px){ .ads { display:none; } } 2.“min-width”媒体类型大于或等于指定宽度时，样式生效。 @media screen and (min-width:900px){ .wrapper{width: 980px;} } 3.使用关键词"and"将多个媒体特性结合在一起 例（屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”）： @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width（“max-device-width”所指的是设备的实际分辨率） <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 5.关键词“not”是用来排除某种制定的媒体类型 例(样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中): @media not print and (max-width: 1200px){样式代码} 6.only用来指定某种特定的媒体类型 扩展： 1.如果没有明确指定Media Type，那么其默认为all； 2.使用多条语句来将同一个样式应用于不同的媒体类型和媒体特性中(各个媒体设备间用“,”隔开） <linkrel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
    查看全部
    0 采集 收起 来源：Media Queries使用方法

    2018-03-22

  • aashine
    媒体类型引用 1.link方法 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> 2.@import方法 @importurl(reset.css) screen; 3.@media方法 <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style>
    查看全部
    0 采集 收起 来源：media queries——媒体类型（二）

    2018-03-22

首页上一页948949950951952953954下一页尾页

举报

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

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

查看已购买的课程