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