慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

旋上的舞

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

查看全部

0 采集收起来源：CSS3 跨列设置column-span
2015-07-13
旋上的舞

列表边框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(透明色) 例如：为了能有效区分栏目列之间的关系，可以为其设置一个列边框，代码为： column-rule: 2px dotted green;

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2018-03-22
旋上的舞

列间距column-gap column-gap主要用来设置列与列之间的间距，其语法规则如下： column-gap: normal || <length> normal默认值，默值为1em（如果你的字号是px，其默认值为你的font-size值）。 <length>此值用来设置列与列之间的距离，其可以使用px,em单位的任何整数值，但不能是负值。例如：将内容分三列显列，列与列之间的间距为2em，实现代码为： column-count: 3; column-gap: 2em;

查看全部

0 采集收起来源：CSS3 列间距column-gap
2018-03-22
yangmingyuan

animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。

查看全部

0 采集收起来源：CSS3中设置动画的播放状态
2015-07-13
慕用7077196

a[class^='column']{ background-color:red; } a[href$='doc']{ background-color:green; } a[title*='box']{ background-color:blue; }

查看全部

0 采集收起来源：CSS3选择器属性选择器
2015-07-13
cherishs碎姑娘

media queries——媒体类型（二）在实际中媒体类型有近十种之多，实际之中常用的也就那么几种，不过媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： link方法 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>

查看全部

0 采集收起来源：media queries——媒体类型（二）
2018-03-22
cherishs碎姑娘

Media Queries——媒体类型（一）随着科学技术不断的向前发展，网页的浏览终端越来越多样化，用户可以通过：宽屏电视、台式电脑、笔记本电脑、平板电脑和智能手机来访问你的网站。尽管你无法保证一个网站在不同屏幕尺寸和不同设备上看起来完全一模一样，但至少要让你的Web页面能适配用户的终端，让他更好的呈现在你的用户面前。在本节中，将会学到如何使用CSS3中的Media Queries模块来让一个页面适应不同的终端（或屏幕尺寸），从而让你的页面让用户有一个更好的体验。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2015-07-13
cherishs碎姑娘

body { display:-webkit-flex; align-items:center; justify-content:center; }实现body中元素的水平垂直居中。

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2015-07-13
旋上的舞

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

查看全部

0 采集收起来源：CSS3 多列布局——column-count
2018-03-22
旋上的舞

多列布局——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
cherishs碎姑娘

在自适应布局当中，在元素基础上添加内距padding，按照标准盒模型解析，往往会将布局撑破，但使用box-sizing的border-box值，可以让你轻松完成。

查看全部

0 采集收起来源：CSS3 盒子模型
2015-07-13
旋上的舞

多列布局——Columns 它主要应用在文本的多列布局方面，语法： columns：<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数：列宽和列数。参数参数说明 <column-width>主要用来定义多列中每列的宽度 <column-count>主要用来定义多列中的列数举例：要显示2栏显示，每栏宽度为200px，代码为： columns: 200px 2;

查看全部

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

超纲了有木有头痛

查看全部

1 采集收起来源：制作3D旋转导航综合练习题
2015-07-13
除了我都是猪

Responsive设计——不同设备的分辨率设置 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-07-12
除了我都是猪

可视区域meta标签：<meta name=”viewport” content=”” /> 告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果。具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 单独创建一个名为“responsive.css”文件，脚本下载地址： 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

首页上一页 871 872 873 874 875 876 877 下一页尾页

0/150

提交

取消

开始学习

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

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