1、CSS+DIV網頁布局,主講人：21433 李夢凡,HTML 標簽,HTML 標簽,定義和用法 可定義文檔中的分區(qū)或節(jié)（division/section）。 標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，并且不使用任何格式與其關聯。 如果用 id 或 class 來標記 ，那么該標簽的作用會變得更加有效。,HTML 標簽,用法 是一個塊級元素。這意味著它的內容自動地開始一個新行。實際上，換行是 固有的唯一格式表現?？梢酝ㄟ^ 的 class 或 id 應用額外的樣式。 可以對同一個 元素應用 class 或 id 屬性，但是更常見的情況是只應用其中一種。這兩者的主要差異是，c

2、lass 用于元素組（類似的元素，或者可以理解為某一類元素），而 id 用于標識單獨的唯一的元素。,CSS內容介紹,CSS設置方式 CSS語法 樣式規(guī)則注釋和樣式規(guī)則優(yōu)先級 CSS的屬性分類介紹,CSS概述,CSS概念 CSS是Cascading Style Sheets 的縮寫，中文的意思是層 疊樣式表或級聯樣式表。,CSS功能簡介 CSS可以用來精確的控制頁面里每一個元素的字體樣式、背景、排列方式、區(qū)域尺寸、邊框等。使用CSS能夠簡化網頁的格式代碼，加快下載顯示的速度，外部鏈接樣式可以同時定義多個頁面，大大減少了重復勞動的工作量。,CSS設置方式,1、內聯樣式 這里是h1 特點：靈活，簡單

3、方便。,CSS設置方式,2、嵌入樣式 h1 font-family:宋體;font-size:12pt;color:blue 在這里使用了H1標記 特點：一個樣式可以在一個頁面多次應用。,CSS設置方式,3、外部樣式 在這里使用了H1標記 h1.css: h1 font-family:宋體;font-size:12pt;color:blue 特點：需要有一個外部的樣式表文件(.css)，可以為多個網頁所共同引用，即減少代碼，又可以做到統(tǒng)一頁面風格。,CSS語句格式,css語句格式如下: selector property: value (選擇符 屬性：值) 選擇符的作用：限制樣式作用的范圍 p

4、 font-size:15 當屬性的值是多個單詞組成時，必須在值上加引號 h1 font-family: Courier New 如果需要對一個選擇符指定多個屬性時，使用分號隔開。 p font-size:15;color:red,如何理解CSS盒子模型,12 / 12,CSS盒子模型,什么是CSS的盒子模式呢？為什么叫它是盒子？ 先說說我們在網頁設計中常聽的屬性名： 內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。,13 / 12,CSS盒子模型,不用CSS排版, ,14 / 12,CSS盒子模型,使用CSS排版, #photoList imgheight:80;width:100;margin:5px auto; ,CSS+DIV網頁設計與制作,16 / 12,CSS+DIV網頁設計與制作,17 / 12,CSS+DIV網頁設計與制作,第一步：規(guī)劃網站，將網站分為五個div 第二步：網頁布局與div浮動等 第三步：頁面內的基本文