::^乔乔^::明镜台::原创空间::C#.NET2.0,C++技术BLOG
人最重要的是心境,一颗平静安稳的心才能更好的进步,保持自己的心态.成为梦想中的高手QQ群:8664695
posts - 17,comments - 32,trackbacks - 0
CSS+DIV布局已經變成白菜一樣了,到處都是CSS+DIV布局,去面試一個做網頁的公司,肯定會問,你會CSS+DIV布局不。到底啥是CSS+DIV布局呢?傳統上都是以用TABLE布局的,TABLE布局的要點是有兩個,第一:適當的地方合并行和列,第二:懂TABLE嵌套Table。
而且還可以直接在頁面上控制Table的高度長度。TABLE布局最大的缺點,除了沉長的TR,TD之外,言論最多的就是SEO里對Table布局的鄙視。大部分SEO人都會覺得Table布局不利于SEO優化。這點。。到真是有點關系,我試過兩個完全一樣的網站,一個是用Table布局的,我是用CSS+DIV布局的,并適當的使用了H標記,在GOOGLE搜索上,我CSS+div布局的網站要比Table布局的要靠前。。。至于為什么,那個不是本文的重點。。忽略掉。

   CSS+DIV布局最大的特點就是HTML文件里的代碼相對比較少,但是也造成了瀏覽器布局問題。。網上很多人都在說,我布局在IE里顯示正常,在FF下全部變形了。其實造成這樣問題的原因是你寫的CSS并不標準,可以說你寫的CSS都是根絕IE的標準來寫的,而不是CSS2.0的國際標準,無論是IE還是FF(3.0版前的我沒留意)都是支持CSS2.0的,但是在技術上,IE有寫模糊功能,可以令到非標準的CSS布局也能正確解析,一下是我寫CSS代碼的五個習慣,我不敢說我這五個習慣都是好習慣,至少我寫的CSS布局不會產生不良效果,也就是我寫的CSS有跨l瀏覽器能力。

第一:容器類DIV必須要有5個東西{margin,padding,width,height,overflow},什么叫容器類,就是這個DIV只是用來放內部的DIV的,也可以說是一個定位的div..例如:我們經常使用居中,一般是這樣做的
body
{
    font-size
: 12px;
    margin
: 0px;
    padding
: 0px;
    height
: 100%;
        width
: 100%;
    overflow
: auto;
    text-align
: center;
    display
: block;
}

/*---body我是作為最頂層容器的---所以它具備了我需要的所有東西,實現的效果是居中,我加上了display: block;雖然這個是一個默認屬性,但是我們不能保證所有瀏覽器都是默認,(如果是所有瀏覽器都默認的,我自己寫個瀏覽器的默認為none的給你耍)*/
#body_Div
{
    margin
: 0px auto;
    padding
: 0px;
    text-align
: left;
    width
: 1003px;
    height
:100%;
    overflow
:auto;
}

/*這個是核心層,多有的元素基本都是在這個層里的,這個層也具備了我想要的屬性,text-align: left; 因為在上層我把文本對齊成為居中,所以這個層我要把它還原為左對齊margin: 0px auto; 一般IE的CSS編寫者不會有這個auto值的,在IE會自動,但是在FF如果少了auto你將會發現FF里你的核心部分不是居中的。所以要做到通用,我們就必須要加上auto值,IE也支持auto值*/

第二:浮動對象,都擁有獨立的父DIV;關于這點。。有意見的人可能不少,持有的觀點就是,“你這樣做只會令DIV過分的多,過于復雜”,其實,我也不想這樣做,但是- -!IE對于浮動對象的{margin,padding}存在BUG所以為了減少一切可能的出錯,我唯有多花費一點代碼,說實在的我只是想它更健康。這個父DIV主要作用其實就是令到內部浮動對象更可控制,這個父DIV就是一個單純的容器DIV

第三:所有的浮動都需要閉合;這個有經驗的人都知道。。用完浮動你肯定需要把它閉合掉的,不閉合,可能不同瀏覽器在解析的時候會把你的浮動變成向下默認,(可以這樣解析:就是元素內部的子元素都默認具有浮動屬性)

第四:一個行向浮動如果超過3個那么請使用UL來實現浮動

第五:靈活使用類選擇,我個人的做法是,所有的id選擇器都是用于布局的,類選擇器都是用于呈現效果的,這樣做的好處就是,當你想要的效果出現問題的時候,更快速地找到錯誤。這個是我有意識的把“架構”和“內容”分離。

明鏡臺
posted on 2009-05-25 14:22 ^乔乔^ 阅读(2046) 评论(0)  编辑 收藏 引用 所属分类: CSS+DIV

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理