如何进行CSS布局
有了下面这个如何进行CSS布局教程,不懂如何进行CSS布局的也能装懂了,赶紧get起来装逼一下吧!
如果你已经习惯于使用table标签,那么当你开始使用CSS进行布局时,必须发展一种新的思维。首先,忘掉行和列(运用表格时的一种重要的观念)。没有列跨度、行跨度和格子状的表格结构在CSS中是找不到的。然而,你可以把一个div标签当成一个表格单元。有了表格单元,div标签就是把你要的内容定位在网页区域的一个逻辑位置。此外,如你所见,CSS设计经常把一个div嵌套在另一个div里面,就像你把表格嵌套在表格里面来获得特定的效果一样——但是,幸运的是,CSS方法只用少得多的HTML代码。
强大的div标签
The Mighty div Tag
无论使用表格还是CSS,网页布局都是把大块的内容放进网页的不同区域里面。有了CSS,最常用来组织内容的元素就是div标签。如第18页所述,div标签是没有固有格式化属性的一个HTML元素(除了浏览器把这个标签当成前后有换行的块之外);反之,它被用来标识元素的一个逻辑组合或者网页中的一个分区。
你将代表性地把一大块属于一起的HTML包围在一个div里面。图11-1中包含Logo和导航栏的元素占据了网页顶部,因此用一个div标签把它们包围起来很有意义。至少,你要给网页的所有主要区域包含div标签,例如横幅、主要内容区域、工具条、页脚,等等。但是它也可能把一个或者更多的div包在一个div里面。一种最常用的方法就是把body标签里面的HTML包在一个div里面。然后可以通过把CSS应用到包装div,设置基础的页面属性。你可以给网页内容设定一个整体的宽度,设置左边距和右边距,或者把所有网页内容在屏幕的中间居中。
一旦已经把div标签放在了适当的位置上,再给每个div标签添加一个类或者ID,变成你分别对每个div定义样式的句柄。对于只出现一次和形成网页的基本构建块的网页部位,设计师们通常使用一个ID。一个网页横幅区域的div标签看起来可能像这样:div id="banner"。你可以对一个ID每页只使用一次,因此当有一个多次显示的元素时,就用一个类代替。如果你有几个定位照片和照片说明的div时,可以创建一个样式像这样:div class="photo"。
有了类似这些的样式,就可以定位各种各样的网页元素了。利用CSS的float属性,你可以定位不同的内容块给一张网页的左边或者右边(或者一个包含块比如另一个div的左边或者右边)。
至理名言
更多并非更好
虽然div对于CSS布局很重要,但也别对你的网页滥用div。一个常见的陷阱是相信你必须把一张网页中的一切都包围在一个div标签里面。假设你的主导航栏是一个链接的无序列表。由于它是一个重要的元素,你可能会试探用一个div来把它围起来:div id="mainNav"ul.../ul/div。但是当ul标签唾手可得时,就没有必要去添加一个div了。只要ul包含主要的导航栏链接,就只需添加ID样式给这个标签:ul id= "mainNav"。多余的div只是一些没有必要的代码。