慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

南慕瑶

css变形：给属性transform赋值

查看全部

0 采集收起来源：CSS3变形--旋转 rotate()
2016-02-12
阿斯顿CCC

outline-color 定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 outline-style 定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。 outline-width 定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。 outline-offset 定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 inherit 元素继承父元素的outline效果。

查看全部

0 采集收起来源：CSS3外轮廓属性
2016-02-12
阿斯顿CCC

属性值<br> 取值说明<br> none 用户不能拖动元素修改尺寸大小。<br> both 用户可以拖动元素，同时修改元素的宽度和高度<br> horizontal 用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。<br> vertical 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。<br> inherit 继承父元素的resize属性值。到目前为止，可以使用overflow属性的任何容器元素。注意要设置overflow属性 <div class="panel" ></div>

查看全部

0 采集收起来源：自由缩放属性resize
2018-03-22
阿斯顿CCC

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) { /* 样式写在这 */ } 现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下： @media (max-width: 480px) { ... } @media (max-width: 768px) { ... } @media (min-width: 768px) and (max-width: 980px) { ... } @media (min-width: 1200px) { .. }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置
2016-02-11
阿斯顿CCC

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,user-scaleable = no” />

查看全部

0 采集收起来源：Responsive设计——meta标签
2018-03-22
阿斯顿CCC

第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。

查看全部

0 采集收起来源：Responsive布局技巧
2016-02-11
阿斯顿CCC

来看一个断点解决图片自适应的例子。 <img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="" /> 对应的CSS代码： @media (min-device-width:600px){ img[data-src-600px]{ content: attr(data-src-600px,url); } } @media (min-device-width:800px){ img[data-src-800px] { content:attr(data-src-800px,url); } }

查看全部

0 采集收起来源：Responsive设计（一）
2018-03-22
阿斯顿CCC

1. 最大宽度max-width @media screen and (max-width:480px){ .ads { display:none; } } 2.最小宽度min-width @media screen and (min-width:900px){ .wrapper{width: 980px;} } 3.多个媒体特性使用 @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 5. not关键词 @media not print and (max-width: 1200px){样式代码} 6.only关键词 <linkrel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" /> 在Media Query中如果没有明确指定Media Type，那么其默认为all，如： <linkrel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
阿斯顿CCC

媒体类型的引用方法也有多种，常见的有：link标签、@import和CSS3新增的@media几种： ①<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> ②@importurl(reset.css) screen; @importurl(print.css) print; ③<head> <style type="text/css"> @media screen{ 选择器{/*你的样式代码写在这里…*/} } </style> </head>

查看全部

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

其中Screen、All和Print为最常见的三种媒体类型。

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2016-02-11
阿斯顿CCC

animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为normal时，动画的每次循环都是向前播放； 2、另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。例如：通过animation-direction属性，将move动画播放动画方向设置为alternate，代码为： animation-direction:alternate;

查看全部

0 采集收起来源：CSS3中设置动画播放方向
2016-02-11
阿斯顿CCC

animation-name:around; animation-duration: 10s; animation-timing-function: ease; animation-delay: 1s; animation-iteration-count:infinite;(循环次数无限)

查看全部

0 采集收起来源：CSS3中调用动画
2016-02-11
阿斯顿CCC

先用@keyframes定义一个动画（要有名字）再用animation:animation-name duration timing-function delay;

查看全部

0 采集收起来源：CSS3 Keyframes介绍
2016-02-11
阿斯顿CCC

-webkit-transition-duration: 1s; transition-duration: 1s;

查看全部

0 采集收起来源：CSS3中的动画--过渡所需时间 transition-duration
2016-02-11
阿斯顿CCC

ease默认值 linear匀速 ease-in加速渐显 ease-in减速渐隐 ease-in-out 渐现渐隐

查看全部

0 采集收起来源：CSS3中的动画--过渡函数 transition-timing-function
2016-02-11

首页上一页 633 634 635 636 637 638 639 下一页尾页

0/150

提交

取消

开始学习

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

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