慕课网

洛雪

CSS3外轮廓属性外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似，但和元素边框border完全不同，外轮廓线不占用网页布局空间，不一定是矩形，外轮廓是属于一种动态样式，只有元素获取到焦点或者被激活时呈现。 outline属性早在CSS2中就出现了，主要是用来在元素周围绘制一条轮廓线，可以起到突出元素的作用。但是并未得到各主流浏览器的广泛支持，在CSS3中对outline作了一定的扩展，在以前的基础上增加新特性。outline属性的基本语法如下： outline: ［outline-color］ || [outline-style] || [outline-width] || [outline-offset] || inherit 从语法中可以看出outline和border边框属性的使用方法极其类似。outline-color相当于border-color、outline-style相当于border-style，而outline-width相当于border-width，只不过CSS3给outline属性增加了一个outline-offset属性，其取值说明如下。 outline-color——定义轮廓线的颜色，属性值为CSS中定义的颜色值。在实际应用中，可以将此参数省略，省略时此参数的默认值为黑色。 outline-style——定义轮廓线的样式，属性为CSS中定义线的样式。在实际应用中，可以将此参数省略，省略时此参数的默认值为none，省略后不对该轮廓线进行任何绘制。 outline-width——定义轮廓线的宽度，属性值可以为一个宽度值。在实际应用中，可以将此参数省略，省略时此参数的默认值为medium，表示绘制中等宽度的轮廓线。 outline-offset——定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。 inherit——元素继承父元素的outline效果。

查看全部

0 采集收起来源：CSS3外轮廓属性

2015-03-31

洛雪

自由缩放属性resize 为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。 resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。 resize: none | both | horizontal | vertical | inherit 取值说明： none----用户不能拖动元素修改尺寸大小。 both----用户可以拖动元素，同时修改元素的宽度和高度 horizontal----用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 vertical----用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 inherit----继承父元素的resize属性值。例如：通过resize属性，让文本域可以沿水平方向拖大。代码为： textarea { -webkit-resize: horizontal; -moz-resize: horizontal; -o-resize: horizontal; -ms-resize: horizontal; resize: horizontal; }

查看全部

0 采集收起来源：自由缩放属性resize

2015-03-31

洛雪

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设计——不同设备的分辨率设置

2015-03-31

洛雪

Responsive设计——不同设备的分辨率设置下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求： 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) { /* 样式写在这 */ }

查看全部

0 采集收起来源：Responsive设计——不同设备的分辨率设置

2015-03-31

洛雪

脚本下载地址： 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

洛雪

Responsive设计——meta标签最后还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。 meta标签被称为可视区域meta标签，其使用方法如下。 <meta name=”viewport” content=”” /> 在content属性中主要包括以下属性值，用来处理可视区域。 content属性值 width 可视区域的宽度，其值可以是一个具体数字或关键词device-width height 可视区域的高度，其值可以是一个具体数字或关键词device-height initial-scale 页面首次被显示时可视区域的缩放级别，取值为1.0时将页面按实际显示，无缩放 mininum-scale 可视区域的最小缩放级别 maxinum-scale 可视区域的最大缩放级别 user-scalable 指定用户是否可以对页面进行缩放，yes表示允许，no表示禁止。在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就是浏览Web页面适应屏幕的大小，显示在屏幕上，可以通过这个可视区域的meta标签进行重置，告诉他使用设备的宽度为视图的宽度，也就是说禁止其默认的自适应页面的效果，具体设置如下： <meta name=”viewport” content=”width=device-width,initial-scale=1.0” /> 另外一点，由于Responsive设计是结合CSS3的Media Queries属性，才能尽显Responsive设计风格，但大家都清楚，在IE6-8中完全是不支持CSS3 Media。下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求。

查看全部

0 采集收起来源：Responsive设计——meta标签

2018-03-22

洛雪

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

查看全部

0 采集收起来源：Responsive布局技巧

2015-03-31

洛雪

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-03-31

qinzhongting

结构性伪类选择器—not :not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框，CSS代码可以写成： form { width: 200px; margin: 20px auto; } div { margin-bottom: 20px; } input:not([type="submit"]){ border:1px solid red; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—not

2018-03-22

qinzhongting

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。示例演示：通过“:root”选择器设置背景颜色 HTML代码： <div>:root选择器的演示</div> CSS代码： :root { background:orange; }

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—root

2018-03-22

qinzhongting

实例展示： html代码： <a href="xxx.pdf">我链接的是PDF文件</a> <a href="#" class="icon">我类名是icon</a> <a href="#" title="我的title是more">我的title是more</a> css代码 a[class^=icon]{ background: green; color:#fff; } a[href$=pdf]{ background: orange; color: #fff; }

查看全部

0 采集收起来源：CSS3选择器属性选择器

2018-03-22

qinzhongting

1、制作导航圆角提示：使用border-radius实现圆角 2、制作导航立体风格提示：使用box-shadow实现立体风格 3、制作导航分隔线提示：使用渐变与伪元素制作 4、删除第一个和最后一个导航分隔线提示：使用伪元素删除第一个和最后一个分隔线

查看全部

0 采集收起来源：CSS3背景制作导航菜单综合练习题

2015-03-31

qinzhongting

multiple backgrounds 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。语法缩写如下： background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式： background-image:url1,url2,...,urlN; background-repeat : repeat1,repeat2,...,repeatN; backround-position : position1,position2,...,positionN; background-size : size1,size2,...,sizeN; background-attachment : attachment1,attachment2,...,attachmentN; background-clip : clip1,clip2,...,clipN; background-origin : origin1,origin2,...,originN; background-color : color; 注意：用逗号隔开每组 background 的缩写值；如果有 size 值，需要紧跟 position 并且用 "/" 隔开；如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。 background-color 只能设置一个。举例：

查看全部

0 采集收起来源：CSS3背景 multiple backgrounds

2018-03-22

qinzhongting

background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

查看全部

0 采集收起来源：CSS3背景 background-size

2018-03-22

qinzhongting

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

查看全部

0 采集收起来源：CSS3背景 background-origin

2015-03-31

十天精通CSS3