慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

慕码人0911192

“:read-write”选择器刚好与“:read-only”选择器相反，主要用来指定当元素处于非只读状态时的样式。示例演示

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2015-11-17
qq_小柯_1

animation-name:around;兼容IE -moz-animation-name:around;兼容火狐 -webkit-animation-name:around;兼容谷歌

查看全部

1 采集收起来源：CSS3中调用动画
2015-11-17
此间懒少年

background-color:rgba(255,255,255,0.5);红绿蓝颜色，第四个参数是透明度。alpha

查看全部

0 采集收起来源：CSS3颜色颜色之RGBA
2015-11-17
此间懒少年

border-image:url(http://img1.sycdn.imooc.com//52e22a1c0001406e03040221.jpg) 70 70 70 70 stretch; //70可以不用单位，也可以是px 有三个参数要记住的。 round 平铺 repeat 重复 stretch拉伸

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2015-11-17
此间懒少年

border-radius:50px 0px 0px 50px; 设置圆角，如果设置了宽度，等于圆角度，那就是一个元，50->0-0->50,顺序是左上角顺时针计算。

查看全部

0 采集收起来源：CSS3边框为边框应用图片 border-image
2018-03-22
太空米

column-rule主要是用来定义列与列之间的边框宽度、边框样式和边框颜色。简单点说，就有点类似于常用的border属性。但column-rule是不占用任何空间位置的，在列与列之间改变其宽度不会改变任何列的位置。

查看全部

0 采集收起来源：CSS3 列表边框column-rule
2015-11-17
小胖子八块肌

:nth-of-type(2n+1) :not(:nth-of-type(2n)) :nth-of-type(odd) :not(:nth-of-type(even))

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2015-11-17
fwj唯一

:target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—target
2015-11-17
fwj唯一

在Web中插入内容，在CSS2.1时代依靠的是JavaScript来实现。但进入CSS3进代之后我们可以通过CSS3的伪类“:before”，“:after”和CSS3的伪元素“::before”、“::after”来实现，其关键是依靠CSS3中的“content”属性来实现。不过这个属性对于img和input元素不起作用。

查看全部

0 采集收起来源：CSS生成内容
2015-11-17
fwj唯一

CSS3外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下： outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit

查看全部

0 采集收起来源：CSS3外轮廓属性
2015-11-17
fwj唯一

自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。 resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit

查看全部

0 采集收起来源：自由缩放属性resize
2015-11-17
fwj唯一

Responsive布局技巧通过上面的介绍，大家对响应式设计有了一定的了解，但在实际制作中还是有一些布局技巧的：在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。说了这么多，怎么样的布局或者说HTML结构才是简单干净的呢？这里教大家一个快速测试的方法。你首先禁掉你页面中所有的样式（以及与样式相关的信息），在浏览器中打开，如果你的内容排列有序，方便阅读，那么你的这个结构不会差到哪里去。

查看全部

0 采集收起来源：Responsive布局技巧
2015-11-17
fwj唯一

Responsive设计（二）（接上一节内容） 4.屏幕分辨率屏幕分辨简单点说就是用户显示器的分辨率，深一点说，屏幕分辨率指的是用户使用的设备浏览您的Web页面时的显示屏幕的分辨率，比如说智能手机浏览器、移动电脑浏览器、平板电脑浏览器和桌面浏览器的分辨率。Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式。因此屏幕分辨率在Responsive设计中是一个很重要的东西，因为只有知道Web页面要在哪种分辨率下显示何种效果，才能调用对应的样式。 5.主要断点主要断点，在Web开发中是一个新词，但对于Responsive设计中是一个很重要的一部分。简单的描述就是，设备宽度的临界点。在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值。简单点说，就是使用主要断点和次要断点，创建媒体查询的条件。而每个断点会对应调用一个样式文件（或者样式代码），如下图所示：上图的style.css样式文件运用在Web页面中，但这个样式文件包括了所有风格的样式代码，也就是说所有设备下显示的风格都通过这个样式文件下载下来。当然，在实际中还可以使用另一种方法，也就是在不同的断点加载不同的样式文件，如下图所示。上图主要显示的是主要断点，主要断点加载的不同样式文件直接将影响Web的效果。除了主要断点之外，为了满足更多效果时，还可以在这个基础上添次要断点。不过主要断点和次要断点增加之后，需要维护的样式也相应的增加，成本也相对应的增加。因此在实际使用中，需要根据自身产品需求，决定断点。综合下来，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。

查看全部

0 采集收起来源：Responsive设计（二）
2015-11-17
fwj唯一

Responsive设计（一）什么是响应式设计呢？维基百科是这样对响应式作的描述：“Responsive设计简单的称为RWD，是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。”从这一点描述来说，RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。响应式设计要考虑元素布局的秩序，而且还需要做到“有求必应”，那就需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。要想灵活的使用Responsive，仅满足这几个条件还是不够的，我们必须对Responsive有一个全面的了解，那么要了解Responsive，就得先了解他的一些术语： 1.流体网格流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。 2.弹性图片弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，一句代码就能搞定的事情。 img {max-width:100%;} 不幸的是，这句代码在IE8浏览器存在一个严重的问题，让你的图片会失踪。当然弹性图片在响应式设计中如何更好的实现，到目前为止都还存在争议，也还在不断的改善之中。为每一个断点提供不同的图片，这是一个比较头痛的事情，因为Media Queries并不能改变图片“src”的属性值，那有没有办分法可以解决呢？可以参考一下下面的解决方法。使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏。

查看全部

0 采集收起来源：Responsive设计（一）
2015-11-17
fwj唯一

值设备类型 All 所有设备 Braille 盲人用点字法触觉回馈设备 Embossed 盲文打印机 Handheld 便携设备 Print 打印用纸或打印预览视图 Projection 各种投影设备 Screen 电脑显示器 Speech 语音或音频合成器 Tv 电视机类型设备 Tty 使用固定密度字母栅格的媒介，比如电传打字机和终端

查看全部

0 采集收起来源：Media Queries——媒体类型（一）
2015-11-17

首页上一页 702 703 704 705 706 707 708 下一页尾页

0/150

提交

取消

开始学习

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

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