css教程之创建没有表格的列

金沙澳门官网网址:www.js333com

VB.net 2010 视频教程 VB.net 2010 视频教程 VB.net 2010 视频教程
SQL Server 2008 视频教程 c#入门经典教程 Visual Basic从门到精通视频教程
当前位置:
首页 > 网站开发 > HTML >
  • css教程之创建没有表格的列

  • 2015-01-23 11:20 来源:www.js333com
创建没有表格的列(相关css教程
  一般而言,表格存在着与布局技术一样的缺陷,因为当您布局包含表格的网页时,您会搞乱数据的逻辑流程。记得在本文开头我们说过,CSS 是 (X)HTML 之上的一层,而 (X)HTML 实际上是通过一种紧凑方式呈现的数据。不错,最佳的设计方式是以 (X)HTML 形式提供数据,没有任何设计或样式:如果它看起来是紧凑的,那么您可以应用一个 CSS 样式表。如果确实需要编辑 (X)HTML 来应用某种设计,请确保您禁用了 CSS,以查看它是否仍然是紧凑的。
  出于两种原因,这样做非常重要。第一个原因是让它可供拥有特殊的视觉需求的人访问(因为他们将常常拥有自己的默认样式表设置或软件)。第二个原因是机器需要能够读取您的网站。搜索引擎和其他软件需要能够读取并跟踪您网站的代码,来为它建立索引。
  那么,问题是如何创建没有表格的列?很简单,使用两个 <div> 框,如清单 4 所示。
  清单 4. div (X)HTML 示例
<div id="left" class="equal-column">
</div>
<div id="right" class="equal-column">
</div>
<div class="something-below">
</div>
  然后可以在 CSS 内设置各种设计属性。清单 5 提供了一个示例。
  清单 5. 创建 div 列的 CSS 样式
div.equal-column {
  width: 45%;
  height:100%:
}
div#left {
 float: left;
}
div#right {
 float: right;
}
div.something-below {
 width: 100%;
 clear: both;
}
  此标记将两列都设置为宽 45%,然后将左侧的列固定到左侧,将右侧的列固定到右侧。最后,使用另一个带有类 something-below 的 <div>,我们希望它占据两列下的整个屏幕。这是一种有用的技术,可用于快速、轻松地在屏幕上获得两列。
  在 CSS3 中,还有另一个巧妙的概念,那就是文本列。换句话说,如果 column-count 属性设置为一个数字,一个段略会自动拆分为两段:
div#textual-columns {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
  此标记设置一个 ID 为 textual-columns 的 <div> 来得到两个文本列。但是,您可能已注意到,它让每列的高度相等,与您可以在报纸或杂志上看到列相比,这可能有点出乎意料。
相关教程
Baidu
sogou