三、如何改进?
问题到这里,基本上就算解决了出一些可以优化的地方:
1.#newnews 和 #hotnews 外面套一个Div比较好。
如图,这样控制起来更加方便,只要浮动 #right。
2. Css部分:
#top, #search, #main, #footer {
margin: 10px auto 10px auto; width: 760px;
}
Margin 的排列顺序为 上、右、下、左 ,可以简写为margin : 10px auto ;
#category {
width: 180px;
height: 368px !important; height: 378px;
}
可以把 height 改成 height : 368px ;
#category {
margin-right:5px;
}
这里定义的是距离右边的列 5px的宽度,但是右边的 #newnews
和 #hotnews 定义了margin-left:5px; 意思就是要有10px的间距,可以把#category 的margin-right 直接改为10px 。。然后左边的列就可以不用定义margin-left了。。。
重构篇
四、“重构”的精彩
怎幺样,理解起来不困难吧 ?下面是最精彩的部分了,完全重构这个简单的页面,如果能用自己的想法自己还原。。那是再好不过的了。。
1. 搭建最基础的结构
首先,请找个你最顺手的编写工具,比如我是用的EditPlus ,然后就开始吧,顺便放上几首轻音乐,不要太紧张了,呵呵。。
先从写几个Div开始 ,一步一步的把结构合理的搭建出来,如图:
请各位同学注意一个问题,ID的命名是唯一的,代表着这个块在页面只有一个,如果要重复出现,请使用Class类来定义,还有命名最好有个规范,只要自己看得懂就好,这方面的内容,可以在谷歌上面输入关键词“CSS命名规范”
就知道怎幺做了。
我解释一下各块的含义:其中 #wrapper 是最外的包含容器,你可以理解为和body相当的作用 ,这里有同学会问了,为什幺直接在body里面控制整个页面呢?
我的建议:不要对body 和 html 赋予任何样式,因为这两个标签是“不可控制”的,或者说是“很难控制”的,比如给body定义一个宽度和高度,然后加一个背景色,各位同学可以自己动手试试看。。能控制吗??
#content是正式内容的开始,你也可以不嵌套这个Div,关系不大,我这里只是方便同学们理解而已。
#leftbar 顾名思义,左边的列。#rightbar当然是右边的列啦,但右边不是有两个块吗??别急,我们再接着写。。
更多的网页页面原结构和CSS写法导致浏览器兼容问题请到论坛查看: http://BBS.TC711.COM
【 双击滚屏 】 【 评论 】 【 收藏 】 【 打印 】 【 关闭 】
来源:
网页教学网
日期:2009-3-26