html 绘制图例,以图例方式介绍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"的元素

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

和前面一样，我们把

• 元素设为0 margin和0 padding，并绝对定位。

然后我们为

• 内部所有的
• 元素做出声明，让它们没有列表样式(即没有圆点)，9px大小，统统大写，最重要的，让它们display:inline(译者注：行内显示)。行内显示意味着它们排成一行，而不是一个接在另一个下面。

  接下来的定义声明了

• 内部的链接们应该是某个颜色的并且没有下划线。这里的
• 包括 和内的所有
• 。

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

  第十步

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

a sleek design

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.

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.

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.

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.

tutorials

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.

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.

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.

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.

recent work

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.

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.

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.

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.

在这段代码中，你可以看到我在内容区域加了3个新的

，每一个

包含一个

标题元素和一些文本。他们的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(清理)属性可以阻止元素环绕浮动的

，这有点儿不好解释，我们直接看看清理和不清理分别会出现什么状况吧。