慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

哪一年

就这样吧

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-01-28
千万里万望珍重

background-origin 设置元素背景图片的原始起始位置。语法： background-origin ： border-box | padding-box | content-box; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。

查看全部

0 采集收起来源：CSS3背景 background-origin
2015-01-28
千万里万望珍重

嵌入字体@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。 @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 然后再在需要引用的地方引用 font-family:XX

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2015-01-28
千万里万望珍重

text-overflow:clip(表示剪切)/ellipsis(文本溢出显示省略号) text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。语法：但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果 text-overflow:ellipsis; 溢出部分显示省略号； overflow:hidden; 溢出部分隐藏； white-space:nowrap; 定义强制文本在一行内显示

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2015-02-25
hahaseki

第四节变形--位移 translate() 使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。（将元素向指定的方向移动，类似于position中的relative。） translate()分为三种情况： 1、translate(x,y)水平方向和垂直方向同时移动。 2、translateX(x)仅水平方向移动。 3、translateY(Y)仅垂直方向移动。让不知道宽度和高度的元素实现水平、垂直居中。 <div class="wrapper"> 我不知道我的宽度和高是多少，我要实现水平垂直居中</div> position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); transform:translate(-50%,-50%);

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2018-03-22
meou

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

查看全部

0 采集收起来源：CSS3中的变形--位移 translate()
2015-01-28
胡温柔

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
hahaseki

第二节变形--缩放 scale() 让元素根据中心原点对对象进行缩放。 scale() 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放。（Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。） 2、scaleX(x)元素仅水平方向缩放。 3、scaleY(y)元素仅垂直方向缩放。

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-01-28
meou

transform有多个属性：http://www.w3school.com.cn/cssref/pr_transform.asp

查看全部

0 采集收起来源：CSS3中的变形--缩放 scale()
2015-01-28
hahaseki

第二节变形--扭曲 skew() 可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转的区别：rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1、skew(x,y)使元素在水平和垂直方向同时扭曲。 2、skewX(x)仅使元素在水平方向扭曲变形。 3、skewY(y)仅使元素在垂直方向扭曲变形。

查看全部

0 采集收起来源：CSS3中的变形--扭曲 skew()
2015-01-28
MrLJ

这玩意太难了，不懂的同学可以参考下这个 http://blog.csdn.net/henren555/article/details/9699449

查看全部

3 采集收起来源：CSS3中的变形--矩阵 matrix()
2015-03-24
千万里万望珍重

线性渐变(linear)和径向渐变(radial) inear-gradient(to bottom, red, green) inear-radial(to bottom, red, green) 渐变方向可以是角度deg

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2015-01-28
hahaseki

第一节变形--旋转 rotate() 它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。正值为顺时针，负值为逆时针。

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2015-01-28
yanshi

test

查看全部

0 采集收起来源：切换背景图像综合练习题
2015-01-28
千万里万望珍重

A为透明度参数，取值在0~1之间，不可为负值

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-01-28

首页上一页 1118 1119 1120 1121 1122 1123 1124 下一页尾页

0/150

提交

取消

开始学习

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

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