《div+css布局教程【技術專攻】》由會員分享，可在線閱讀，更多相關《div+css布局教程【技術專攻】（40頁珍藏版）》請在裝配圖網(wǎng)上搜索。
1、 DIV+CSS布局教程 The Tutorial of css+div 1專業(yè)課程div+css布局教程目錄：1.CSS基礎知識2.網(wǎng)頁布局常用屬性網(wǎng)頁布局常用屬性3.網(wǎng)頁布局實例網(wǎng)頁布局實例4.Web標準化思想與網(wǎng)頁重構 2專業(yè)課程專業(yè)課程一、CSS基礎知識 1.css簡介 2.css語法 3.選擇器 4.實用小技巧div+css布局教程3專業(yè)課程專業(yè)課程1、css簡介CSS 指層疊樣式表(Cascading Style Sheets)CSS語言是一種標記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行樣式通常存儲在樣式表中 外部樣式表通常存儲在 CSS 文件中 外部樣式表可以極大提高工作效率 4
2、專業(yè)課程專業(yè)課程2、css語法CSS 語法由三部分構成：選擇器、屬性和值：Pcolor:#ff0000;background:#000000;其中“p”,我們稱為選擇器，指明我們要給“p”定義樣式；樣式聲明寫在一對大括號“”中；Color和background稱為“屬性”，不通屬性之間用“；”分隔“#ff0000”和“#000000”是屬性的值5專業(yè)課程專業(yè)課程2、css語法幾點值得注意的地方：1、選擇器的分組可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。（有助于優(yōu)化樣式表，提高效率）例子：例子：h1color:green;h2color:gre
3、en;h3color:green;我們可以這樣寫：h1,h2,h3 color:green;樣式太臃腫了，該減肥了!6專業(yè)課程專業(yè)課程2、css語法幾點值得注意的地方：2、繼承及其問題根據(jù) CSS，子元素從父元素繼承屬性。例子：body font-family:Verdana,sans-serif;根據(jù)上面這條規(guī)則，站點的 body 元素將使用 Verdana 字體通過 CSS 繼承，子元素將繼承最高級元素（在本例中是 body）所擁有的屬性（這些子元素諸如 p,td,ul,ol,ul,li,dl,dt,和 dd）如果你不希望“Verdana,sans-serif”字體被所有的子元素繼承，又該
4、怎么做呢？比方說，你希望段落的字體是 Times。我們可以這樣寫：p font-family:Times,Times New Roman,serif;7專業(yè)課程專業(yè)課程2、css語法幾點值得注意的地方：3、層疊次序當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？樣式表分為：瀏覽器缺省設置 外部樣式表 內(nèi)部樣式表（位于 標簽內(nèi)部）內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）優(yōu)先級為：內(nèi)聯(lián)樣式（在 HTML 元素內(nèi)部）擁有最高的優(yōu)先權，這意味著它將優(yōu)先于以下的樣式聲明：標簽中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。8專業(yè)課程專業(yè)課程2、css語法幾點值得注意的地
5、方：4、高效的CSS（1）使用外聯(lián)樣式代替內(nèi)聯(lián)樣式和內(nèi)部樣式表不推薦使用：或者是：pcolor:red;(2)使用組選擇器 h1,h2,h3 color:green;(3)使用繼承 不推薦使用：tdfont-size:12px;pfont-size:12px;lifont-size:12px;應該這樣寫 bodyfont-size:12px;9專業(yè)課程專業(yè)課程2、css語法幾點值得注意的地方：（4）使用簡記屬性不推薦使用：margin-top:1px;margin-left:2px;margin-right:3px;margin-bottom:4px;應該這樣寫 margin:1px 3px
6、4px 2px;10專業(yè)課程專業(yè)課程3、選擇器1、CSS 派生選擇器 ul li font-weight:bold;定義ul內(nèi)li 標簽的樣式P span afont-weight:bold;定義段落下a標簽的樣式可以使用派生選擇器給一個元素內(nèi)的子元素定義樣式。兩個元素之間用空格表示。11專業(yè)課程專業(yè)課程3、選擇器2、id 選擇器 id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以“#”來定義。例子：#red color:red;#green color:green;注意：注意：id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。12專業(yè)課程專業(yè)課程3、選擇器2、類
7、選擇器 在 CSS 中，類選擇器以一個點號顯示：例子：.center text-align:center 注意：類名的第一個字符不能使用數(shù)字 13專業(yè)課程專業(yè)課程4、實用小技巧1、橋接樣式表方法在一些大型的項目中，由于樣式表文件過多，使用橋接樣式表可以便捷高效的管理這些樣式。14專業(yè)課程專業(yè)課程4、實用小技巧書寫方式為：import url(color.css);imporp url(type.css);引用的樣式表必須出現(xiàn)在其他規(guī)則之前,樣式表的頭部,這樣才能保證正常的效果.15專業(yè)課程專業(yè)課程4、實用小技巧2、關于ID和Class命名的規(guī)范 總體思想：語義化的命名16專業(yè)課程專業(yè)課程4、實
8、用小技巧個人推薦在開發(fā)過程中逐漸形成自己的命名規(guī)范，如header/footer/main/hd/bd/nav/box/mode等，使用連字符“-”如site-nav/quick-menu/secondaryContent/。但回到具體情況，不同的項目也應該根據(jù)具體情況對命名方式作出選擇，不同方式的命名規(guī)則應該結合使用，大型網(wǎng)站，如淘寶，更適合使用語義命名結合的方式，對于頁面的樣式修改，能快速敏捷地做出相應調(diào)整，對于制作，能快速地拼湊，而大部分宣稱型的單頁，個人更推薦使用結構化的命名方式，頁面制作者能方便快速地完成頁面，而不用多把時間陷近命名的考慮中，17專業(yè)課程專業(yè)課程二、網(wǎng)頁布局常用屬性
9、1.css盒子模型 2.css定位和浮動div+css布局教程18專業(yè)課程專業(yè)課程1、css盒子模型19專業(yè)課程專業(yè)課程1、css盒子模型在 CSS 中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸，但是會增加元素框的尺寸。假設框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。如果希望這個元素框達到 100 個像素，就需要將內(nèi)容的寬度設置為 70 像素#box width:70px;margin:10px;padding:5px;20專業(yè)課程專業(yè)課程1、css盒子模型CSS盒子模型是在網(wǎng)頁布局中必須用到的，其中常用的屬性有：
10、Margin（外邊距）,padding(內(nèi)邊距)分別有上下左右四個屬性，top bottom left right例子：h1 margin:10px 0px 15px 5px;順序為上、右、下、左順時針旋轉(zhuǎn) Padding屬性的寫法與margin一樣。21專業(yè)課程專業(yè)課程1、css盒子模型需要注意的地方：CSS 外邊距合并外邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發(fā)生合并的外邊距的高度中的較大者。22專業(yè)課程專業(yè)課程1、css盒子模型當一個元素包含在另一個元素中時（假設沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發(fā)生合并。請看下
11、圖：23專業(yè)課程專業(yè)課程2、css定位和浮動CSS 為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。CSS的定位和浮動是控制布局的重要方法。通過定位和浮動能夠解決在表格時代往往需要代碼才能完成的布局。有效的減少了代碼量，使得頁面結構更加清晰，代碼更加精簡。24專業(yè)課程專業(yè)課程2、css定位和浮動我們首先必須了解一個概念：“塊級元素”，“行內(nèi)元素”常見的塊級元素有：div,ul,p,h1常見行內(nèi)元素有：span,strong行內(nèi)元素就是在一行內(nèi)的元素，只能放在行內(nèi)；塊級元素，就是一個四方塊，可以放在頁面
12、上任何地方。塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。（我們可以利用這個特性對不同的塊進行不同的排列，這樣就形成了網(wǎng)頁的布局。）在網(wǎng)頁布局中，我們使用塊級元素進行版面的搭建，使用行內(nèi)元素對塊級元素里面的內(nèi)容進行修飾25專業(yè)課程專業(yè)課程2、css定位和浮動例子：abcdefg這里的div為塊級元素，span為行內(nèi)元素。我們可以把塊級元素比喻為一個大的容器，而行內(nèi)元素就是其中的某一個小容器。了解了塊級元素與行內(nèi)元素之后，我們就可以利用定位和浮動屬性對塊級元素進行排列布局了。26專業(yè)課程專業(yè)課程2、css定位和浮動1，定位divposition:r
13、elative;/相對定位divposition:absolute;/絕對定位CSS 相對定位 概念：元素沒有脫離文檔流，還是普通流定位模型的一部分，會對文檔流中其它元素布局產(chǎn)生影響。可以理解為：設置為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所占的空間仍保留。27專業(yè)課程專業(yè)課程2、css定位和浮動1，定位例子：#box_relative position:relative;left:30px;top:20px;我們看見，框2脫離原來的位置，相對與原占位空間偏移了一定的距離。但是框2原本的占位空間沒有消失。所以相對定位不會對布局格式產(chǎn)生影響。（實例演示）28專業(yè)課程
14、專業(yè)課程2、css定位和浮動1，定位絕對定位概念：設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框?？梢岳斫鉃椋航^對定位的元素的位置相對于最近的已設置相對定位的父元素，如果文檔中的元素沒有已設置為相對定位的父元素，那么它的位置相對于最初的包含塊（body的左上角）。29專業(yè)課程專業(yè)課程2、css定位和浮動1，定位絕對定位例子：#box_relative position:absolute;left:30
15、px;top:20px;絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同。（實例演示）30專業(yè)課程專業(yè)課程2、css定位和浮動1，定位絕對定位提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素?？梢酝ㄟ^設置 z-index 屬性來控制這些框的堆放次序?？偨Y:相對定位的元素不會脫離文檔流，占用文檔流的空間.絕對定位的元素脫離文檔流，偏移不影響文檔流中的其它元素.絕對定位的元素以最近的定位祖先元素為參照物。絕對定位應用容器在瀏覽器中垂直居中31專業(yè)課程專業(yè)課程2、css定位和浮動2，浮動概念：浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框
16、的邊框為止。屬性：float：left;float:right;用法：請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：32專業(yè)課程專業(yè)課程2、css定位和浮動2，浮動網(wǎng)頁布局中的應用：在網(wǎng)頁布局中，浮動是必須使用到的方法。我們常常利用浮動使指定的塊移動到我們需要的地方。比如兩列，或者三列的布局。比如橫向的菜單等等實例：如何讓三列橫向排列。33專業(yè)課程專業(yè)課程2、css定位和浮動2，浮動浮動的兄弟：清理浮動屬性：clear;clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。為什么要用到清理浮動
17、，我們來看一個例子。34專業(yè)課程專業(yè)課程三、網(wǎng)頁布局實例 div+css布局教程QQ for mac 頁面分析35專業(yè)課程專業(yè)課程四、web標準化思想與網(wǎng)頁重構 所謂web標準化，有兩層含義。一、就是W3C系列規(guī)范，html4.0，xhtml1.0，css2.1，ECMAScript，DOM,XML等等，作為一個頁面工程師，要學會熟讀標準，認識和了解標準。W3C標準就是讓頁面在不同的終端都可以運行，讓使用各種終端的用戶都能瀏覽你的頁面，也就是跨越平臺，獲得更大眾化的用戶的使用。div+css布局教程36專業(yè)課程專業(yè)課程四、web標準化思想與網(wǎng)頁重構 二、結構，表現(xiàn)，行為三者的分離。結構是嚴格的
18、語義化HTML文檔編寫，CSS是HTML頁面的視覺處理，行為是通過用戶行為的觸發(fā)去動態(tài)改變頁面，內(nèi)容修改，功能的完成等等。分離不是簡單的文件的分離，而是嚴格的分工的分離，不要用table去布局，那是css的事情，不要用hx去調(diào)整字體大小，那也是CSS的事情。結構=內(nèi)容+語義化的解釋內(nèi)容。表現(xiàn)=頁面內(nèi)容的呈現(xiàn)效果。行為=用戶觸發(fā)去改變內(nèi)容和HTML和CSS。div+css布局教程37專業(yè)課程專業(yè)課程四、web標準化思想與網(wǎng)頁重構 網(wǎng)頁重構，從語義化標簽開始！所謂語義化標簽，就是讓頁面中每一個標簽都有存在的意義。各盡其用，比如h1定義標題，p用來定義段落，ul為無序列表,table的存在就是為了標記列表的數(shù)據(jù)。所以并非在布局中無論什么情況都用div，html語言在設計的時候并不只有div一個標簽，我們之所以喜歡使用div布局，是因為div的屬性有助于方便的控制布局。div+css布局教程38專業(yè)課程專業(yè)課程四、web標準化思想與網(wǎng)頁重構 所以網(wǎng)頁重構不等于div+css 重構小提示：1、減少使用div標簽;2、應該用div定義頁面的主要框架結構，比如頭部、內(nèi)容、邊欄和底部等結構;3、內(nèi)容應該使用語義化的html標簽，而不是div標簽;div+css布局教程39專業(yè)課程專業(yè)課程 謝謝大家！希望大家在網(wǎng)頁重構這條并不平坦的道路上越走越遠 Thank you!40專業(yè)課程
div+css布局教程【技術專攻】
