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
應該很清楚了吧？只要看懂了最外層的到裡面都是一樣的道理。
css學習3 css與div排版定位
1.排版常用標籤 a.塊級元素 b.行級元素，可以包含,反之不成立。2.盒子模型 乙個盒子由 content，padding，border，margin組成，盒子的實際寬度 content padding border margin。3.元素定位 a。position static，absolute...
HTML檔案中使用css和div
div標籤 在頁面中劃分一塊區域,要實現顯示效果,就要用到css樣式。style color aquamarine font size 100px border 1px solid red html div css div 同一屬性間的不同值用空格分開 不同屬性間用 分開 這種方式雖然簡便,但是ht...
使用CSS3的 media來編寫響應式的頁面
直接看乾貨 定義和使用 使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便...