在上例中，我们使用Media Queries模块来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确地作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达“大于或等于”和“小与或等于”。例如，widt ...
分类：
Web程序 时间：
2019-12-19 09:25:29
阅读次数：
81
在iPhone系列和iPod Touch中使用的是Safari浏览器，它支持前面介绍的媒体查询表达式。例如，使用iPhone 320px×480px的分辨率去访问我们前面的布局示例，却无法得到我们想看到的结果，并不是从上到下排列显示，而是和计算机显示器访问的布局相同。为什么会这样？因为在iPhone ...
分类：
移动开发 时间：
2019-12-19 09:17:12
阅读次数：
84
布局所涉及的技术非常很多，足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案，包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。 1 居中设计 区块框居中的设计是在网页布局中常用的技术，例如将网页内的主体内容设置为一定的宽度，然后在页面内居中占据屏幕的一部分显示，而不是横跨整个屏幕宽 ...
分类：
Web程序 时间：
2019-12-13 09:39:32
阅读次数：
105
虽然使用绝对定位可以实现页面布局，但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变，所以并不是布局的首选方式。而使用浮动的盒子模型可以向左或向右移动，直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止。并且由于浮动的盒子模型不在文档的普通流中，所以文档的普通流中的盒子模型表 ...
分类：
Web程序 时间：
2019-12-11 09:30:40
阅读次数：
119
标准的网页都需要对内容进行布局，以前都是采用表格的定位技术，从2005年开始逐步转向DIV+CSS的布局方式，目前绝大多数的网站都是采用这种布局方式。使用DIV+CSS对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。通过使用DIV盒子模型结构将各部分内容划分 ...
分类：
Web程序 时间：
2019-12-06 09:48:38
阅读次数：
105
4 径向渐变 CSS3径向渐变是圆形或椭圆形渐变。颜色不再沿着一条直线轴变化，而是从一个起点朝所有方向混合。但相对线性渐变要比径向渐变复杂的多。 径向渐变的格式如下： radial-gradient([<起点>]? [<形状> || <大小>,]? <点>，<点>…) 径向渐变的参数描述如表1： 表 ...
分类：
Web程序 时间：
2019-11-25 09:46:03
阅读次数：
71
渐变背景一直以来在Web页面中都是一种常见的视觉元素。但一直以来，Web设计师都是通过图形软件设计这些渐变效果，然后以图片形式或者背景图片的形式运用到页面中。Web页面上实现的效果，仅从页面的视觉效果上来看，与设计并无任何差异。事实上这种方法是比较麻烦的，因为首先需要设计师进行设计，然后进行切图，在 ...
分类：
Web程序 时间：
2019-11-25 09:41:40
阅读次数：
67
3 线性渐变实例 一、颜色从顶部向底部渐变 制作从顶部到底部直线渐变有三种方法，第一种是起点参数不设置，因为起点参数的默认值为“top”；第二种方法起点参数设置为“top”；第三种起点参数使用“-90deg”关键词。为top_bottom设置从顶部向底部的渐变，三种方法的CSS代码如下： 第一种方法 ...
分类：
Web程序 时间：
2019-11-25 09:40:46
阅读次数：
86
传统的圆角生成方案，必须使用多张图片作为背景图案。CSS3的出现，使得我们再也不必浪费时间去制作这些图片了，只需要border-radius属性，支持浏览器IE 9、Opera 10.5、Safari 5、Chrome 4和Firefox 4。 1 border-radius属性 CSS3圆角只需设 ...
分类：
Web程序 时间：
2019-11-21 10:09:07
阅读次数：
106
除了为文字添加阴影，我们还可以为盒模型添加阴影。盒模型阴影的属性名称为box-shadow,此属性与text-shadow一样有4个值，前两个值分别表示水平方向位移距离和垂直方向的位移距离，第三个值表示阴影的模糊半径（包含0及以下的值均表示无模糊），最后一个则是阴影的颜色。前Chrome 16+，F ...
分类：
Web程序 时间：
2019-11-18 09:37:52
阅读次数：
65
