想学习任何一样东西,总该用自己所能理解的方式去学,我的作风就是深入浅出.下面就讲讲实际运用中的CSS吧.
最早并没有想过用CSS排版,所熟悉的不过是在FIREWORK上画画草图,最后用切片工具完成一个页的布局大体, 基本上没用到什么CSS.时代不同拉,现在CSS排版比较流行,呵呵,所以有空的话就看看这方面的资料,我这里也只能说个皮毛. OK不多说废话了.
首先,先确定你设计的页面有几大块,比如哪里是主导航,哪里是文本内容显示块,LOGO位置什么的.... 好,把你想好的几块位置先画在纸上,然后看看该用哪种定位方式,像本站的定位是采用自动居中, 你也可以是左对齐,或者是右对齐,甚至是完全居中,这个看你喜好了.接下来请尽量把所有的块归成三大块: 头部,中间,尾步.这样划分的好处是将来你不会因为块太多而无从下手,而且这样排产生的问题会少一些.
假设,你已经分好三大块,而且准备用典型的自动居中定位.好,下面的一步就是建立一个CSS文件. 方法很简单,先新建文本文件,修改后面的后缀为.css就可以了.你可以用记事本来编辑CSS文件, 但有些属性的名字比较难记,如果你是做网站的话那就用DREAMWEAVER写CSS吧,它会有提示性输入, 对记性不好的人是一大福音啊(尤其是我!!嘿嘿).因为你的三大块是放在BODY这个大标签下的, 所以我们应该从它下手:
body
{
margin:0;
padding:0;
text-align:center;
}
margin,padding,text-align各自有什么用处呢?margin翻译为外补丁,光从字面意思上是理解不了的, 举例说明吧,这里的BODY是一张白纸,大小和浏览器能显示的大小一样,margin的作用就是以白纸的边为基准向外排挤的距离. 所以margin的分支里面就有margin-top等四个边,也可以按上-右-下-左的顺序来给每个边的属性添加值比如 margin:1px 12px 1px 12px;注意了左和右、上和下如果是同一值的话可以缩写成margin:上下 左右; 比如前面的就能写成margin:1px 12px;这就意味着纸分别向上和下排挤掉1px的距离,左和右排挤掉12px. padding和margin有点相反,它是以四边为基准向纸的内部排挤,也就意味着纸中的内容得和各条边保持距离, 距离的多少就和margin的取值方法一样了.最后一个text-align是内容的对齐方式, 这里定义为center就能保证BODY里的元素都能保持居中了.BODY一般基本的CSS有这些, 当然还有些比如字体什么的也可以在BODY里设置,因为CSS有继承性,BODY设置好的属性, 它下面的小元素们也就有了这个属性,当然也可以有反叛的小元素,那就需要重新定义了,这里只是先讲个大概. 想深入了解就看看文档资料里的相关内容吧。
外面的大框架已经搭建好，剩下的就是把里面的三大块排排坐了。我们就比方把这三大块从上到下的排列吧， 那定位的次序也是一样的，先上后中再下。要注意的一件事，因为考虑到有用户使用的是800x600的分辨率 （尤其是老公公和老婆婆，眼睛远视，字大些比较好）所以我们在BODY定义好后，需要一个三大块的外包装， 感觉就是BODY是个大箱子，外包装是塑料袋，三大块是东西，东西放在塑料袋里，袋子放进大箱子。 袋子要做的服帖，这样才不会让三大块出现错位。解决办法是用width:auto;和height:auto; 这样就能让袋子自由伸缩了，前提使用的IE6浏览器，这个问题也是我最近才发现的，这里也不做详细的说明了。好了基本的布局思路就是这样，也是CSS应用里起码应该具备的。 如想动手实践一下的话，推荐看看CSS基本布局16例里面介绍的比较详细。
如果上面所说有什么不对的话，请指正，我也是第一次写这类东西。