CSS+Div网页布局中的结构与表现
在Web标准中一个很重要的概念就是强调页面的结构与表现分离。说的通俗一点就是XHTML中应该没有样式化的东西,而且Web在浏览器中除内容外都应该由CSS表现,这包括布局与其它样式。一旦一个标准的XHTML代码写完之后,那么CSS可以实现其实百变面孔。其实XHTML是一个演员,CSS是编剧,XHTML演什么角色,都由CSS来决定的。 这听起来似乎有点理想主义,实现起来似乎就没有那么容易了。不过我还是想通过一个简单的例子来说问题。 我们在设计页面的时候遵循的一个原则就是:重要内容首先加载,将要内容稍后加载。因此我们会发现像我的博客一样,主内容代码是写在侧边栏前面的。但是我们却可以通过CSS使侧边栏位于左侧,如果不看代码只看在页面中的表现,这和先加载侧边栏没有什么不同。这就是结构和表现分离的好处。 假设我们有一个三栏的布局,其中两个是主内容区域,一个是侧边栏的次内容区域。那么按照上面的原则,我们应该把两个主内容区域的代码写在侧边栏次内容区域的前面,这样浏览器才会首先加载他们。那么我们就要构建下面的代码段: <div id="content"> 前面已经说过,结构和表现分离的好处就是我们可以任意地安排这三栏的位置。比如我们要把“sideContent”放在页面的左侧,主内容区位于中间和左侧,同时栏与栏之间有10px的间距。我们设定页面宽度为760px,扣除两个10px的间隔,那么内容区的共有740px的宽度,我们可以设定请内容区为290px,侧边栏为160px。于是有 #primaryContent { 注:为了演示方便没有优化代码。 float:left为使三个div元素水平对齐的常用方法。这 |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |