以图例方式介绍CSS制作网页详细步骤

首先要做的是确定页面结构。随着你对CSS布局的逐步学习，这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片，我们可以非常简单地完成这个设计。
第九步
上图中，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"的元素
回到我们的样式表，看一遍重要的几点：

和前面一样，我们把<ul>元素设为0 margin和0 padding，并绝对定位。 然后我们为<ul>内部所有的<li>元素做出声明，让它们没有列表样式（即没有圆点），9px大小，统统大写，最重要的，让它们display:inline（译者注：行内显示）。行内显示意味着它们排成一行，而不是一个接在另一个下面。 接下来的定义声明了<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>，这有点儿不好解释，我们直接看看清理和不清理分别会出现什么状况吧。

最新评论