返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-布局

时间:2020-06-14 13:26来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

希望您对HTML表格非常满意,并希望您能够使用HTML表格高效地设计页面布局。但是您知道CSS还提供了许多控件来定位文档中的元素。由于CSS是未来的潮流,为什么不学习和使用CSS而不是表格来进行页面布局呢?

以下列表收集了这两种技术的一些优缺点-

  • 大多数浏览器都支持表,而CSS支持正在逐渐被采用。

  • 当浏览器窗口大小更改时,表更宽容-改变其内容并包装以适应相应的更改。CSS的定位往往是准确且相当不灵活的。

  • 表比CSS规则容易学习和操作。

但是这些论点中的每一个都可以颠倒-

  • CSS对于Web文档的未来至关重要,并且大多数浏览器都将支持CSS。

  • CSS比表格更精确,因此无论浏览器窗口如何,都可以按需查看文档。

  • 跟踪嵌套表可能是一个真正的难题。CSS规则往往井井有条,易于阅读且易于更改。

最后,我们建议您使用对您有意义的任何技术,并以最佳方式使用您所知道的或呈现您的文档的内容。

CSS还提供了table-layout属性,以使您的表加载更快。以下是一个例子-

<table style = "table-layout:fixed;width:600px;">
   <tr height = "30">
      <td width = "150">CSS table layout cell 1</td>
      <td width = "200">CSS table layout cell 2</td>
      <td width = "250">CSS table layout cell 3</td>
   </tr>
</table>

在大型桌子上,您会发现更多的好处。使用传统的HTML,浏览器必须在最终呈现表之前计算每个单元格。但是,将表布局算法设置为fixed时,只需要在呈现整​​个表之前先查看第一行即可。这意味着您的表将需要具有固定的列宽和行高。

样本列布局

以下是使用CSS创建简单列布局的步骤-

设置完整文档的边距和填充,如下所示:

<style style = "text/css">
   <!--
      body {
         margin:9px 9px 0 9px;
         padding:0;
         background:#FFF;
      }
   -->
</style>

现在,我们将定义一个黄色的列,然后,将这个规则附加到<div>-

<style style = "text/css">
   <!--
      #level0 {
         background:#FC0;
      }
   -->
</style>

到目前为止,我们将拥有一个带有黄色主体的文档,因此让我们现在在level0内定义另一个分区-

<style style = "text/css">
   <!--
      #level1 {
         margin-left:143px;
         padding-left:9px;
         background:#FFF;
      }
   -->
</style>

现在,我们将在level1内再嵌套一个分区,并且我们将仅更改背景色-

<style style = "text/css">
   <!--
      #level2 {
         background:#FFF3AC;
      }
   -->
</style>

最后,我们将使用相同的技术,在level2内嵌套一个level3分区,以获取右列的视觉布局-

<style style = "text/css">
   <!--
      #level3 {
         margin-right:143px;
         padding-right:9px;
         background:#FFF;
      }
      #main {
         background:#CCC;
      }
   -->
</style>

如下完成源代码-

现场演示
<style style = "text/css">
   body {
      margin:9px 9px 0 9px;
      padding:0;
      background:#FFF;
   }
	
   #level0 {background:#FC0;}
	
   #level1 {
      margin-left:143px;
      padding-left:9px;
      background:#FFF;
   }
	
   #level2 {background:#FFF3AC;}
	
   #level3 {
      margin-right:143px;
      padding-right:9px;
      background:#FFF;
   }
	
   #main {background:#CCC;}
</style>
<body>
   <div id = "level0">
      <div id = "level1">
         <div id = "level2">
            <div id = "level3">
               <div id = "main">
                  Final Content goes here...
               </div>
            </div>
         </div>
      </div>
   </div>
</body>

同样,您可以在页面顶部添加顶部导航栏或广告栏。

它将产生以下结果-

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-布局

    希望您对HTML表格非常满意,并希望您能够使用HTML表格高效地设计页面布局。 但是您知...

  • CSS-验证

    验证是根据规则检查某些内容的过程。 当您是初学者时,在编写CSS规则时会犯很多错误,...

  • CSS打印-@media规则

    当网页打印在纸上时,可以使用CSS更改网页的外观。 您可以为屏幕版本指定一种字体,为...

  • CSS-听觉媒体

    网络文档可以由语音合成器呈现。 CSS2允许您将特定的声音样式功能附加到特定的文档元...

  • CSS分页媒体-@page规则

    分页媒体与连续媒体的不同之处在于,文档的内容分为一个或多个离散页面。 分页介质包...

  • CSS-媒体类型

    样式表的最重要特征之一是它们指定如何在不同的媒体上呈现文档:在屏幕上,在纸上,在...

猜你感兴趣