简单的三列布局

最新推荐文章于 2024-09-11 12:01:27 发布

cxygs5788

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量102

点赞数

文章标签： xhtml

我将向您展示如何制作一个非常简单但有效的三列布局。

首先，我们将从三列布局的HTML或结构开始。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="style.css" />
  </head> 
<body> 
  <div id="left">
  </div> 
  <div id="middle">
  </div> 
  <div id="right">
  </div> 
</body> 
</html>

根据您在每一列中使用的内容，有两种方式来定位我们的部门。我们将首先从简单的开始。

对于本示例，我们实际上将稍稍更改HTML。我们不会为我们的部门使用id，而是为他们提供相同的类。因此我们的HTML应该看起来像这样。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="style.css" />
  </head> 
<body> 
  <div class="column">
  </div> 
  <div class="column">
  </div> 
  <div class="column">
  </div> 
</body> 
</html>

我们为每个部门分配相同的类的原因是，从一条规则为他们分配相同的样式会更加容易。

现在，我们将从三列布局的CSS或样式开始。

.column {
  float:left;
  width:200px;
  height:500px;
  border:1px solid #000;
}

这里最重要的样式是“ float：left;”。这就是使每个部门彼此完美对立的原因。进行三列布局实际上就是您所需要的。其他样式只是为了视觉辅助。这很简单，但是每个部门的确需要一些可定制性。这是我们的第二个例子发挥作用的地方。

现在我们切换回我们的第一个代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <link rel="stylesheet" href="style.css" />
  </head> 
<body> 
  <div id="left">
  </div> 
  <div id="middle">
  </div> 
  <div id="right">
  </div> 
</body> 
</html>

每个分区都有自己的ID，因此可以轻松地向该分区（仅该分区）添加特定样式。我们仍将为每个部门使用相同的样式，并且确实必须键入一些代码，但是值得为每个部门进行自定义。

#left {
  float:left;
  width:200px;
  height:500px;
  border:1px solid #000;
} 
#middle {
  float:left;
  width:200px;
  height:500px;
  border:1px solid #000;
} 
#right {
  float:left;
  width:200px;
  height:500px;
  border:1px solid #000;
}