慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

IsYang

二、媒体类型引用样式的方法：常见的有：link标签、@import和CSS3新增的@media几种 link方法： <link rel="stylesheet" type="text/css" href="style.css" media="screen" /> @import方法： @import引入媒体类型主要有两种方式，一种是在样式中通过@import调用另一个样式文件； @importurl(reset.css) screen; 另一种方法是在<head></head>标签中的<style></style>中引入，但这种使用方法在IE6~7都不被支持，如样式文件中调用另一个样式文件时，就可以指定对应的媒体类型。 <head> <style type="text/css"> @importurl(style.css) all; </style> </head> @media方法： @media是CSS3中新引进的一个特性，被称为媒体查询（1）在样式文件中引用媒体类型： @media screen { 选择器{/*你的样式代码写在这里…*/} } （2）使用@media引入媒体类型的方式是在<head>标签中的<style>中引用。 <head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

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

一、媒体类型的值与设备类型 All ==》所有设备 Braille ==》盲人用点字法触觉回馈设备 Embossed ==》盲文打印机 Handheld ==》便携设备 Print ==》打印用纸或打印预览视图 Projection ==》各种投影设备 Screen ==》电脑显示器 Speech ==》语音或音频合成器 Tv ==》电视机类型设备 Tty ==》使用固定密度字母栅格的媒介，比如电传打字机和终端其中Screen、All和Print为最常见的三种媒体类型。媒体查询的特性 width ==》视口宽度。 height ==》视口高度。 device-width ==》渲染表面的宽度（对我们来说，就是设备屏幕的宽度）。 device-height ==》渲染表面的高度（对我们来说，就是设备屏幕的高度）。 orientation ==》检查设备处于横向还是纵向。 aspect-ratio ==》基于视口宽度和高度的宽高比。一个16∶9 比例的显示屏可以这样定义aspect-ratio: 16/9。 device-aspect-ratio：和aspect-ratio 类似，基于设备渲染平面宽度和高度的宽高比。 color ==》每种颜色的位数。例如min-color: 16 会检测设备是否拥有16 位颜色。 color-index ==》设备的颜色索引表中的颜色数。值必须是非负整数。 monochrome ==》检测单色帧缓冲区中每像素所使用的位数。值必须是非负整数，如monochrome: 2。 resolutione ==》用来检测屏幕或打印机的分辨率，如min-resolution: 300dpi。还可以接受每厘米像素点数的度量值，如min-resolution: 118dpcm。 scan ==》电视机的扫描方式，值可设为progressive（逐行扫描）或interlace（隔行扫描）。如720p HD 电视（720p 的p 即表明是逐行扫描）匹配scan: progressive，而1080i HD 电视（1080i 中的i 表明是隔行扫描）匹配scan: interlace。 grid ==》用来检测输出设备是网格设备还是位图设备。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-03-28
IsYang

5.Flex项目移到左边 flex项目称动到左边或右边也取决于主轴的方向。如果flex-direction设置为row，设置justify-content控制方向；如果设置为column，设置align-items控制方向。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-justify-content: flex-start; justify-content: flex-start; } 6.Flex项目移动右边 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: flex-end; align-items: flex-end; } 7.水平垂直居中 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; } 8.Flex项目实现自动伸缩可以定义一个flex项目，如何相对于flex容器实现自动的伸缩。需要给每个flex项目设置flex属性设置需要伸缩的值。 .bigitem{ -webkit-flex:200; flex:200; } .smallitem{ -webkit-flex:100; flex:100; }

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2016-03-28
IsYang

Flexbox布局，即伸缩布局盒模型 == 响应式。 Flexbox布局功能主要具有以下几点：第一：屏幕和浏览器窗口大小发生改变也可以灵活调整布局；第二：可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外控件），从而调整伸缩项目的大小；第三：可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外控件，分配到伸缩项目之前、之后或之间；第四，可以指定如何将垂直于元素布局轴的额外控件分布到改元素的周围；第五：可以控制元素在页面上的布局方向；第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。 1.创建一个flex容器 .flexcontainer{ display: -webkit-flex; display: flex; } 2.Flex项目显示 Flex项目是Flex容器的子元素。他们沿着主要轴和横轴定位。默认的是沿着水平轴排列一行。你可以通过flex-direction来改变主轴方向修改为column，其默认值是row。 3.Flex项目列显示 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; } 4.Flex项目移动到顶部如何将flex项目移动到顶部，取决于主轴的方向。如果它是垂直的方向通过align-items设置；如果它是水平的方向通过justify-content设置。 .flexcontainer{ display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-align-items: flex-start; align-items: flex-start; }

查看全部

0 采集收起来源：CSS3 伸缩布局（一）
2016-03-28
qq_一米阳光_50

结构性伪类选择器

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not
2016-03-28
不倒翁_BOzI

@-webkit-keyframes move { 0%{ transform: translateY(90px); } 15%{ transform: translate(90px,90px); } 30%{ transform: translate(180px,90px); } 45%{ transform: translate(90px,90px); } 60%{ transform: translate(90px,0); } 75%{ transform: translate(90px,90px); } 90%{ transform: translate(90px,180px); } 100%{ transform: translate(90px,90px); } } div { width: 200px; height: 200px; border: 1px solid red; margin: 20px auto; } span { display: inline-block; width: 20px; height: 20px; background: orange; -webkit-transform: translateY(90px); -webkit-animation-name: move; -webkit-animation-duration: 10s; -webkit-animation-timing-function: ease-in; -webkit-animation-delay: .2s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate; -webkit-animation-play-state:paused; } div:hover span { -webkit-animation-play-state:running; }

查看全部

1 采集收起来源：CSS3中设置动画的播放状态
2016-03-28
FianeHsu

在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

1 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-03-28
不倒翁_BOzI

思考一下，我们刚讲过的Keyframes 是否忘记加入前缀了？ Chrome和Safari: @-webkit-keyframes、-webkit-animation Foxfire: @-moz-keyframes、-moz--animation

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-03-28
FianeHsu

position的top:50%;left:50%;是相对于界面宽高的。 translate的-50%,-50%是相对于div本身宽高的。相当于先将div左上角居中，再将div中心点居中。

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2016-03-28
qq_Dream_High

扭曲skew函数（）能够让元素倾斜显示。他可以将一个对象以其中心位置围绕着x轴和y轴按照一定的角度倾斜。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2016-03-28
专注的前端工程师

matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。 a为元素的水平伸缩量，1为原始大小； b为纵向扭曲，0为不变； c为横向扭曲，0不变； d为垂直伸缩量，1为原始大小； e为水平偏移量，0是初始位置； f为垂直偏移量，0是初始位置区别，在CSS3中的变形，如rotate(),skew(),scale(),translate()，都可以使用矩阵matrix()函数来代替。 Matrix()与translate()关系：translate(x,y)对应Matrix(1,0,0,1,x,y); Matrix()与scale()关系：scale(x,y)对应Matrix(x,0,0,y,0,0); Matrix()与rotate()关系：rotate(x)对应Matrix(cos(x),sin(x),-sin(x),cos(x),0,0) Matrix()与skew()关系：skew(x,y)对应Matrix(1,tan(x),tan(y),1,0,0)

查看全部

2 采集收起来源：CSS3中的变形--矩阵 matrix()
2016-03-27
敬敬居士

导航图

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题
2016-03-27
慕姐0332557

columns:200px 3 列宽200px 列数 column-width:200px 列的宽度 column-count:2 列数 column-gap:3em 列与列之间的距离 column-rule:2px solid #ccc 列边框 column-span:all 跨列，覆盖所有列

查看全部

0 采集收起来源：CSS3 盒子模型
2016-03-26
慕姐0332557

column-width:200px 列的宽度 column-count:3 列数 column-gap:2 列与列之间的宽度 column-rule:2px solid #ccc 边框

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2016-03-26
慕姐0332557

column-width:300px 一列的宽度 column-count:3 列数 column-gap:2em 列与列之间的间距 columns:300px 2 列宽为300px 列数为2

查看全部

0 采集收起来源：CSS3 列间距column-gap
2016-03-26

首页上一页 581 582 583 584 585 586 587 下一页尾页

0/150

提交

取消

开始学习

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

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