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

十天精通CSS3

大漠 Web前端工程师
难度初级
时长 5小时 0分
最热 最新
  • jackie_3108
    设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。 主要断点:min-width:320px 480px 640px 768px 896px 1024px
    查看全部
    0 采集 收起 来源：Responsive设计（二）

    2015-08-16

  • jackie_3108
    @media 媒体类型and （媒体特性）{你的样式}
    查看全部
    0 采集 收起 来源：Media Queries使用方法

    2015-08-16

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

    2018-03-22

  • jackie_3108
    媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。W3C总共列出了10种媒体类型。 值 设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端 ------------------------------------------------ 其中Screen、All和Print为最常见的三种媒体类型。
    查看全部
    0 采集 收起 来源：Media Queries——媒体类型（一）

    2015-08-16

  • jackie_3108
    Media Queries分为两个重要部分 第一个是媒体类型， 第二个是媒体特性。
    查看全部
    0 采集 收起 来源：Media Queries——媒体类型（一）

    2015-08-16

  • jackie_3108
    display：flex 指定元素为伸缩布局 flex-direction:row（布局成一行）/column（布局成一列） align-items:flex-start/center/flex-end(设定垂直的,居上/居中/局下) justify-content:flex-start/center/flex-end(水平的居左/居中/居右)
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（二）

    2015-08-16

  • jackie_3108
    Flexbox布局常用于设计比较复杂的页面，可以轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减少了依赖于浮动布局实现元素位置的定义以及重置元素的大小。 Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点： 第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局； 第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小； 第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间； 第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围； 第五，可以控制元素在页面上的布局方向； 第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。
    查看全部
    0 采集 收起 来源：CSS3 伸缩布局（一）

    2015-08-16

  • jackie_3108
    在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit 取值说明 属性值 属性值说明 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 盒子模型

    2015-08-16

  • jackie_3108
    box-sizing： 在CSS中盒模型被分为两种，第一种是w3c的标准模型，另一种是IE的传统模型，它们相同之处都是对元素计算尺寸的模型，具体说不是对元素的width、height、padding和border以及元素实际尺寸的计算关系，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示： W3C标准盒模型 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋内距＋边框＋外距 element空间宽度＝内容宽度＋内距＋边框＋外距 内盒尺寸计算（元素大小） element高度＝内容高度＋内距＋边框（height为内容高度） element宽度＝内容宽度＋内距＋边框（width为内容宽度） 2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”） 外盒尺寸计算（元素空间尺寸） element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距） element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距） 内盒尺寸计算（元素大小） element高度＝内容高度（height包含了元素内容宽度、边框、内距） element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
    查看全部
    0 采集 收起 来源：CSS3 盒子模型

    2015-08-16

  • jackie_3108
    跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。column-width、column-count等属性能让一元素分成多列，不管里面元素如何排放顺序，他们都是从左向右的放置内容，但有时我们需要基中一段内容或一个标题不进行分列，也就是横跨所有列，此时column-span就可以轻松实现，此属性的语法如下。 column-span: none | all 取值说明 属性值 属性值说明 none 此值为column-span的默认值，表示不跨越任何列。 all 这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上
    查看全部
    0 采集 收起 来源：CSS3 跨列设置column-span

    2015-08-15

  • jackie_3108
    列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。 语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color> 取值说明： 属性值 属性值说明 column-rule-width 类似于border-width属性，主要用来定义列边框的宽度，其默认值为“medium”，column-rule-width属性接受任意浮点数，但不接收负值。但也像border-width属性一样，可以使用关键词：medium、thick和thin。 column-rule-style 类似于border-style属性，主要用来定义列边框样式，其默认值为“none”。column-rule-style属性值与border-style属值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。 column-rule-color 类似于border-color属性，主要用来定义列边框颜色，其默认值为前景色color的值，使用时相当于border-color。column-rule-color接受所有的颜色。如果不希望显示颜色，也可以将其设置为transparent(透明色)
    查看全部
    0 采集 收起 来源：CSS3 列表边框column-rule

    2018-03-22

  • jackie_3108
    列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> 取值说明 属性值 属性值说明 normal 默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length> 此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。
    查看全部
    0 采集 收起 来源：CSS3 列间距column-gap

    2018-03-22

  • jackie_3108
    多列布局——column-count column-count属性主要用来给元素指定想要的列数和允许的最大列数。其语法规则： column-count：auto | <integer> 取值说明： 属性值 属性值说明 auto 此值为column-count的默认值，表示元素只有一列，其主要依靠浏览器计算自动设置。 <integer> 此值为正整数值，主要用来定义元素的列数，取值为大于0的整数，负值无效。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-count

    2018-03-22

  • jackie_3108
    多列布局——column-width column-width的使用和CSS中的width属性一样，不过不同的是，column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。其基本语法如下所示 ； column-width: auto | <length> 取值说明 属性值 说明 auto 如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length> 使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。
    查看全部
    0 采集 收起 来源：CSS3 多列布局——column-width

    2018-03-22

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

    2018-03-22

首页上一页811812813814815816817下一页尾页

举报

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

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

查看已购买的课程