1.7.3 XHTML+CSS标准布局(1)


1.7.3 XHTML+CSS标准布局(1)


用XHTML+CSS布局你会发现网页设计很轻松,熟悉这些可爱的CSS代码之后,如果再回到表格布局,那简直就是一件很痛苦的事情。


沿着上面表格布局的页面结构,我们先用XHTML元素编织本例页面一级框架:





<!--[一级框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"></div>
<!--主体-->
<div id="css8"></div>
<!--底部-->
<div id="css8_footer"></div>
<div id="copyright"></div>

与上面表格布局中先插入5个表格一样,标准布局中先输入5个div元素布局块。这些布局块如同表格一样用来实现模块的组织与管理。


在标准布局中,读者应该为每个div框架元素定义id属性,这些id属性如同人的身份证一样,方便CSS能够准确的控制每个div布局块。所以,为了阅读和维护的需要,我们应该为它们起一个有意义的名称。


下面来设计页面内部层次框架,由于本例页面比较简单,嵌套框架不会很深,顶部和底部布局块可能就不要嵌套框架。XHTML布局代码如下:





<!--[完整XHTML框架]-->
<!--顶部-->
<div id="top"></div>
<div id="top1"><img src="images/bg_top.jpg" width="776" height="121" /></div>
<!--主体-->
<div id="css8">
<div id="css8_content">
<div id="css8_title">
Hello World -- 您的第一个程序
</div>
<div class="css8_sub">实例</div>
<div class="box"><div class="tl"><div class="tr">
<div class="bl"><div  class="css8_content br">
以下控制台程序是传统"Hello World!"程序的C# 版,该程序显示字符串Hello World!。
<pre>using System;
// A "Hello World!" program in C#
namespace HelloWorld
{
class Hello
{
static void Main()
{
System.Console.WriteLine("Hello World!");
}
}
}</pre>
</div></div></div></div></div>
<div id="gotop"><a title="跳到页首" href="#top">返回顶部</a></div>
</div>
</div>
<!--底部-->
<div id="css8_footer"></div>
<div id="copyright">
&copy;2007 <a href="http://www.css8.cn" target="_black" >css8.cn</a> all
rights reserved
</div>

这时你会看到,上面所用的XHTML框架代码只有32行,嵌套层次只有3层,其中为了实现圆角区域的显示效果而单独嵌套多层div元素除外。


可能读者要问了:为什么非要让表格实现多层嵌套呢,难道不嵌套就不行吗?这个问题很关键,表格布局中页面的框架和页面显示效果都由表格来完成,所以为了一些特殊的效果必须用嵌套表格的方式来实现,例如要制作特殊的背景,你必须使用多层嵌套来间接实现局部背景效果。而XHTML+CSS布局中,XHTML和CSS两者是分工合作的,XHTML只管页面框架实现,页面显示效果则由CSS来完成,所以在标准布局中XHTML框架代码会显得非常简洁。


现在还没有定义CSS布局代码,如果此时浏览页面,则显示如下图所示,是不是感觉如同未经装修的毛坯房一样,实现太难看了。







 
(点击查看大图)图1.18
完成XHTML框架的页面效果。


标签:
友情链接
轻松育儿世界奇观
苏ICP备16066217号-2