VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > css >
  • div+css视频教程之样式设置指南

样式设置指南
本节详细介绍在浏览器不支持 CSS 版本 3 (CSS3) 时应用该版本会发生什么 —— 浏览器将忽略它并退回到默认设置。 本节还将介绍 CSS3 样式(以 -moz、-webkit 等开头的样式)的特定于浏览器的实现。
简单的 < div> 标记
(X)HTML 拥有非常简单的标记 < div>,可以使用它将网页划分为有用的区域。从设计角度讲,这是一个不错的想法,因为它在本质上就是一个包含内容的方框。
CSS 2.1 的标准 < div> 效果
CSS 始终支持设置 < div> 的样式。其中一些元素包括边框调整,比如:
1 border: size type color
其中:
●size 是一个数字值。
●type 是实线、虚线、点线、双线或一些 3D 样式的边框。
●color 通常是一个 RGB 十六进制值。
举例而言,您可以使用 border: 1px solid #000000; 表示 1 像素宽的黑色实线。
类似于 body,也可以更改标准背景颜色以及文本的字体和颜色。可以像其他基础样式一样进行这些更改。
CSS3 增强的 < div> 效果
一种呼声最高的设计元素(在 CSS2.1 中未找到)是边框的圆角边缘。这意味着过去的许多设计人员必须构建基于图像的边框或使用某种组合了 CSS 和 JavaScript 的 dirty 技术。幸运的是,在 CSS3 中不再存在此情况,它引入了 border-radius 属性(例如 border-radius: 10px;)。
要将此属性应用到一些浏览器中,必须包含类似以下形式的标记:
1
2
3
-webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 border-radius: 10px;
此示例只是为了让该标记适用于基于 Mozilla(比如 Mozilla Firefox)和基于 Webkit(比如 Apple Safari)的旧浏览器。如果您愿意,可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。
也可以在 < div> 上生成一个阴影。为此,可以使用以下 3 个属性(再次说明,一定要处理各种浏览器):
1
2
3
-webkit-box-shadow: 8px 8px 6px #AAAAAA;
 -moz-box-shadow: 8px 8px 6px #AAAAAA;
 box-shadow: 8px 8px 6px #AAAAAA;
在这种情况下,第一个属性是水平阴影,第二个是垂直阴影,第三个是模糊量,第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性(另一个与阴影的覆盖范围相关的大小值),但是此属性似乎没有广泛使用。

相关教程