--- title: 切版 for Stat Class03 tags: HTML5 + CSS3 --- > 【目次】 > [TOC] > > Reference Website： > 1. [前端工程師常用的 chrome 擴充功能](https://pjchender.blogspot.com/2016/08/chrome-chrome-extension.html) > 2. [彭彭的課程教學](https://training.pada-x.com/html-css-rwd-layout.htm) > 3. [OOCSS 結構與樣式、容器與內容(實際範例)](https://ithelp.ithome.com.tw/articles/10184944) > [OOCSS 容器與內容分離 (最佳實踐)](https://ithelp.ithome.com.tw/articles/10185012) > 4. [將各家瀏覽器的HTML顯示預設歸零 Reset.CSS](https://ithelp.ithome.com.tw/articles/10196528) https://meyerweb.com/eric/tools/css/reset/ --- # **11/27 Class03 簡單切版 (HTML5 + CSS3)** * 採用 CSS + div 的排板 * 先用 div 將網頁內容的各區塊包起來，再做 CSS 排板。 * 用 div 區塊標籤包起來的東西```<div>內容</div>```，瀏覽器會視為一個物件 * 步驟： 1. 先切出 header、content、footer 2. content內，再用div細切 (擺放內容) 4. css 排版 (包含div置中、調整顏色樣式) ## 瀏覽器如何顯示HTML ![](https://i.imgur.com/Dzak5pN.png) * 最終版 ```htmlmixed= <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="Style.css"> </head> <body> <div class="header"> <h1>我是範例</h1> </div> <div class="content"> <div class="menu"> <h2>前程四緊：</h2> <ul> <li>手頭緊</li> <li>眉頭緊</li> <li>衣服緊</li> <li>時間緊</li> </ul> </div> <div class="main"> <h1>爆笑經典名句</h1> <ol> <li>壓力始終來自於新台幣。</li> <li>問君能有幾副肝，恰似一串鞭炮爆不完。</li> <li>青春就像衛生紙。看著挺多的，用著用著就不夠了。</li> </ol> </div> </div> </body> </html> ``` * 將head內的style提出來放```Style.css``` ```css= body{ margin: 0px; /*外邊距 */ font-family: 微軟正黑體; } .header { width: 900px; /* 置中 => width: 900px; margin: 0px auto; */ border: 1px solid black; /* 養成好習慣！ */ display: block; /* 橫向整條填滿 */ margin: auto; text-align: center; } .content { /* 用來塞內容 */ width: 900px; /* 置中 => width: 900px; margin: 0px auto; */ border: 1px solid red; display: block; margin: auto; } .menu { border: 1px solid red; display: inline-block; /* "沒有" 橫向整條填滿 */ padding: 0px 30px; /* 內邊距 */ } .main { border: 1px solid red; display: inline-block; /* "沒有" 橫向整條填滿 */ padding: 0px 30px; /* 內邊距 */ } ``` --- # Bouns * [物件檔案模型 (DOM, document object model)](https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model) * 當一個.html檔被以瀏覽器開啟的時候，瀏覽器就會去解析該檔案的DOM。 * 指 document 中元素，對應到的 JavaScript 物件，我們就統稱為 dom。 * https://www.w3schools.com/js/js_htmldom.asp * https://css-tricks.com/dom/ ![](https://i.imgur.com/FMRpWWQ.gif)