---
# System prepended metadata

title: 切版 for Stat Class03
tags: [HTML5 + CSS3]

---

---
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)









