利用CSS與Div標籤建立網頁版型- 網頁設計筆記 - Google Sites
文章推薦指數： 80 %
2.2 將既有網頁元素移到新的Div標籤中 選取網頁元素，在「插入Div標籤」交談窗中選擇「圍繞著選取範圍」項目 ... css語法→margin-left:auto ; margin-right:auto.
網頁設計筆記搜尋這個協作平台
首頁
首頁DreamweaverDreamweaver片段存放路徑HTML+CSSCSS3變形（過渡）CSS暫時筆記CSS編排筆記css選擇器(id和class)HTML5video利用CSS與Div標籤建立網頁版型圖片效果字型網頁連結電子郵件設定JaveScript貼文語法標籤命名範例網頁常用詞句協作平台地圖
HTML+CSS>
利用CSS與Div標籤建立網頁版型
1.Div區塊命名範例
header(表頭)
content
contentL(內容L)
contentR (內容R)
footer(頁腳)
contentL和 contentR是包在content區塊中
標籤結構如下：
建立區塊時，建議由上而下，由外而內的順序
2.「插入Div標籤」交談窗中，「插入」列視窗的選項差異
2.1以A區塊插入B區塊為例，圖解說明：
選擇「在標籤前」
A
B
選擇「在標籤開始後」
A
B
選擇「在標籤結尾前」
B
A
選擇「在標籤後」
B
A
2.2將既有網頁元素移到新的Div標籤中 選取網頁元素，在「插入Div標籤」交談窗中選擇「圍繞著選取範圍」項目3.Div標籤具有自成一排的特性，若想讓區塊並排，必須替區塊設定float（浮動）屬性：float（浮動）屬性 值描述left元素向左浮動。
right元素向右浮動。
none默認值。
元素不浮動，並會顯示在其在文本中出現的位置。
inherit規定應該從父元素繼承float屬性的值。
不過當區塊設有float屬性後，其它的區塊也可能產生浮動作用，若想讓浮動區塊恢復自成一排的特性，則必須替區塊設定clear（清除浮動）屬性：clear（清除浮動）屬性值描述left在左側不允許浮動元素。
right在右側不允許浮動元素。
both在左右兩側均不允許浮動元素。
none默認值。
允許浮動元素出現在兩側。
inherit規定應該從父元素繼承clear屬性的值。
4.如何製作置中的版面? 想讓版面永遠位於柳覽器的正中央，可利用margin屬性來達成目的，在CSS樣式切換到「方框」設定： 取消勾選：全部都一樣 Right:auto Left :auto css語法→margin-left:auto;margin-right:auto5.Div標籤的塊狀，文字超出的處理?
Comments
Signin|RecentSiteActivity|ReportAbuse|PrintPage|PoweredByGoogleSites
延伸文章資訊
- 1HTML DIV 標籤用法 - WebTech 網頁設計教學站
HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版，這都是因為CSS 技術的進步與普即所至，如果要靈活運用HTML DIV 標籤就要從最基本的語法開始 ...
- 2HTML <div> 區塊容器元素 - Fooish 程式技術
<div> 標籤(tag) 是用來當作容器(container)，用來包裹其他HTML，將HTML 文件的內容整理出不同獨立區塊(block)，用途是方便給CSS 做樣式排版或方便 ...
- 315個常用的HTML標籤與屬性基本介紹 - 自學成功道
HTML標籤一大堆，還有各種屬性要學習，常用的HTML標籤與屬性基本介紹給你，讓你先學會常用 ... 區塊元素<div>; 行內元素<span>; 常見的6個語意標籤.
- 4前端工程師必知:CSS標籤的應用(上)-Div篇
撰寫HTML 網頁時，可以用<div> 或<span> 標籤包住多種圖文、表格等元素，則 ... 來套用CSS 樣式，其語法格式會是「 <div class="CSS 的class 名稱">.
- 5<div> - HTML：超文本標記語言 - MDN Web Docs
HTML <div> 元素（或是HTML 文件區塊元素）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用class 或id 屬性）、或是共享 ...
