第九步

上图中，logo和头部元素看上去摆在了正确的位置，但菜单还有点儿怪怪的。设计样式前我们先说一下logo和大文本图片的事。你可能在想，既然它俩都是图片为什么不放在背景图片里就好了？

这是因为我们需要给logo加上链接，点击可返回首页（让网站更好用）。而大文本图片可能要随页面而变，把它做成单独的图片我们就可以让大量HTML页面使用同一个CSS样式表，只要换上文字不同的图片就可以了。

现在咱们来设计那两个菜单，让页面真正开始成型。要用到的CSS如下：

ul#menu {   
    margin:0px; padding:0px;  
    position:absolute; top:138px; left:75px;  
}  
ul#right_menu {   
    margin:0px; padding:0px;  
    position:absolute; top:138px; rightright:110px;    
}  
ul#menu li, ul#right_menu li {  
    margin:0px; padding:0px;  
    list-style:none;  
    margin-right:10px;  
    font-size:9px;  
    text-transform:uppercase;  
    display:inline;  
}  
ul#menu li a, ul#right_menu li a {  
    text-decoration:none;  
    color:#bd92b2;  
}  
ul#menu li a:hover, ul#right_menu li a:hover {  
    text-decoration:none;  
    color:#ffffff;  
}  

头两条代码和之前一样（除了稍微调整了定位让它们仍然正确显示）。注意，因为两个菜单的位置不一样，这两条定义是分开的，但菜单选项的样式是相同的，所以我们把后面两条定义并成了一条。把两个属性一起定义的格式是：

.myClass, .myClass2 { ... }

这和下面的定义是完全不同的：

.myClass .myClass2 { ... }

因为第二个定义声明的对象是位于class="myClass"的标签内的所有class="myClass2"的元素

回到我们的样式表，看一遍重要的几点：

1. 和前面一样，我们把<ul>元素设为0 margin和0 padding，并绝对定位。
2. 然后我们为<ul>内部所有的<li>元素做出声明，让它们没有列表样式（即没有圆点），9px大小，统统大写，最重要的，让它们display:inline（译者注：行内显示）。行内显示意味着它们排成一行，而不是一个接在另一个下面。
3. 接下来的定义声明了<li>内部的<a>链接们应该是某个颜色的并且没有下划线。这里的<li>包括<ul id="menu"> 和<ul id="right_menu">内的所有<li>。

加上这些定义，我们的页面现在看上去相当不错啦！

看看目前的网站

第十步

现在该增加内容了！我们先写些伪文本来形成列。下面是HTML：

<div id="outside_container">  
    <div id="container">  
      
        <a href="#"><img src="images/logo.jpg" id="logo" /></a>  
          
        <ul id="menu">  
            <li><a href="#">Retouching</a></li>  
            <li><a href="#">Digital Effects</a></li>  
            <li><a href="#">Web Work</a></li>                      
        </ul>  
          
        <ul id="right_menu">  
            <li><a href="#">About</a></li>  
            <li><a href="#">Contact</a></li>  
        </ul>  
          
        <img src="images/panel_home.jpg" id="panel" />  
  
        <div id="content">  
          
            <div class="column1">  
              
                <h2>a sleek design</h2>  
                  
                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
            </div>  
            <div class="column2">  
                  
                <h2>tutorials</h2>  
              
                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
  
            </div>  
            <div class="column3">  
              
                <h2>recent work</h2>  
  
                <p>Dummy Text: This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
                <p>This design was produced for a photoshop and web development tutorial.  You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.</p>  
                <p>The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.</p>  
  
              
            </div>  
  
              
        </div>  
  
    </div>  
</div>  

在这段代码中，你可以看到我在内容区域加了3个新的<div>，每一个<div>包含一个<h2>标题元素和一些文本。他们的class名称是column1、column2、column3（列1、列2、列3）。加上文本是为了展示怎样形成列。

为了让他们看上去像列的样子我们先来添加一段CSS：

/* 
    Content 
*/  
  
#content {  
    padding-top:435px;  
    padding-left:85px;  
    width:815px;  
    color:#674f5d;  
    font-size:13px;  
    line-height:20px;  
}  
.column1 { float:left; width:230px; margin-right:30px; }  
.column2 { float:left; width:230px; margin-right:30px; }  
.column3 { float:left; width:270px; }  

我用一句注释为新的CSS段落起头，然后为#content设置样式。注意padding-top值....435px!设这么大是为了给之前绝对定位的元素空出地方。与绝对定位的元素不同，content是从属于页面正常流的。

这是因为你还要在content中加入更多内容，把footer推到下面去。绝对定位会让它覆盖在footer上方。

然后我给三个column分别设置宽度并加上float:left，这可以让它们漂向页面左边，与其他向左浮动的元素对齐。为了不让他们紧挨在一起，我给前两个column赋予了右外边距。

浮动一个元素会让它漂到左侧或右侧，并使其它元素环绕在其四周。加入另一个浮动元素，二者会并排成列。基本上你看到的列布局都运用了float（浮动）。

不幸的是，浮动元素会出现一个怪问题——它们跟自己的容器不对付，并且会漂到下一个元素上方而不是把它往下推。解决这个问题的方法就是给浮动元素后面的某个元素加上属性clear:both。

Clear（清理）属性可以阻止元素环绕浮动的<div>，这有点儿不好解释，我们直接看看清理和不清理分别会出现什么状况吧。

出处：译言
责任编辑：bluehearts

上一页 用CSS布局建站从零开始 [5] 下一页 用CSS布局建站从零开始 [7]

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。