VB.net 2010 视频教程 VB.net 2010 视频教程 python基础视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • css教程之简单的 <div> 标记

简单的 <div> 标记(相关css教程
  (X)HTML 拥有非常简单的标记 <div>,可以使用它将网页划分为有用的区域。从设计角度讲,这是一个不错的想法,因为它在本质上就是一个包含内容的方框。
  CSS 2.1 的标准 <div> 效果
  CSS 始终支持设置 <div> 的样式。其中一些元素包括边框调整,比如:
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;)。
  要将此属性应用到一些浏览器中,必须包含类似以下形式的标记:
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
  此示例只是为了让该标记适用于基于 Mozilla(比如 Mozilla Firefox)和基于 Webkit(比如 Apple Safari)的旧浏览器。如果您愿意,可以将上述 3 个属性设置为不同值并让样式在 Firefox 和 Google Chrome 中显示不同的效果。
  也可以在 <div> 上生成一个阴影。为此,可以使用以下 3 个属性(再次说明,一定要处理各种浏览器):
-webkit-box-shadow: 8px 8px 6px #AAAAAA;
-moz-box-shadow: 8px 8px 6px #AAAAAA;
box-shadow: 8px 8px 6px #AAAAAA;
  在这种情况下,第一个属性是水平阴影,第二个是垂直阴影,第三个是模糊量,第四个是阴影的颜色。可以在模糊量和阴影之间放置另一个属性(另一个与阴影的覆盖范围相关的大小值),但是此属性似乎没有广泛使用。
  列表
  (X)HTML 中另一个常见的元素是列表。列表具有两种形式:无序列表 (<ul>) 和有序列表 (<ol>)。它们对于为网页提供数字列表(比如步骤列表)和非数字列表(比如处方成分)很有用。在网站布局方面,列表常常对于网站导航结构的开发至关重要,因此对于样式尤其有用。
  (X)HTML 列表(无论是有序还是无序的)默认将拥有所谓的列表标记。在非正式的英语中,我们可能将它们称为 “bullet points(项目符号)”。CSS2.1 拥有少量的列表标记,可以使用 list-style-type 属性设置它们。无序列表标记的常见值包括 none、disc、circle 和 square。
  有序列表标记的值是基于数字的表示方式。最常用的选项包括 decimal、lower-roman 和 lower-greek。
  在撰写本文时,现代 Web 浏览器支持的基于列表的新 CSS3 属性和特性不是太多。否则本文将会介绍(举例而言)全新的 list-style-type特性。我们介绍了另一个得到更广泛支持的 CSS3 属性,称为text-shadow。
  类似于前面定义的 box-shadow,text-shadow 属性提供了一个阴影。但是,与 box-shadow 不同,text-shadow 实际上会为每个字母添加阴影。所以,当将它应用到列表项时,可以使用以下标记:
li {
  text-shadow: 2px 2px 2px #AA00FF;
}
  举例而言,如果拥有一个无序列表,它的 (X)HTML ID 为 nav,显示为一个导航栏,那么可以构建类似以下形式的内容:
ul#nav li:hover {
  text-shadow: 2px 2px 2px #AA00FF;
}
  这将仅在将鼠标悬停在 #nav 无序列表中的一个列表元素上时提供 text-shadow。

相关教程