慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

IsYang

css3外轮廓属性 outline与border语法相似，outline新增属性outline-offset outline-offset ==》定义轮廓边框的偏移位置的数值，此值可以取负数值。当此参数的值为正数值，表示轮廓边框向外偏离多少个像素；当此参数的值为负数值，表示轮廓边框向内偏移多少个像素。

查看全部

0 采集收起来源：CSS3外轮廓属性
2016-03-29
qq_疯子_109

:disabled选择器代码：input[type="text"]:disabled { background: rgba(0,0,0,.15); border: 1px solid rgba(0,0,0,.15); color: rgba(0,0,0,.15); } “:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。要正常使用“:disabled”选择器，需要在表单元素的HTML中设置“disabled”属性

查看全部

0 采集收起来源：CSS3选择器 :disabled选择器
2018-03-22
IsYang

resize属性： none ==》用户不能拖动元素修改尺寸大小。 both ==》用户可以拖动元素，同事修改元素的宽度和高度 horizontal ==》用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度 vertical ==》用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度 inherit ==》继承父元素的resize属性值

查看全部

0 采集收起来源：自由缩放属性resize
2016-03-29
qq_疯子_109

:enabled选择器代码：input[type="text"]:enabled { background: #ccc; border: 2px solid red; } 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

查看全部

0 采集收起来源：CSS3选择器 :enabled选择器
2018-03-22
qq_疯子_109

only-of-type选择器 “:only-of-type”选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。这样说或许不太好理解，换一种说法。“:only-of-type”是表示一个元素他有很多个子元素，而其中只有一种类型的子元素是唯一的，使用“:only-of-type”选择器就可以选中这个元素中的唯一一个类型子元素。例如，通过“:only-of-type”选择器来修改容器中仅有一个div元素的背景色为橙色。代码：<div class="wrapper"> <p>我是一个段落</p> <p>我是一个段落</p> <p>我是一个段落</p> <div>我是一个Div元素</div> </div> <div class="wrapper"> <div>我是一个Div</div> <ul> <li>我是一个列表项</li> </ul> <p>我是一个段落</p> </div> CSS代码： .wrapper > div:only-of-type { background: orange; }

查看全部

0 采集收起来源：CSS3 only-of-type选择器
2018-03-22
qq_疯子_109

only-child选择器 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。示例： <div class="post"> <p>我是一个段落</p> <p>我是一个段落</p> </div> <div class="post"> <p>我是一个段落</p> </div> CSS代码： .post p { background: green; color: #fff; padding: 10px; } .post p:only-child { background: orange; }

查看全部

0 采集收起来源：CSS3 only-child选择器
2018-03-22
qq_疯子_109

nth-last-of-type(n)选择器 “:nth-last-of-type(n)”选择器和“:nth-of-type(n)”选择器是一样的，选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始，而且它的使用方法类似于上节中介绍的“:nth-last-child(n)”选择器一样。通过“:nth-last-of-type(n)”选择器将容器“div.wrapper”中的倒数第三个段落背景设置为橙色。代码： .wrapper > p:nth-last-of-type(3){ background: orange; }

查看全部

0 采集收起来源：CSS3 nth-last-of-type(n)选择器
2018-03-22
qq_疯子_109

last-of-type选择器 “:last-of-type”选择器和“:first-of-type”选择器功能是一样的，不同的是他选择是父元素下的某个类型的最后一个子元素。例如，可以通过“:last-of-type”选择器，将容器“div.wrapper”中最后一个段落元素背景设置为橙色代码： .wrapper > p:last-of-type{ background: orange; } （提示：这个段落不是“div.wrapper”容器的最后一个子元素）。

查看全部

0 采集收起来源：CSS3 last-of-type选择器
2018-03-22
IsYang

不同设备的分辨率设置 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){ 样式... }

查看全部

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

meta标签，使用方法：<meta name=”viewport” content=”” /> content属性值： width ==》可视区域的宽度，其值可以是一个具体数字或关键词device-width height ==》可视区域的高度，其值可以是一个具体数字或关键词device-height initial-scale ==》页面首次被显示时可视区域的缩放级别，取值为1.0时将时页面被按实际尺寸显示，无任何缩放 minimun-scale ==》可视区域的最小缩放级别，表示用户可以将页面缩小的程度，取值为1.0时将禁止用户缩小至实际尺寸以下 maximun-scale ==》可视区域的最大缩放级别，表示用户以将页面放大的程度，取值为1.0时将禁止用户放大至实际尺寸以上 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。脚本下载地址： 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
yangyuan

一、媒体类型媒体类型（Media Type）在CSS2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式。在CSS2中常碰到的就是all(全部)、screen(屏幕)、print(页面打印或打印预览模式)，其实媒体类型远不止这三种，W3C总共列出了10种媒体类型。

查看全部

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

Responsive布局技巧在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div; 第二，不要使用内联元素(inline,比如，input,img,span,a...); 第三，尽量少用JS或flash; 第四，丢弃没用的绝对定位(absolute)和浮动样式; 第五，摒弃任何冗余结构和不使用100%设置。丢弃后，能帮助Responsive确定更好的布局第一，使用HTML5 Doctype和相关指南； Doctype（文档类型）在页面中，用来指定页面所使用的XHTML（或者HTML）的版本。要想制作符合标准的页面，一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE，XHTML里的标识和CSS才能正常生效。第二，重置好你的样式（reset.css）== 相当于初始代码第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如当行菜单之类元素。使用这些技巧，无非是为了保持你的HTML简单干净，而且在你的页面布局中的关键部分（元素）不要过分的依赖现代技巧来实现，比如说CSS3特效或者JS脚本。一个好的HTML布局结构，不使用css样式，应该要到达内容排列有序，方便阅读。

查看全部

0 采集收起来源：Responsive布局技巧
2016-03-29
IsYang

Responsive设计（一） RWD是精心提供各种设备都能浏览网页的一种设计方法，RWD能让你的网页在不同的设备中展现不同的设计风格。 RWD不是流体布局，也不是网格布局，而是一种独特的网页设计方法。响应式设计要考虑元素布局的秩序，需要满足以下三个条件：网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。 RWD术语： 1.流体网格：好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放 2.弹性图片：弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。而实现方法是比较简单，如代码：img {max-width:100%;} 浏览器IE8不兼容断点解决图片自适应的思路的例子： <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); } } 3.媒体查询媒体查询在CSS3中得到了强大的扩展。使用这个属性可以让你的设计根据用户终端设备适配对应的样式。根据用户的使用设备的当前宽度，你的Web页面将加载一个备用的样式，实现特定的页面风格。 4.屏幕分辨率 Responsive设计利用Media Queries属性针对浏览器使用的分辨率来适配对应的CSS样式 5.主要断点在Media Queries中，其中媒体特性“min-width”和“max-width”对应的属性值就是响应式设计中的断点值而每个断点会对应调用一个样式文件（或者样式代码）。综合下来，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。

查看全部

0 采集收起来源：Responsive设计（一）
2018-03-22
IsYang

Media Queries的使用方法如下

查看全部

0 采集收起来源：Media Queries使用方法
2016-04-08
余冷寒光

box-shadow是向盒子添加阴影。支持添加一个或者多个。很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法： box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

查看全部

0 采集收起来源：CSS3边框阴影 box-shadow（一）
2016-03-28

首页上一页 579 580 581 582 583 584 585 下一页尾页

0/150

提交

取消

开始学习

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

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