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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
  • 完成了
    查看全部
  • 未完成,无法消除第一个导航竖线
    查看全部
  • 1、制作导航圆角 提示:使用border-radius实现圆角 2、制作导航立体风格 提示:使用box-shadow实现立体风格 3、制作导航分隔线 提示:使用渐变与伪元素制作 4、删除第一个和最后一个导航分隔线 提示:使用伪元素删除第一个和最后一个分隔线
    查看全部
  • box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
    查看全部
  • background-clip:content-box,border-box(默认),padding-box;对背景图片做适当的剪裁
    查看全部
  • background-origin:padding-box,border-box,content-box;设置背景图片的原始位置
    查看全部
  • 文本阴影:text-shadow:x y 模糊程度 颜色
    查看全部
  • text-overflow:ellipsis; 文本溢出时显示省略号 overflow:hidden; 且溢出部分隐藏 white-space:nowrap;强制文本在一行内显示
    查看全部
  • 为了更好的被其他浏览器支持,加上前缀
    查看全部
    0 采集 收起 来源:什么是CSS3?

    2016-03-01

  • @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }
    查看全部
  • odd为奇数,even为偶数,2n是偶数,2n+1、2n-1是奇数
    查看全部
  • 如何将flex项目移动到顶部,取决于主轴的方向。如果它是垂直的方向通过align-items设置;如果它是水平的方向通过justify-content设置。
    查看全部
  • .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; }
    查看全部
  • Flexbox布局功能主要具有以下几点: 第一,屏幕和浏览器窗口大小发生改变也可以灵活调整布局; 第二,可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间(伸缩容器额外空间),从而调整伸缩项目的大小; 第三,可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间; 第四,可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围; 第五,可以控制元素在页面上的布局方向; 第六,可以按照不同于文档对象模型(DOM)所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
  • 属性值 属性值说明 content-box 默认值,其让元素维持W3C的标准盒模型,也就是说元素的宽度和高度(width/height)等于元素边框宽度(border)加上元素内距(padding)加上元素内容宽度或高度(content width/ height),也就是element width/height = border + padding + content width / height border-box 重新定义CSS2.1中盒模型组成的模式,让元素维持IE传统的盒模型(IE6以下版本和IE6-7怪异模式),也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知,这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度(此处的内容宽度或高度=盒子的宽度或高度—边框—内距)。 inherit 使元素继承父元素的盒模型模式
    查看全部
    0 采集 收起 来源:CSS3 盒子模型

    2016-03-01

举报

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

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