＜上一篇
＞下一篇
#content {
width: 514px;
float: left;
}
因为导航栏浮在左侧，我们需要添加一个“float: left;”到我们的“left”ID里，但同时我们需要添加它到我们的“content”ID里，因为它也浮在我们的主ID容器左侧：
以下内容为程序代码
#left {
width: 178px;
float: left;
}
我们填加这个到我们的Xhtml代码里：http://css.maxdesign.com.au/floatutorial/introduction.htm
以下内容为程序代码
<div id="content">this is the right</div>
如果上面的这些讲解使你感觉有一定难度，我敢保证这些将会对你很有用：
* 更多的关于Float basics
* 关于Float的教程
当然，我们的内容现在是紧贴着左边的导航栏的，而我们想要的效果是空出一些空隙的，所以我们要填加一些内容容器的样式：
以下内容为程序代码
#content {
width: 479px;
float: left;
padding-top: 15px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 20px;
}
我们也可以用下面的简短的代码来实现：
以下内容为程序代码
#content {
width: 479px;
float: left;
padding: 15px 0 10px 20px;
}
这样写同样是严密的，第一个值是定义了上端空隙，第二个定义了右端空隙，第三个定义了底端空隙，第四个定义了左端空隙。如果我们添加了空隙，我们需要编辑我们的容器的宽度了，因为实际的宽度是随着这20像素（左边20像素，右边0像素）的空隙而变化的。所以我们需要改一下容器的宽为494，但同时因为我也想要右边出现一些空白，那样文件看上去不是紧贴着右边，于是再扣除15像素，就得到了现在的值479。
可能这时有朋友会说了：“喂，你为什么不只用一个紧靠的"width: 494px"再结合一个"padding-right: 15px"？”呵呵，不错的想法，其实开始时我也是这样做的，而且在 Safari, FireFox and Mozilla浏览器上都能显示的很正常，但在IE浏览器上就不行了，在IE浏览器上显示时，整个内容跳到了我的导航栏的下面（即left ID容器的下面）。显然在IE中它没有留下足够的空白区来使右边正好适合。目前我只能这样解释。通过这样的小技巧同样是完美的在各个浏览器上显示。
添加标题
要添加标题，我们要添加一个header 标签在我们的Xhtml代码里面：
以下内容为程序代码
<h2>This is the title</h2>
现在我们要为它添加一个样式来定义它的外观：
以下内容为程序代码
#content h2 {
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #80866A;
background: transparent url(images/bullet_title.gif) no-repeat;
width: 454px;
padding: 0 0 0 30px;
}
我们使用#content h2在这里意思是我们要给content ID 里的h2定义一个样式。意思就是说在内容DIV里的所有的h2的标签的显示样式效果都是这样的。我们也可以在这个content ID的外面定义h2标签的样式，那样的话，整个网页上的h2标签里的内容都显示同样的效果。如果你想要用其它的h2样式例如在left容器，在前面添加这个id将是很方便的。
以下内容为程序代码
<div id="content">all h2 tags here will have this style</div>
在content h2中的第一行CSS设置了字体的样式： 字体的宽度 (normal),字体的大小（18px）和字体的名称。类似于padding属性。这也是用一行的简写形式，它用一行的代码为不同的字体设置了所有的这些属性值。接下来我们设置文本的颜色，第三步设置背景图片的属性。也这是以前我们曾做过的背景图。同样是用简写的代码，我定义了背景图片颜色（transparent），背景图片路径background-image和background-repeat这三个属性写在一行里就可以全部表示出来。最后两行代码是定义了我们的header的总宽度和空隙量。
添加文本内容
这是文本内容的样式：
以下内容为程序代码
.text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #5B604C;
margin-bottom: 10px;
}
现在我们用一个class，不用在最前面，因为我们反复的要用这个样式在我们的网页中。第一行设置了字体的样式，11像素的字体大小，18像素的行高，第二行我们定义了文本的颜色，在最后我们通过在段与段之间添加10像素的底端空白来增加一些距离。
在我们的Xhtml代码中的h2标签的下面我们添加一个段落标签，用来存放我们的文本内容，并将它就用其“text”样式！
以下内容为程序代码
<p class="text">Here comes the text</p>
添加图像
这是右对齐的图像的样式：
以下内容为程序代码
.imageright {
float: right;
padding: 7px;
background-color: #ffffff;
border: 1px solid #bac1a3;
}
同样的，我们用一个class来设置它的样式，是因为我们将要能在我们的网页上多次应用这个样式。我们的图像是浮在我们的文本DIV里的，所以我们添加： "float:right"。然后我们设置一个7个像素的空隙在图像的四周，并设置了一个白色的背景，这样将颜色一个白色的区域围绕着图像。然后，我们添加了一个1像素的边，颜色为#bac1a3。你也可以再添加其它的Class为一个左对齐的图像，比如叫它“.imageleft”并用同样的属性和值，做为浮动的部分，你要修改"float: right" to "float: left".。
这是最后的结果
更正：在我们开始第七部分之前，我想纠正一个我的小错误，我告诉你们在DIV标签之间放那个文本的样式是不正确的语法，它应该是放在段落之间的。这样当CSS样式没找到的时候，看上去仍然还可以。这样做允许你使用顶部或底部的空白来调整垂直方向的段与段的间距。这种方法我们同样不需要再用换行标签了。
不用这种方法，在今天的这个第七部分，我们将填加一个紧贴着浏览器的底部的网页脚，我在这个部分还是不讲添加喜欢的链接的内容，因为它的内容太多了。总之，这将是一项坚具的工作，要进行大量的阅读。
首先，我必须告诉你，完全用CSS建立一个紧贴你的浏览器窗口的页脚和用表格来设计是相当有区别的。不幸的是，因为safari是如此的年轻的一个浏览器，有些东西仍然会丢失，就像我们需要为网页脚设置的min-width 和 min-height属性。不过一个好消息说在下一个版本的safari将支持这些。更多的关于垂直定位的和建立网页脚的知识可以看这篇文章,实际上，我推荐你先阅读一下再继续下面的内容，因为它把这一切解释的那样清晰，在这儿我只能讲到这么深入了。
阅读完那篇文章之后，你将知道我们需要建两个主要的容器来完成这个工作，1个容器存放所有的内容，另一个存放网页脚。我们的包括了整个内容的容器是"#container" id，这是非常靠前的一个DIV在代码里（在body标签之后），结束于body标签之前。换句话说我们的网页脚DIV应该放置在紧挨"#container" id的DIV下面。
以下内容为程序代码
<html>
...
<body>
<div id="container"> ... </div>
<div id="footer"> ... </div>
</body>
</html>
这是我们为网页脚添加的CSS代码：
以下内容为程序代码
#footer {
margin: 0px auto;
position: relative;
background-color: #717F51;
border-top: 9px solid #F7F7F6;
width: 692px;
padding: 5px 0;
clear: both;
}
我们添加了一个网页脚，背景色为浓绿色，在顶部给它一个9像素的边框。与我们的框架是一个颜色，我们定义了宽度并添加了“clear: both;”，这意思是在网页脚的左右两边不允许浮动的元素！网页脚的对齐方法是和我们的container一样的，为“margin: 0px auto;”，这就出现了同样的居中效果。我们添加了5像素的空白在顶部和底部，为的是留一些空白在文本周围。网页脚的内容是相对的，关于元素的定位可以在这里(W3C的网站)看到更多的解释！
接下来我们为网页脚上的文本和链接添加样式：
以下内容为程序代码
#footer h2 {
maring: 0;
text-align: center;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #D3D8C4;
}
#footer h2 a:visited, #footer h2 a:link {
color: #D3D8C4;
text-decoration: none;
border-bottom: 1px dotted #D3D8C4;
}
#footer h2 a:hover {
color: #F7F7F6;
text-decoration: none;
border-bottom: none;
background-color: #A5003B;
}
我们用了一人上h2标签为我们的文本：
<div id="footer"><h2>....</h2></div>
我们添加这点儿代码在紧挨"#container" id的DIV下面，换句话讲是在<body>结束的上面！
然后我们添加这个JavaScript代码，这是必需的对于确保这个网页脚在Safari上显示时紧贴浏览器的底部。
以下内容为程序代码
<!--
function getWindowHeight() {
var windowHeight = 0;
if (typeof(window.innerHeight) == 'number') {
windowHeight = window.innerHeight;
}
else {
if (document.documentElement && document.documentElement.clientHeight) {
windowHeight = document.documentElement.clientHeight;
}
else {
if (document.body && document.body.clientHeight) {
windowHeight = document.body.clientHeight;
}
}
}
return windowHeight;
}
function setFooter() {
if (document.getElementById) {
var windowHeight = getWindowHeight();
if (windowHeight > 0) {
var contentHeight = document.getElementById('container').offsetHeight;
var footerElement = document.getElementById('footer');
var footerHeight = footerElement.offsetHeight;
if (windowHeight - (contentHeight + footerHeight) >= 0) {
footerElement.style.position = 'relative';
footerElement.style.top = (windowHeight - (contentHeight + footerHeight)) + 'px';
}
else {
footerElement.style.position = 'static';
}
}
}
}
window.onload = function() {
setFooter();
}
window.onresize = function() {
setFooter();
}
//-->
注意：一定要确保在你提交到javascript里的ID在你的内容里也有同样的ID名称
如果你现在浏览我们的到目前为止的网页，你将看到在Safari浏览器上网页脚并不显示出来，怎么回事呢？不太确定的说法是因为我们有两个浮动的 containers (#left and #content)在它上面，需要被清除掉，我以前曾经写了一篇文章关于这种现像，但Eric Meyer发表了一篇更完整的关于这个内容的文章，将这些事解释的更清楚！
为了调整这个，我们需要添加一个清除上面的DIV：
以下内容为程序代码
<div class="clear"> </div>
我们添加了这个样式：
以下内容为程序代码
.clear {
clear: both;
}
这是最后的结果
下一个部分我们将介绍在左侧的导航栏下添加喜欢的链接，希望你能学到更多哟！
这是我们教程的最后一部分，我们将添加喜欢的链接在左侧并且链接我们的样式在一个单独的CSS样式单里。
添加XHTML代码
首先，我们要添加xhtml代码为我们喜欢的链接：
以下内容为程序代码
<div id="favlinks">
<h2>My Favorite Sites</h2>
<ul class="extlinks">
<li><a href="http://stopdesign.com/">Stopdesign</a></li>
<li><a href="http://www.simplebits.com/">SimpleBits</a></li>
<li><a href="http://www.mezzoblue.com/" >Mezzoblue</a></li>
<li><a href="http://www.zeldman.com/">Zeldman</a></li>
</ul>
</div>
在开始我们把我们的链接放进一个DIV容器里并给它一个ID名为“favlinks”。这个ID包含我们的链接和标题的，必须要通过样式单来定义 width, margin 和 padding。对于这些链接，我们用一个class样式因为这种方法我们可以重复使用它在我们的页面上。所以你可以添加类似的带有一个标题的链接列表。但如果你真的那样做了，一定要确保它是被添加在“favlinks”容器的DIV里的，或者建立另一个DIV ID来包含这些链接以便保持每个无素处在正确的位置。
CSS代码：
首先我们定义我们的“favlinks”div id容器：
以下内容为程序代码
#favlinks {
width: 163px;
padding-left: 15px;
margin-top: 10px;
}
我们定义了它的宽度并具给它的左边一个15像素的空白，以防止它贴到左边上，同时留一些额外的空当在顶部，这个favlinks容器的宽不像我们的导航栏的宽度178那样，而是163，是因为我们添加了15像素的左空白。这叫做盒式结构，更精细的内容可以看这篇文章：3D by Jon Hicks
以下内容为程序代码
#favlinks h2 {
font: normal 16px Georgia, Times New Roman, Times, serif;
color: #5C604D;
margin: 0 0 10px 0;
padding: 0;
}
上面的这段CSS是我们的这个标题的样式，前两行是定义文字字体大小和颜色的，再往下是padding 和 margin，我们只在底部添了10像素的空白，padding 和 margin是必需的，除非我们不想要在标题和链接之间空太开间隔，只是一些空开就够了，对我来说那就是10个像素了在底部。
以下内容为程序代码
#favlinks ul {
margin: 0;
padding: 0;
list-style-type: none;
}
在上面的这些代码是定义我们的列表中的链接的，首要的是确保默认的点不显示出来，并且padding 和 margin是设置到零的。就像我们在第五部分中的导航栏一样。
以下内容为程序代码
ul.extlinks li {
background: url(images/bullet_extlink.gif) no-repeat 0 3px;
font: normal 11px/16px Verdana, Arial, Helvetica, sans-serif;
padding-left: 12px;
}
我们已经添加了一个名为“extlinks”的Class来定义我们的链接，我们用“ul.extlinks li”来定义ul里的“li”标签的样式。首先我们添加一个non-repeated背景，定义我们的小点距上顶3像素，距左边0像素来确保这些点正好对齐我们一会要添加的链接。我们定义了字体样式并添加了一点左侧空白来确呆我们的文本能给我们的点留出一些空白。
以下内容为程序代码
.extlinks a:link {
color: #A5003B;
text-decoration: none;
border-bottom: 1px dotted #A5003B;
}
.extlinks a:visited {
color: #6F2D47;
text-decoration: none;
border-bottom: 1px dotted #959E79;
}
.extlinks a:hover {
background-color: #C3C9B1;
color: #A5003B;
text-decoration: none;
border-bottom: 1px solid #A5003B;
}
在最后我们定义我们的链接的一些其它样式，当鼠标经过链接时，链接出现一个1像素高度的下划线，为了不出现两条下载线，我们通过添加“text-decoration: none”隐藏了标准的默认的那条下划线，字体样式就不用添加了，因为我们已经定义了li标签的样式，我们仍然需要添加一个背景颜色当鼠标经过状态的时候，并要为访问过的链接定义一个更浅一点儿的颜色，让其下划线变为虚线。这样别人就知道哪些链接是点过的了！
这是最后的结果
建立外部样式文件
现在我们已经完成了我们的设计，但是你注意到我们所有的CSS样式都是写在我们的网页内的，而你们在实际做的过程中尽量不要这样，在这里我是为了简单方便的讲解才这样的，你们应该把你们的样式单写在一个单独的外部的样式文件里，然后链接它到你的文档里。所以我们现在要拷贝所有的样式并把它们粘贴到一个新的文件里，保存为“styles.css”
链接样式文件
以下内容为程序代码
<link rel="stylesheet" type="text/css" media="screen" href="styles.css" />
这里就是最终最终的成品了
现在我们的的系列教程就全部讲完了，我很想知道大家在学习过程中的感受，并希望大家能为我指出文中的一些不足，同时也希望大家学完以后设计出自己的文档拿来这里一起展示一样，希望你乐意哟!
