慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

Wendy_22

css3，需要掌握知识点 1、选择器 2、圆角效果 3、块阴影和文字阴影 4、渐变效果(线性渐变(linear)和径向渐变(radial)) 5、@Font-Face 6、多背景图 7、边框背景图 8、transform 9、多栏布局 10、媒体查询

查看全部

0 采集收起来源：CSS3能做什么？
2017-04-03
斜杠男人

CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。 content配合CSS的伪类或者伪元素，一般可以做以下四件事情： none不生成任何内容 attr插入标签属性值 url使用指定的绝对或相对地址插入一个外部资源（图像，声频，视频或浏览器支持的其他任何资源） string插入字符串

查看全部

0 采集收起来源：CSS生成内容
2017-04-03
斜杠男人

外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline属性的基本语法如下： outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit outline-color定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 outline-style定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。 outline-width定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。 outline-offset定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 inherit元素继承父元素的outline效果。

查看全部

0 采集收起来源：CSS3外轮廓属性
2017-04-03
斜杠男人

自由缩放属性resize resize属性允许用户通过拖动的方式来修改元素的尺寸，来改变元素的大小。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明： none用户不能拖动元素修改尺寸大小。 both用户可以拖动元素，同时修改元素的宽度和高度 horizontal用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit继承父元素的resize属性值。

查看全部

0 采集收起来源：自由缩放属性resize
2017-04-03
斜杠男人

媒体类型的引用方法常见的有：link标签、@import和CSS3新增的@media： link方法 link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。如下所示。 <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> @import方法 @import可以引用样式文件，同样也可以用来引用媒体类型。@import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件；另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持,如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 @importurl(reset.css) screen; 在<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>中引用。

查看全部

0 采集收起来源：media queries——媒体类型（二）
2018-03-22
斜杠男人

Media Queries能在不同的条件下使用不同的样式，使页面在不同在终端设备下达到不同的渲染效果。 Media Queries的使用方法如下: @media 媒体类型 and （媒体特性）{你的样式} 注意：使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。备注:“max-device-width”所指的是设备的实际分辨率，也就是指可视面积分辨率。 not关键词使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作 only关键词 only用来指定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。CSS3 Media Queries得到了众多浏览器支持，除IE6-8浏览器不支持之外，在所有现代浏览器中都可以完美支持。Media Queries不用添加前缀。

查看全部

0 采集收起来源：Media Queries使用方法
2017-04-23
斜杠男人

Media Queries是CSS3新增加的一个模块功能，其最大的特色就是通过CSS3来查询媒体，然后调用对应的样式。其实这个功能在CSS2.1中就有出现过，只不过那个时候此功能并不强大，我们最常见的就是给打印设备添加打印样式. 在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2017-04-23
斜杠男人

box-sizing属性，定义盒模型的尺寸解析方式，其语法规则如下： box-sizing: content-box | border-box | inherit content-box默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height） border-box重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度（包含了元素的border、padding、内容的宽度或高度。 inherit使元素继承父元素的盒模型模式

查看全部

0 采集收起来源：CSS3 盒子模型
2017-04-03
风浸人心

demo

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2017-04-03
斜杠男人

CSS3 跨列设置column-span column-span主要用来定义一个分列元素中的子元素能跨列多少。 column-span: none | all 取值说明 none此值为column-span的默认值，表示不跨越任何列。 all这个值跟none值刚好相反，表示的是元素跨越所有列，并定位在列的Ｚ轴之上。

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2017-04-03
斜杠男人

CSS3 列表边框column-rule column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。语法规则： column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
斜杠男人

CSS3 列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> normal默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length>此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
斜杠男人

CSS3 多列布局——column-width column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用 column-width: auto | <length> 取值说明 auto如果column-width设置值为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例就是由列数column-count来决定。 <length>使用固定值来设置元素列的宽度，其主要是由数值和长度单位组成，不过其值只能是正值，不能为负值。

查看全部

0 采集收起来源：CSS3 多列布局——column-width
2018-03-22
斜杠男人

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

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2018-03-22
斜杠男人

CSS3 多列布局——Columns columns：<column-width> || <column-count> 参数说明 <column-width>主要用来定义多列中每列的宽度 <column-count>主要用来定义多列中的列数

查看全部

0 采集收起来源：CSS3 多列布局——Columns
2018-03-22

首页上一页 269 270 271 272 273 274 275 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.html+CSS相关基础知识 2.具有一定的网页制作经验 3.此课程不支持IE9版本以下，建议使用 chrome、safari、firefox、opera浏览器学习本课程。

老师告诉你能学到什么？: 1.系统学习CSS3相关知识 2.轻松制作出各种绚丽的效果