网络编程
位置:首页>> 网络编程>> 网页设计>> 如何改良你的CSS代码编写结构(3)

如何改良你的CSS代码编写结构(3)

作者:ximicc 来源:CSS Beauty 发布时间:2008-09-29 16:03:00 

标签:结构,代码,经验,css

搭建你的页面结构

OK,现在你可以开始设计网站的结构了。如果网站的布局草稿已经准备好,那是可以很快就完成的。不管你选择那一种布局类型,流式或固定宽度,我建议你定义一个.container 类,并让它包含具有相同的宽度的CSS标签,在这种情况下,如果你想改变页面的宽度,只需修改.container 类的宽度就可以了,它所包含的元素的宽度会自动适应:

关于HTML代码

一旦站点的主要区块已经用CSS定义完毕,你就可以开始编写HTML代码。那没有什么复杂的,只需按正确的顺序添加正确的DIV即可:

<div class="container"> 

<!-- Header -->
<div id="logo"></div>
<div id="navbar"></div>
<div id="welcome-section"></div>

<!-- Main Content -->
<div id="column_left">
</div>
<div id="sidebar">
</div>

<!-- Footer -->
<div id="footer"></div> 

</div> 

如果在浏览器上测试正常,你就可以逐步为各个区块(navigation, sidebar, footer...)添加新的具体的CSS代码,即按结构的方式完成你的CSS并整合HTML代码。缩进所有依赖于同一个类的代码:

当你不得不在你的CSS代码中寻找一个具体的标签时,这点小聪明将起到意想不到的效果。

自定义类放在最后

通常,如果有些类多个区块都会用到,那我会以这样的方式把它们添加到CSS文件的末尾:

以能很快认出其主要属性的语义名字来命名每个类。

希望这些小窍门能帮助你简化编写和管理CSS代码的方式。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com