慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

芥子1204

visibility与display的区别，前者原占用空间依然存在，后者则无。

查看全部

0 采集收起来源：CSS3选择器 ::before和::after
2016-03-29
yangyuan

在Responsive布局中，可以毫无保留的丢弃：第一，尽量少用无关紧要的div；第二，不要使用内联元素（inline）；第三，尽量少用JS或flash；第四，丢弃没用的绝对定位和浮动样式；第五，摒弃任何冗余结构和不使用100%设置。有舍才有得，丢弃了一些对Responsive有影响的东东，那么有哪些东东能帮助Responsive确定更好的布局呢？第一，使用HTML5 Doctype和相关指南；第二，重置好你的样式（reset.css）；第三，一个简单的有语义的核心布局；第四，给重要的网页元素使用简单的技巧，比如导航菜单之类元素。

查看全部

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

每个断点会对应调用一个样式文件（或者样式代码）在不同的断点加载不同的样式文件，设置断点应把握三个要点：满足主要的断点；有可能的话添加一些别的断点；设置高于1024的桌面断点。

查看全部

0 采集收起来源：Responsive设计（二）
2016-03-29
yangyuan

Responsive设计 1.流体网格流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。 2.弹性图片弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸。使用background-image给元素使用背景图片，显示/隐藏父元素，给父元素使用不同的图片，然后通过Media Queries来控制这些图片显示或隐藏。来看一个断点解决图片自适应的例子。 <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
yangyuan

3.多个媒体特性使用 Media Queries可以使用关键词"and"将多个媒体特性结合在一起。也就是说，一个Media Query中可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种媒体类型。当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”，如下所示。 @media screen and (min-width:600px) and (max-width:900px){ body {background-color:#f5f5f5;} } 4.设备屏幕的输出宽度Device Width 在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。同样的，对于屏幕设备同样可以使用“min/max”对应参数，如“min-device-width”或者“max-device-width”。 <link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" /> 5. not关键词使用关键词“not”是用来排除某种制定的媒体类型，也就是用来排除符合表达式的设备。换句话说，not关键词表示对后面的表达式执行取反操作，如： @media not print and (max-width: 1200px){样式代码} 上面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

查看全部

0 采集收起来源：Media Queries使用方法
2018-03-22
yangyuan

@media 媒体类型and （媒体特性）{你的样式} 使用Media Queries必须要使用“@media”开头，然后指定媒体类型（也可以称为设备类型），随后是指定媒体特性（也可以称之为设备特性）。媒体特性的书写方式和样式的书写方式非常相似，主要分为两个部分，第一个部分指的是媒体特性，第二部分为媒体特性所指定的值，而且这两个部分之间使用冒号分隔。例如： (max-width: 480px) 1. 最大宽度max-width “max-width”是媒体特性中最常用的一个特性，其意思是指媒体类型小于或等于指定的宽度时，样式生效。最小宽度min-width “min-width”与“max-width”相反，指的是媒体类型大于或等于指定宽度时，样式生效。

查看全部

0 采集收起来源：Media Queries使用方法
2016-03-29
yangyuan

@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
芥子1204

A>B 表示选择A元素的所有子B元素。与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。A+B表示HTML中紧随A的B元素。nth-child是个伪类的用法，如p:nth-child(2)就表示在p的父元素中选择位居第二位的p。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2018-03-22
芥子1204

ul > li li 是ul 的一级子元素，就是儿子而ul li 里可能是儿子，或者孙子...

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—last-child
2018-03-22
芥子1204

在使用伪类，比如:target时，该选择器是作用到主元素，如需要使用后辈选择器，书写应该是：div:target p{声明}

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2016-03-29
芥子1204

应该就是指ul下的第一个li元素。这里之所以只变了序号，是因为文字在a元素里面。要想设置a元素里面的文字颜色必须在a选择器下设置才可以的。

查看全部

0 采集收起来源：CSS3 结构性伪类选择器—first-child
2016-03-29
qq_疯子_109

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

查看全部

0 采集收起来源：CSS3选择器 :read-write选择器
2016-03-29
qq_疯子_109

:read-only选择器 html: <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" /> css: input[type="text"]:read-only{ border-color: #ccc; } “:read-only”伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”

查看全部

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

::selection选择器通过“::selection”选择器，将Web中选中的文本背景、文本变成自己需要的颜色。 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的 ::selection { background: 颜色; color: 颜色; }

查看全部

0 采集收起来源：CSS3选择器 ::selection选择器
2016-03-29
qq_疯子_109

:checked选择器在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。在CSS3中，可以通过状态选择器“:checked”配合其他标签实现自定义样式。而“:checked”表示的是选中状态。HTML代码 <form action="#"> <div class="wrapper"> <div class="box"> <input type="checkbox" checked="checked" id="usename" /><span>√</span> </div> <lable for="usename">我是选中状态</lable> </div> <div class="wrapper"> <div class="box"> <input type="checkbox" id="usepwd" /><span>√</span> </div> <label for="usepwd">我是未选中状态</label> </div> </form> css: input[type="checkbox"] + span { opacity: 0; } input[type="checkbox"]:checked + span { opacity: 1; }

查看全部

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

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

0/150

提交

取消

开始学习

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

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