如何用div css布局頁面

2021-06-29 06:31:42 字數 3655 閱讀 1477



如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div+css好像是火的不行了.各大知名站點都趕時髦似的把原來的**布局翻新成了div+css,並美其名曰"本站符合web2.0標準",以便讓別人覺得他們的**用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱們不參與這種無聊的爭論,學會它自己感覺一下不就清楚了麼?

實際上div布局並不是什麼高深的東西,如果你知道一點css就變得更簡單了.首先我要說明幾點:

1.這裡的div並不是我們所說的層,雖然他們的標籤都是,在這裡你可以把div理

解成乙個容器,它可以放文字,,**等等.

2.用div布局必須對頁面的結構進行準確的分析,當然用table也要分析頁面結構.用div要分清上下,左右,實際上div布局也只有上下,左右.分析結構要先整體再部分,先分析整體的頁面布局,例如我們一般的頁面是上(banner和導航),中(頁面主體內容,新聞等等),下(版權資訊塊)結構.

+------------------------------------+

|                                     |

|              header                  |

|                                     |

|------------------------------------|

|                                     |

|                                     |

|               midbody                |

|                                     |

|                                     |

|                                     |

|                                     |

|                                     |

|------------------------------------|

|                                     |

|              foot                    |

|                                     |

+------------------------------------+

於是我們可以把整個頁面放在乙個大div內,於是我們可以這樣來寫結構:

/*大容器放全部內容*/

/*上*/

/*中*/

/*下*/

解釋下上面的id是什麼東西,id後面的內容是當前div以及div內部的東西用的css,這個css可

以規定div的寬度,大小,位置以及內部文字的大小、樣式、顏色等等。

下面看下這幾個css的**:

/*頁面主容器樣式*/

#container

/*頁面頭*/

#header

/*頁面中間*/

#midbody

/*頁面底部*/

#foot

看完整體就要研究部分了,對於部分來說無非就是上下或左右結構了,例如下面的中間又分

為左右。

+------------------------------------+

|                                     |

|              header                  |

|                                     |

|------------------------------------|

|         |                            |

|         |        midbody              |

|         |                            |

|leftside|       rightside             |

|         |                            |

|         |                            |

|         |                            |

|         |                            |

|------------------------------------|

|                                     |

|              foot                    |

|                                     |

+------------------------------------+

於是div結構可寫成:

midbody中的leftside和rightside的css為:

#leftside

#rightside

如果是這樣的結構:

+------------------------------------+

|                                     |

|              header                  |

|                                     |

|------------------------------------|

|         | rightside                  |

|         |             rtop            |

|         |                            |

|leftside|---------------------------|

|         |             |rbottom        |

|         |     left     |     right      |

|         |             |               |

|         |             |               |

|------------------------------------|

|                                     |

|              foot                    |

|                                     |

+------------------------------------+

則div結構為:

css為:

#rtop

#rbottom

#left

#rightside

如何用div css布局頁面

如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合web2.0標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱...

如何用div css布局頁面 轉

如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合w3c標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱們不參...

如何用div css布局頁面 轉

如今web2.0炒的很厲害,先不去管它web2.0究竟是什麼東西,反正div css好像是火的不行了.各大知名站點都趕時髦似的把原來的 布局翻新成了div css,並美其名曰 本站符合w3c標準 以便讓別人覺得他們的 用的是最先進的技術.div布局真有那麼先進麼?這個問題仍在爭論之中.在這裡咱們不參...