为了账号安全,请及时绑定邮箱和手机立即绑定
  • 响应式设计 弹性图片实现方法: img {max-width:100%;}
    查看全部
  • 响应式设计需要满足以下三个条件:网站必须建立灵活的网格基础;引用到网站的图片必须是可伸缩的;不同的显示风格,需要在Media Queries上写不同的样式。
    查看全部
  • media queries 媒体类型的引用方法有多种,常见的有:link标签、@import和CSS3新增的@media. 举例: 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>
    查看全部
  • border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 70 repeat
    查看全部
  • 三角形: h1:after{ content:""; width:0; height:0; overflow:hidden; border-left:50px solid transparent; border-right:50px solid transparent; border-top:red 45px solid; }
    查看全部
    0 采集 收起 来源:CSS生成内容

    2018-03-22

  • 弹性盒子(左右用box-flex 中间用width): .content{ display:-webkit-box; } .left{ -webkit-box-flex:3; } .right{ -webkit-box-flex:4 } .mid{ width:500px; } <div class="content"> <div class="left"></div> <div class="mid"></div> <div class="right"></div> </div>
    查看全部
    0 采集 收起 来源:CSS3外轮廓属性

    2018-03-22

  • 自由缩放属性resize 取值both //x和y方向同时改变 horizontal x方向 vertical 垂直
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
  • 四个半径值分别是左上角、右上角、右下角和左下角,顺时针
    查看全部
  • @media screen and (max-width:980px)and (min-width:480px){}
    查看全部
  • background-image:linear-gradient(to left渐变方向,颜色,颜色;可以多个颜色); 0deg = to top =从下到上渐变 90deg = to right =从左到右渐变 180deg = to bottom =从上到下渐变 270deg = to left =从右到左渐变 to top left =右下角到左上角 to top right=左下角到右上角
    查看全部
  • 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。
    查看全部
  • CSS3把很多以前需要使用图片和脚本来实现的效果、甚至动画效果,只需要短短几行代码就能搞定。比如圆角,图片边框,文字阴影和盒阴影,过渡、动画等。 @Font-Face 轻松实现定制字体。 border-radius:圆角边框
    查看全部
    0 采集 收起 来源:CSS3能做什么?

    2014-12-18

  • IE10以后也开始全面支持CSS3; 虽然目前较新版本的浏览器都是不需要前缀的,但为了更好的向前兼容前缀还是少不了的。 chrome&Safari:-webkit; Firefox:-moz; IE(10以上):-ms; opera:-o
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2018-03-22

  • scale()的取值默认的值为1,当值设置为0.01到0.99之间的任何值,作用使一个元素缩小;而任何大于或等于1.01的值,作用是让元素放大。
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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