慕课网

精品课程十天精通CSS3

十天精通CSS3

最热最新

qq_狼来了_0

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

查看全部

0 采集收起来源：Responsive布局技巧
2017-03-06
qq_狼来了_0

这就是一个响应式布局。手机到平板为：320px-1024px；写法一般为： @media screen and (min-width: 320px) and (max-width: 1024px) { }

查看全部

0 采集收起来源：Responsive设计（二）
2017-03-06
qq_狼来了_0

推荐阮一峰的博客

查看全部

0 采集收起来源：CSS3 伸缩布局（二）
2017-03-06
牡蛎先生

:nth-of-type(2n+1) :not(:nth-of-type(2n)) :nth-of-type(odd) :not(:nth-of-type(even)) odd是偶数 even是奇数

查看全部

0 采集收起来源：CSS3 nth-of-type(n)选择器
2017-03-06
慕粉1346254686

@font-face { font-family: "MOOC Font"; src: url("http://www.imooc.com/Amaranth-BoldItalic.otf"); }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2018-03-22
牡蛎先生

.wrapper>div:first-child 这个选择器是选择class为wrapper下的子类标签div，!并且是.wrapper里面的first-child( 第一个子类 )！，但是div中没有是wrapper的第一个子类，所以不满足条件选择器，所以不执行。

查看全部

0 采集收起来源：CSS3 first-of-type选择器
2018-03-22
百兽凯多00

如果有not的话应该是四种吧 :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)选择器
2017-03-06
MR_SANL

background-size设置背景图片的大小，以长度值或者百分比显示，还可以通过cover和contain来对图片进行伸缩，语法： background-size：auto|<长度值>|<百分比>|cover|contain auto 是默认值，不改变背景图片的原始高度和宽度；长度值：是成对出现的，如200px 50px, 百分比，将背景图片宽高依次设置为所在元素宽高乘以前面的百分比得出的数值 cover,覆盖，即将背景图片等比缩放以填满整个容器 contain，容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止

查看全部

0 采集收起来源：CSS3背景 background-size
2018-03-22
MR_SANL

background-clip,用来将背景图片做适当的裁剪以适应实际需要，语法： background-clip:border-box|padding-box|content-box|no-clip 参数分别表示从边框、内填充、内容区域向外裁剪背景，no-clip表示不裁剪，和参数border-box显示的效果是相同的

查看全部

0 采集收起来源：CSS3背景 background-clip
2017-03-06
MR_SANL

background-origin,设置元素背景图片的原始起始位置，语法： background-origin:border-box| padding-box|content-box; 参数分别表示背景图片是从边框，内边距（默认值）和内容区域开始显示，需要注意的是背景图片必须是no-repeat,如果不添加这个属性，背景图片会从边框开始显示 background：#000 url() no-repeat;(若要设置为居中，在no-repeat 后再添加一个center) background-origin:content-box; position:relative;

查看全部

0 采集收起来源：CSS3背景 background-origin
2017-03-06
MR_SANL

text-shadow可以用于设置文本的阴影效果；语法：text-shadow:X-Offset Y-Offset blur color; X-Offset：表示阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移； Y-Offset：是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移，反之向上偏移； Blur：是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0； Color：是指阴影的颜色，其可以使用rgba色。

查看全部

0 采集收起来源：CSS3文字与字体文本阴影text-shadow
2017-03-06
MR_SANL

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。语法： @font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; }

查看全部

0 采集收起来源：CSS3文字与字体嵌入字体@font-face
2017-03-06
MR_SANL

text-overflow用来表示设置是否需要使用一个省略标记，即使用省略号；语法：text-overflow:clip(表示剪切)|ellipsis（表示显示省略号）；但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果，代码如下： text-overflow:ellipsis; overflow:hidden; white-space:nowrap; 其中word-wrap可以用来设置文本行为，当超过指定容器的边界时是否断开换行，语法： word-wrap:normal(表示控制连续文本换行)|break-word(表示内容将在边界内换行)，其中的normal为浏览器的默认值，break-word设置在长单词或URL地址内部进行换行。

查看全部

0 采集收起来源：CSS3文字与字体 text-overflow 与 word-wrap
2017-03-06
MR_SANL

elinear-gradient(to bnottom,#000,#fff)其中to bottom是用来指定渐变的方向，可以用角度或者英文来表示。角度：0deg,对应英文为 to top ，作用是从下向上；90deg,to right,从左向右；180deg,to bottom,从上向下；270deg,to left,从左向右，to top left,右下角到左下角，to top right,左下角到右上角

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2017-03-06
MR_SANL

CSS3 颜色线性渐变： linear-gradient(to bottom,#fff,#999) linear-gasdient表示的为渐变类型，径向为radial，to bottom表示的为渐变方向，等价于180edg，颜色值表示颜色的起始点和结束点，可以有两个到多个颜色值；例如：background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);

查看全部

0 采集收起来源：CSS3颜色渐变色彩
2017-03-06

首页上一页 297 298 299 300 301 302 303 下一页尾页

0/150

提交

取消

开始学习

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

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