<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<header></header>
<nav></nav>
<article>
<section>
</section>
</article>
<footer></footer>
</body>
</html>
- 可以省略標記的元素
- 不允許寫結束標記的元素
- area、base、br、col、command、embed、img、hr、keygen、link、meta、param、source、track、input、wbr
- 可以省略結束標記的元素
- dd、dt、li、p、optgroup、option、rt、rp、thread、tfoot、tr、td、th
- 具有布林值的屬性
- 不寫屬性，代表屬性為False
- 只寫屬性，不寫屬性值，代表屬性為True
- 屬性值=屬性名稱，代表屬性為True
- 屬性值=空字串，代表屬性為True
- 省略引號
- 當屬性值不包括空字串、”<”、”>”、”=”、單引號、雙引號等字元時，屬性值兩邊的引號可以省略
vscode extensions for html:
1.LiveSever
2.ChineseLorem
HTML 書籤超連結
------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
article {
width: 960px;
margin: auto;
}
nav {
width: 960px;
margin: auto;
text-align: center;
background-color: #000;
}
nav a {
color: #fff;
text-decoration: none;
display: inline-block;
padding: 6px 40px;
font-size: 18px;
transition: 0.5s;
}
nav a:hover {
background-color: #fa0;
}
</style>
</head>
<body>
<article>
<header>
<h1>書籤超連結</h1>
<nav>
<ul>
<li><a href="#A">AAAA</a>
<a href="#B">BBBB</a>
<a href="#C">CCCC</a>
</li>
</ul>
</nav>
</header>
<section id="A">
<h1>AAAAAAAAA</h1>
<p>物理其實樣子發佈時間競爭如同發現分為我只重新推出生產強化，信號看法群發第一章中學，因素你就，電子快速註冊上午正常，其中長沙文章會有採用具體股市不住解決軍隊價值溫度工業吃螺絲，北方請求電池歡迎只需道理這樣限制維修找到，文章日本會員有的，參觀小遊戲高中法律責任，無比植物相關內容，家庭購物奇蹟予以學歷在這裡臺灣民眾適用，做到財產，魔獸西部得分往往行動型號應用把握權利，定位商務吃螺絲相關南方，反饋值得這個需求，醫生初音行業，活動玩具檢查一段凱文用戶誠信論壇，究竟說話山西咱們心裡塑膠小學他不在這冠軍都會事實，蒐集桌面所有人某種批准，才是圖片加強出口但在責任編輯，期待指出告知不好意思活動智能友情連結名單決策這麼多，及時男性，奧客告訴優化網際網路，商業調節，同志代表加強系統每天多少配套再說，不得轉變整體命令攝影認真甚至夫人堅持魔法，翻譯相冊當年，他還稿件內部周圍周邊，行政標準漫畫聊天五年比例成果儘快裝備有機會修改，相機相冊尋求，誘惑升級高雄飲食吃飯供應醫藥就要瀏覽都不利潤加拿大，郵件天天身體因而損失發佈日期只不過作戰電話行為資料空調天堂，斗內想法通用房東確保已被，各項修改夏天發貼網易上班選手在於股市新鮮緊張完整公斤雙手，簽名每年打算聯合真實性人氣商業顯卡投資者電視劇動物點這裡，幾個場所圖象還在一句話剛才榮譽很多人，基本分為日月潭服飾，日前溫度百姓持續周圍出版社相當將會找到當時，房東方案附件榮譽按照國外今年服飾運動尚未正式，一定會是否對象理由，簽名我對，您現在回事厲害蔬菜招聘具有經理文本小子，手機鈴聲手段造成緩緩網遊是怎麼品質，修改逐漸說法推坑王等人力道，到來發送精品第二次浪漫或許西方鬱悶，微軟小組資本祝福一下文學來說，市場價資產意識，贏得報價相信你怎不來我的汽車出現在客服夫妻首次，文章住宅電源應該數碼相機，人物獲得避免來源我看圖書意外恐怕它是各級此外，注意兒子溫暖也就是東京支付將軍內容，種種作品自信等等時代，沒什麼空氣發言事實人事接到春天，顯卡差距進入目光中文立場嘿嘿比賽，自身戰爭創作引發，經濟發展追求小區平方米，所以高級同志羅東電腦你自己時間微軟收購都不結合淡淡工藝，一座他人非常大約商城，多年他就忍不住教師可能後來也會員工由此此處檢驗人數，分為售價指南貫徹得到但在所說剛才之一一大應用手續，地球能源及其案例記者幾天報名商機，屬於直到招標眼光電子新人給你您是策劃事業才會引導，執行。
</p>
</section>
<section id="B">
<h1>BBBBBBBB</h1>
<p>B物理其實樣子發佈時間競爭如同發現分為我只重新推出生產強化，信號看法群發第一章中學，因素你就，電子快速註冊上午正常，其中長沙文章會有採用具體股市不住解決軍隊價值溫度工業吃螺絲，北方請求電池歡迎只需道理這樣限制維修找到，文章日本會員有的，參觀小遊戲高中法律責任，無比植物相關內容，家庭購物奇蹟予以學歷在這裡臺灣民眾適用，做到財產，魔獸西部得分往往行動型號應用把握權利，定位商務吃螺絲相關南方，反饋值得這個需求，醫生初音行業，活動玩具檢查一段凱文用戶誠信論壇，究竟說話山西咱們心裡塑膠小學他不在這冠軍都會事實，蒐集桌面所有人某種批准，才是圖片加強出口但在責任編輯，期待指出告知不好意思活動智能友情連結名單決策這麼多，及時男性，奧客告訴優化網際網路，商業調節，同志代表加強系統每天多少配套再說，不得轉變整體命令攝影認真甚至夫人堅持魔法，翻譯相冊當年，他還稿件內部周圍周邊，行政標準漫畫聊天五年比例成果儘快裝備有機會修改，相機相冊尋求，誘惑升級高雄飲食吃飯供應醫藥就要瀏覽都不利潤加拿大，郵件天天身體因而損失發佈日期只不過作戰電話行為資料空調天堂，斗內想法通用房東確保已被，各項修改夏天發貼網易上班選手在於股市新鮮緊張完整公斤雙手，簽名每年打算聯合真實性人氣商業顯卡投資者電視劇動物點這裡，幾個場所圖象還在一句話剛才榮譽很多人，基本分為日月潭服飾，日前溫度百姓持續周圍出版社相當將會找到當時，房東方案附件榮譽按照國外今年服飾運動尚未正式，一定會是否對象理由，簽名我對，您現在回事厲害蔬菜招聘具有經理文本小子，手機鈴聲手段造成緩緩網遊是怎麼品質，修改逐漸說法推坑王等人力道，到來發送精品第二次浪漫或許西方鬱悶，微軟小組資本祝福一下文學來說，市場價資產意識，贏得報價相信你怎不來我的汽車出現在客服夫妻首次，文章住宅電源應該數碼相機，人物獲得避免來源我看圖書意外恐怕它是各級此外，注意兒子溫暖也就是東京支付將軍內容，種種作品自信等等時代，沒什麼空氣發言事實人事接到春天，顯卡差距進入目光中文立場嘿嘿比賽，自身戰爭創作引發，經濟發展追求小區平方米，所以高級同志羅東電腦你自己時間微軟收購都不結合淡淡工藝，一座他人非常大約商城，多年他就忍不住教師可能後來也會員工由此此處檢驗人數，分為售價指南貫徹得到但在所說剛才之一一大應用手續，地球能源及其案例記者幾天報名商機，屬於直到招標眼光電子新人給你您是策劃事業才會引導，執行。
</p>
</section>
<section id="C">
<h1>CCCCCCCC</h1>
<p>C物理其實樣子發佈時間競爭如同發現分為我只重新推出生產強化，信號看法群發第一章中學，因素你就，電子快速註冊上午正常，其中長沙文章會有採用具體股市不住解決軍隊價值溫度工業吃螺絲，北方請求電池歡迎只需道理這樣限制維修找到，文章日本會員有的，參觀小遊戲高中法律責任，無比植物相關內容，家庭購物奇蹟予以學歷在這裡臺灣民眾適用，做到財產，魔獸西部得分往往行動型號應用把握權利，定位商務吃螺絲相關南方，反饋值得這個需求，醫生初音行業，活動玩具檢查一段凱文用戶誠信論壇，究竟說話山西咱們心裡塑膠小學他不在這冠軍都會事實，蒐集桌面所有人某種批准，才是圖片加強出口但在責任編輯，期待指出告知不好意思活動智能友情連結名單決策這麼多，及時男性，奧客告訴優化網際網路，商業調節，同志代表加強系統每天多少配套再說，不得轉變整體命令攝影認真甚至夫人堅持魔法，翻譯相冊當年，他還稿件內部周圍周邊，行政標準漫畫聊天五年比例成果儘快裝備有機會修改，相機相冊尋求，誘惑升級高雄飲食吃飯供應醫藥就要瀏覽都不利潤加拿大，郵件天天身體因而損失發佈日期只不過作戰電話行為資料空調天堂，斗內想法通用房東確保已被，各項修改夏天發貼網易上班選手在於股市新鮮緊張完整公斤雙手，簽名每年打算聯合真實性人氣商業顯卡投資者電視劇動物點這裡，幾個場所圖象還在一句話剛才榮譽很多人，基本分為日月潭服飾，日前溫度百姓持續周圍出版社相當將會找到當時，房東方案附件榮譽按照國外今年服飾運動尚未正式，一定會是否對象理由，簽名我對，您現在回事厲害蔬菜招聘具有經理文本小子，手機鈴聲手段造成緩緩網遊是怎麼品質，修改逐漸說法推坑王等人力道，到來發送精品第二次浪漫或許西方鬱悶，微軟小組資本祝福一下文學來說，市場價資產意識，贏得報價相信你怎不來我的汽車出現在客服夫妻首次，文章住宅電源應該數碼相機，人物獲得避免來源我看圖書意外恐怕它是各級此外，注意兒子溫暖也就是東京支付將軍內容，種種作品自信等等時代，沒什麼空氣發言事實人事接到春天，顯卡差距進入目光中文立場嘿嘿比賽，自身戰爭創作引發，經濟發展追求小區平方米，所以高級同志羅東電腦你自己時間微軟收購都不結合淡淡工藝，一座他人非常大約商城，多年他就忍不住教師可能後來也會員工由此此處檢驗人數，分為售價指南貫徹得到但在所說剛才之一一大應用手續，地球能源及其案例記者幾天報名商機，屬於直到招標眼光電子新人給你您是策劃事業才會引導，執行。
</p>
</section>
</body>
</html>
WebStorage
------------------------------------------------------------------
HTML
~~~~~~
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function onLoad() {
outputArea.value = window.localStorage.remainingSpace;
btnSave.addEventListener("click", saveToStorage);
btnLoadFromLocalStorage.addEventListener("click", loadFromLocalStorage);
btnLoadFromSessionStorage.addEventListener("click", loadFromSessionStorage);
}
function saveToStorage() {
//window.localStorage.setItem("UserData", inputArea.value);
//localStorage.setItem("UserData", inputArea.value);
//localStorage["UserData"] = inputArea.value;
localStorage.UserData = inputArea.value;
sessionStorage.UserData = inputArea.value;
}
function loadFromLocalStorage() {
outputArea.value = localStorage["UserData"];
}
function loadFromSessionStorage() {
outputArea.value = sessionStorage["UserData"];
}
</script>
</head>
<body onload="onLoad()">
Input: <textarea id="inputArea"></textarea>
Output: <textarea id="outputArea"></textarea>
<br /><br />
<button id="btnSave">儲存至 local 與 session storage</button>
<button id="btnLoadFromLocalStorage">從 local storage 載入資料</button>
<button id="btnLoadFromSessionStorage">從 session storage 載入</button>
</body>
</html>
canvas繪製圖形
------------------------------------------------------------------
html
~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="script.js" charset="gb2312"></script>
</head>
<body onload="draw('canvas');">
<h1>canvas</h1>
<canvas id="canvas" width="400" height="300" />
</body>
</html>
javascript
~~~~~~
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
context.fillStyle = "red";
context.strokeStyle = "blue";
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeRect(50, 50, 100, 100);
}
javascript
~~~~~~
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null)
return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for (var i = 0; i < 10; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255,0,0,0.25)';
context.fill();
}
}
參考資源 CSScoke
------------------------------------------------------------------04Day
code:
~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML-4</title>
</head>
<!-- 這是HTML註解 ctrl+/ 加、去註解皆同 -->
<!-- 樣板 !+Tab -->
<body>
<!-- h1+h2+h3+Tab 兄弟姊妹層-->
<h1>大標題</h1>
<h2>副標題</h2>
<h3>小標題</h3>
<!-- h$[class="item$"]{標題$}*3+Tab -->
<h1 class="item1">標題1</h1>
<h2 class="item2">標題2</h2>
<h3 class="item3">標題3</h3>
<!-- h$.item${標題$}*3+Tab -->
<h1 class="item1">標題1</h1>
<h2 class="item2">標題2</h2>
<h3 class="item3">標題3</h3>
<!-- nav>a[href="#"]{選單$$}*3+Tab -->
<nav>
<a href="#">選單01</a>
<a href="#">選單02</a>
<a href="#">選單03</a>
</nav>
<!-- p>lorem60+Tab -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos quasi excepturi sunt tempora repellendus modi iste
perferendis, provident ad assumenda quam distinctio quis ducimus unde accusantium, iusto delectus deleniti.
Consequatur totam molestiae porro vel fugit. Ea aliquam voluptatem consequatur. Odit tempora velit accusamus
impedit sunt quos aperiam eius cumque. Autem, minima ex. Soluta reiciendis, cum necessitatibus quaerat veniam
expedita laboriosam!</p>
<!-- ul>li*5 Alt+Mouse點選，多處選取後再統一輸入 -->
<ul>
<li>清單</li>
<li>清單</li>
<li>清單</li>
<li>清單</li>
<li>清單</li>
</ul>
<!-- ol>li.item$$*5{步驟$$} -->
<ol>
<li class="item01">步驟01</li>
<li class="item02">步驟02</li>
<li class="item03">步驟03</li>
<li class="item04">步驟04</li>
<li class="item05">步驟05</li>
</ol>
<!-- figure>img+figcaption+Tab -->
<figure>
<img src="https://fakeimg.pl/300/" alt="替代文字">
<figcaption>圖片說明</figcaption>
</figure>
<!-- figure>img[src="https://fakeimg.pl/350"]*3+figcaption{圖片說明}+Tab -->
<figure>
<img src="https://fakeimg.pl/350" alt="">
<img src="https://fakeimg.pl/350" alt="">
<img src="https://fakeimg.pl/350" alt="">
<figcaption>圖片說明</figcaption>
</figure>
<!-- table>tr*5>td{data}*3+Tab 子層 -->
<table border="1">
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</table>
<!-- (table>tr>td)*2+Tab -->
<table>
<tr>
<td></td>
</tr>
</table>
<table>
<tr>
<td></td>
</tr>
</table>
</body>
</html>
網頁裝潢師CSS
------------------------------------------------------------------05Day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>認識CSS 5day</title>
<!-- 選取器{
屬性:屬性質;
...
}
自學網:
MDN、W3schools
-->
<style>
/* css style 內 加與取消註解 先選取範圍再 Alt + Shift + a */
h1 {
/* c#00f */
color: #00f;
/* fz50 */
font-size: 50px;
/* bgc#0f0 */
background-color: #0f0;
}
p {
color: #f00;
background-color: #eee;
}
/* . class Selector */
.special {
color: #fff;
background-color: #004;
}
</style>
</head>
<body>
<!-- h1>{Title}+Tab -->
<h1>Title</h1>
<!-- (p>lorem60)*6+Tab -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur eveniet necessitatibus cumque vitae, minima
ab magnam laudantium nemo explicabo dolorum nulla deleniti qui aliquam molestias ad fugiat excepturi illo neque
iste facere. Molestiae earum non consectetur illo, omnis numquam facere corrupti libero eum molestias magni
repellat officia necessitatibus cum soluta ipsum aut fugit deleniti. Sed nisi facere itaque consectetur cumque.
</p>
<p class="special">Nam vitae optio quo vero tenetur esse architecto? Odio temporibus veritatis, voluptate debitis
recusandae
explicabo sequi deserunt blanditiis facere consequatur asperiores! Ex aliquam eum magnam ducimus totam provident
suscipit officiis magni dolorem praesentium incidunt, nemo voluptates ab corrupti ad consectetur. Impedit
dignissimos recusandae accusantium eius amet mollitia architecto iusto repellat tempore voluptatem! Soluta quo
sapiente unde quaerat praesentium ipsam eos.</p>
<p>Labore, impedit quos sint exercitationem quidem quod laborum expedita officiis inventore corrupti excepturi quae
incidunt ratione dicta! Aspernatur, tempore? Ducimus porro repellendus, est quasi corporis quam earum et
similique vero eos dolorem labore in quisquam deserunt laboriosam sequi tempora dicta animi consequatur quas.
Dignissimos dolor libero unde architecto doloremque laboriosam, et molestias, accusantium recusandae, ratione
esse asperiores animi? Hic, ipsa!</p>
<p>Excepturi similique fuga, amet ex quasi sint necessitatibus doloribus temporibus, perspiciatis repudiandae sed
quidem sapiente obcaecati? Ullam non dolore odit, iste architecto eum ratione minima id, hic at magnam facere
quos mollitia provident placeat? Numquam molestiae beatae modi exercitationem odit provident sequi nam
recusandae laborum veritatis eligendi explicabo nisi impedit et iure cumque, accusamus, consectetur unde velit
placeat vitae. At!</p>
<p>Sed quidem ducimus corrupti pariatur accusantium qui culpa, asperiores, doloribus, amet perspiciatis blanditiis.
Officia illo illum amet officiis ducimus quaerat, aspernatur unde doloremque ratione quos vel iure suscipit
accusamus quidem corrupti nesciunt porro blanditiis fuga facilis eos consequatur nostrum. Natus iusto, accusamus
ab voluptates odit at minus adipisci consectetur libero distinctio totam magni numquam, laborum quidem? Possimus
nam repudiandae nesciunt?</p>
<p>Quidem consequatur magni dolore adipisci ab exercitationem sit facilis minima. Dolore consectetur facilis
officiis in illum praesentium molestias non, ab veritatis cum error iusto consequatur animi exercitationem
ratione ullam architecto? Quaerat cumque amet sint quam sit, quia reiciendis consequuntur, veniam eos blanditiis
dignissimos inventore. Aliquam repudiandae alias aut dolores? Id, debitis quo hic repudiandae soluta voluptatem
nihil aliquid dolor! Eveniet.</p>
</body>
</html>
CSS撰寫位置
------------------------------------------------------------------06Day
0.6.html
#################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS撰寫位置</title>
<link rel="stylesheet" href="06.css">
</head>
<body>
<h1>Title</h1>
<!-- nav>a[href="#"]{超連結$}*5 -->
<nav>
<a href="#">超連結1</a>
<a href="#">超連結2</a>
<a href="#">超連結3</a>
<a href="#">超連結4</a>
<a href="#">超連結5</a>
</nav>
<!-- (p>lorem)*2 -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum amet atque ipsam molestias, soluta harum.
Voluptatum totam at voluptate hic impedit eveniet laborum quos nihil tempora, voluptas atque assumenda
voluptatem?</p>
<p>Sunt dolores, enim velit amet laudantium cum explicabo earum fuga labore cumque possimus iure pariatur illum
nobis beatae quia? Dolorum deleniti eligendi, quia itaque sint consequuntur ab quibusdam molestias nostrum?</p>
</body>
</html>
06.css
#################
/* rest */
*{
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
h1{
/* c#fa0 */
color: #fa0;
/* fz60 */
font-size: 60px;
}
nav{
/* bgc#000 */
background-color: #000;
/* tac */
text-align: center;
/* fz0 */
font-size: 0;
}
nav a{
/* c#fff */
color: #fff;
/* tdn */
text-decoration: none;
/* dib */
display: inline-block;
/* p6px20 */
padding: 6px 20px;
/* fz16 */
font-size: 16px;
/* bgc#000 */
background-color: #000;
/* transition.5s */
transition: 0.5s;
}
nav a:hover{
/* bgc#fa0 */
background-color: #fa0;
}
怎麼學CSS
------------------------------------------------------------------07Day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* w320 */
width: 320px;
/* h400 */
height: 400px;
/* ??? */
border: 2px solid #f00;
/* p10-20 */
padding: 10px 20px;
/* bgc#ffa */
background-color: #ffa;
/* c#fa0 */
color: #fa0;
/* fz22 */
font-size: 22px;
/* lh1.5 */
line-height: 1.5;
}
div a{
/* tdn */
text-decoration: none;
}
</style>
</head>
<body>
<!-- div>a[href="#"]{Google}+p>lorem -->
<div>
<a href="#">Google</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam beatae, magni cupiditate, dolorum tempora harum tempore odit modi deleniti voluptates minima eveniet, earum labore numquam qui soluta exercitationem optio sit?</p>
</div>
</body>
</html>
區塊尺寸計算
------------------------------------------------------------------08Day
08_1.html
#################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
div {
/* w300 */
width: 300px;
/* border:10-solid-#666 */
border: 10px solid #666;
/* p20 */
padding: 20px;
/* m20 */
margin: 20px;
/* bgc#aaa */
background-color: #aaa;
}
</style>
</head>
<body>
<div>
<!-- ctlorem300 -->
對他有利於作戰他是，計劃熱門品質附件環節受傷專業容易收益可是高雄掌握進入，預期註冊時間大陸既然幹什麼，設備大約聯合要在前進看出必然評價宣佈每頁友情連結無線，保持僅供期間吃飯年輕成熟圖書館校長另一個，經過古代，方便女朋友一套其它住了名單不怕自動廣場採購競爭隨便此次普通，主任聯盟產品一樣線上全新肌膚不滿危險逐漸孩子病人之間，引發不需要種類體育，著名空氣人大出去專家選單不去她們就算，你的及其要在對她貫徹第一章感到，笑道出版社浪漫上去文化花園上帝帳號房價探索畫面哪裡，美容常見委員會批發，上一頁不說轉載，內心驅動靈活遺憾體內以往無奈，夢想加速通用既然共享高雄感覺到一半程式來自調節經驗，工廠在這，建立轉。
</div>
</body>
</html>
08_2.html
#################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
width: 0;
padding: 0;
}
.box {
width: 600px;
/* ???沒效果 */
background-color: rgb(166, 231, 14);
/* 置中 */
margin: auto;
}
.column {
width: 158px;
background-color: #aaa;
/* fl */
float: left;
margin: 10px;
padding: 10px;
border: 1px solid rgb(235, 11, 11);
}
</style>
</head>
<body>
<!-- div[class="box"]>div[class="column"]*3>lorem ???ctlorem不行-->
<div class="box">
<div class="column">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestiae, unde, saepe eligendi
velit consequuntur obcaecati quas suscipit sequi recusandae aperiam dignissimos doloribus, perferendis sunt
ex. Nemo minus reprehenderit velit fuga.</div>
<div class="column">Quisquam laudantium inventore error alias. Corporis itaque ab enim esse? Assumenda expedita
sed aliquid nam nesciunt impedit doloremque? Iste laborum reiciendis molestias corporis doloribus atque
nihil debitis mollitia saepe eos!</div>
<div class="column">Ratione minima veritatis laudantium obcaecati corporis modi fugiat repellat ducimus
asperiores quidem nam odit quam vero eaque saepe porro maiores eligendi voluptas laborum, rem, voluptatem
est omnis. Qui, ipsam debitis!</div>
</div>
</body>
</html>
Float：文繞圖、多欄版面
------------------------------------------------------------------9Day
09_1.html
#################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float_文繞圖</title>
<style>
.float_img {
/* fl */
float: left;
/* m0-20-10-0 */
/* margin: 10px;上下左右
margin: 0 20px;上下、左右
margin: 0 20px 10px;上、左右、下
margin: 0 20px 10px 0;上右下左 */
margin: 0 20px 10px 0;
}
</style>
</head>
<body>
<!-- figure>img.float_img[src="https://fakeimg.pl/350x200/aaaaaa/0f0"] -->
<figure><img src="https://fakeimg.pl/350x200/aaaaaa/0f0" alt="" class="float_img"></figure>
<p>
<!-- ctlorem500 -->
看了相同告訴心中工程意思對於思路上網及其，簡直全國親自相冊命令請點擊核心機場一口英語您的神話身影太陽，教授只是直接往往運動諾基亞對你鎖定權益公告，統計授權知名號碼暴力網頁班新型石油充分而且情節浙江嘗試，春天靈活裝備中學感覺生日這段之間三大，怎麼會開發元素，進來幾年，畢業媒體興奮一面太陽細胞文明輸入人力促進不怕失敗，人間一年病毒輔助無限這次你們的此外有什麼試試就好鄉民們，產權規劃收到網際網路就能每個人，性格舉辦網易網頁我去頁面時期成就清楚尋求練習就會草魚，請教我就將會手機鈴聲交給。
</p>
</body>
</html>
09_2.html
#################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Float_多欄版面</title>
<style>
* {
/* m0 */
margin: 0;
/* p0 */
padding: 0;
}
.container {
/* w960 */
width: 960px;
/* bgc#fae */
background-color: #fae;
/* m:a */
/* 置中、左右一樣 */
margin: auto;
}
.col{
width: 300px;
/* h200 */
height: 200px;
/* bgc#ccc */
background-color: #ccc;
/* m10 */
margin: 10px;
/* col(子層)浮動float後，container(父層)，就沒東西撐開，所以背景色就沒看見 */
/* fl */
float: left;
}
.clear_fix{
/* cl:b */
clear: both;
height: 10px;
/* bgc#f00 */
background-color: #f00;
}
</style>
</head>
<body>
<!-- div.container>div.col*3 -->
<div class="container">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<!-- clear_fix沒有float，可以撐開父層(container) -->
<div class="clear_fix"></div>
</div>
</body>
</html>
inline
如：<a>
設定寬高沒用，會被疊住或無法撐起父層，可與其它並排
block
如：<h>、<p>、<div>
設定寬高有用，獨自佔有整個列，不與其它並排
inline-block
inline與block綜合體，設定寬高有用且可與其它並排
------------------------------------------------------------------10Day
HTML
~~~~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.menu {
background-color: #fa0;
text-align: center;
font-size: 0;
}
.menu a {
color: #fff;
font-size: 18px;
text-decoration: none;
padding: 10px 20px;
/*<a>本是inline，所以padding設定高還是無法撐開父層menu的高 */
/* dib */
display: inline-block;
background-color: #f00;
}
.menu a:hover {
background-color: #000;
}
</style>
</head>
<body>
<div class="menu">
<!-- 因為<a>前有一空白字元所以兩個<a></a>間有一空白，可將.menu的font-size=0 -->
<a href="#">Link01</a>
<a href="#">Link02</a>
<a href="#">Link03</a>
<a href="#">Link04</a>
<a href="#">Link05</a>
<a href="#">Link06</a>
</div>
</body>
</html>
box-size
------------------------------------------------------------------11Day
html
~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
width: 960px;
/* m:a */
margin: auto;
background-color: #ffa;
}
.clearfix {
width: 100%;
/* 藉此撐開父層wrap */
/* cl */
clear: both;
}
.item {
width: 300px;
border: 1px solid #aaa;
margin: 10px;
padding: 10px;
/* 每一個item總寬度一定=300，所有item總寬度不超過父層wrap寬度即可 */
box-sizing: border-box;
background-color: #fff;
/* fl */
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
那裡理解當年功夫設定，有所教程自動，很大感動對此歌曲最好的下午產權看著作用我來資料庫，生物風雲堅決家人面前他不，看看管理員去了，快車網站真是各種加入時間，臉上老大大人回頭樂隊明白表示範圍違反成立我對，人物魔獸服飾，註冊時間就是說是，無人所。
</div>
<div class="item">
那裡理解當年功夫設定，有所教程自動，很大感動對此歌曲最好的下午產權看著作用我來資料庫，生物風雲堅決家人面前他不，看看管理員去了，快車網站真是各種加入時間，臉上老大大人回頭樂隊明白表示範圍違反成立我對，人物魔獸服飾，註冊時間就是說是，無人所。
</div>
<div class="item">
那裡理解當年功夫設定，有所教程自動，很大感動對此歌曲最好的下午產權看著作用我來資料庫，生物風雲堅決家人面前他不，看看管理員去了，快車網站真是各種加入時間，臉上老大大人回頭樂隊明白表示範圍違反成立我對，人物魔獸服飾，註冊時間就是說是，無人所。
</div>
<div class="clearfix"></div>
</div>
</body>
</html>
rest.css
https://meyerweb.com/eric/tools/css/reset/index.html
若覺得所有標籤設設都歸0太過度，也可選用Normalize.css
------------------------------------------------------------------12Day
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="rest.css">
</head>
<body>
<h1>電信語音安</h1>
<p>榮譽你看金融排行難得逐步上次讓她有意推坑王台南也沒起點身體，尋求運行谷歌詳細模糊不久這個問題依據，同意庫存各類基礎上，電器眼神政治初步也在，從此標準，些什麼平衡不大少年不說你就上來原因障礙大學即使，做好引發居民地上更多今年嘉義老婆輸入開口。
</p>
<p>榮譽你看金融排行難得逐步上次讓她有意推坑王台南也沒起點身體，尋求運行谷歌詳細模糊不久這個問題依據，同意庫存各類基礎上，電器眼神政治初步也在，從此標準，些什麼平衡不大少年不說你就上來原因障礙大學即使，做好引發居民地上更多今年嘉義老婆輸入開口。
</p>
<p>榮譽你看金融排行難得逐步上次讓她有意推坑王台南也沒起點身體，尋求運行谷歌詳細模糊不久這個問題依據，同意庫存各類基礎上，電器眼神政治初步也在，從此標準，些什麼平衡不大少年不說你就上來原因障礙大學即使，做好引發居民地上更多今年嘉義老婆輸入開口。
</p>
<p>榮譽你看金融排行難得逐步上次讓她有意推坑王台南也沒起點身體，尋求運行谷歌詳細模糊不久這個問題依據，同意庫存各類基礎上，電器眼神政治初步也在，從此標準，些什麼平衡不大少年不說你就上來原因障礙大學即使，做好引發居民地上更多今年嘉義老婆輸入開口。
</p>
<p>榮譽你看金融排行難得逐步上次讓她有意推坑王台南也沒起點身體，尋求運行谷歌詳細模糊不久這個問題依據，同意庫存各類基礎上，電器眼神政治初步也在，從此標準，些什麼平衡不大少年不說你就上來原因障礙大學即使，做好引發居民地上更多今年嘉義老婆輸入開口。
</p>
<ul>
<li>臺灣航空臺灣培養流</li>
<li>臺灣航空臺灣培養流</li>
<li>臺灣航空臺灣培養流</li>
</ul>
<ol>
<li>臺灣航空臺灣培養流</li>
<li>臺灣航空臺灣培養流</li>
<li>臺灣航空臺灣培養流</li>
</ol>
</body>
</html>
rest.css
~~~~~~~~~~
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
排版的聖品:Flex
------------------------------------------------------------------13Day
html
~~~~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="rest.css">
<style>
.wrap {
width: 900px;
margin: auto;
background-color: #ccc;
/* d:f */
/* 不會折行 */
display: flex;
/* fl-wr */
/* 會自動折行 */
flex-wrap: wrap;
}
.item {
/* width: 300px; */
width: 280px;
margin: 10px 10px;
background-color: #ffa;
}
</style>
</head>
<body>
<div class="wrap">
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
<div class="item">
這一熱門環節出台透明故障昨天怎麼超市機票避免運動住宅經濟，第一章財經氣息鮮花最好返回清除如果您。
</div>
</div>
</body>
</html>
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
/* w100% */
width: 100%;
/* m:a */
margin: auto;
/* df */
display: flex;
}
.item {
width: 100%;
/* m0-10-10 */
margin: 0 10px 10px;
}
.item img {
width: 100%;
/* vat */
vertical-align: top;
}
</style>
</head>
<body>
<!-- .wrap>(.item>img[src="https://picsum.photos/300/200?random=$"])*3 -->
<div class="wrap">
<div class="item"><img src="https://picsum.photos/300/200?random=1" alt=""></div>
<div class="item"><img src="https://picsum.photos/300/200?random=2" alt=""></div>
</div>
<div class="wrap">
<div class="item"><img src="https://picsum.photos/300/200?random=3" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
<div class="item"><img src="https://picsum.photos/300/200?random=4" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
<div class="item"><img src="https://picsum.photos/300/200?random=5" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
</div>
<div class="wrap">
<div class="item"><img src="https://picsum.photos/300/200?random=6" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
<div class="item"><img src="https://picsum.photos/300/200?random=7" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
<div class="item"><img src="https://picsum.photos/300/200?random=8" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
<div class="item"><img src="https://picsum.photos/300/200?random=9" alt="">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet error fuga voluptates vero earum maxime
obcaecati quo eligendi, illum sapiente!</p>
</div>
</div>
</body>
</html>
fixed定位
------------------------------------------------------------------14Day
html
~~~~~~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
body {
/* p-t */
padding-top: 70px;
}
nav {
background-color: #000;
/* tac */
text-align: center;
width: 100%;
top: 0;
left: 0;
position: fixed;
opacity: 0.6;
}
nav a {
color: #fff;
/* t-d */
text-decoration: none;
/* 才可設定超連結間距、寬度*/
/* display: i-b; */
display: inline-block;
/* p10-20 */
padding: 10px 20px;
}
.container {
/* m:a */
margin: auto;
/* w100% */
width: 100%;
/* maw960 */
max-width: 960px;
}
.container p{
/* mb1.5em */
margin-bottom: 1.5em;
/* lh1.2 */
line-height: 1.2;
}
</style>
</head>
<body>
<nav>
<a href="#">超連結1</a>
<a href="#">超連結2</a>
<a href="#">超連結3</a>
<a href="#">超連結4</a>
<a href="#">超連結5</a>
<a href="#">超連結6</a>
</nav>
<!-- div.container>p*30>lorem -->
<div class="container">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Soluta blanditiis eius eveniet at culpa rerum
quisquam placeat perspiciatis nostrum odio, excepturi dignissimos inventore obcaecati, natus animi. Ad,
nulla? Quas, consectetur!</p>
<p>Ullam architecto suscipit, quisquam, corrupti dignissimos adipisci a quis necessitatibus sed sunt
voluptatibus atque molestias. Accusantium ipsa quasi cupiditate consectetur facere vitae dignissimos,
voluptas maiores harum iusto ex, libero suscipit.</p>
<p>Et porro ab nisi inventore id, exercitationem vel quisquam recusandae suscipit debitis labore corrupti
ducimus dicta dignissimos sint animi nobis commodi at dolore, ipsa eligendi hic voluptatibus. Qui, minus?
Sint.</p>
<p>Rerum molestiae animi rem obcaecati exercitationem voluptatum officiis nihil explicabo deserunt omnis quam,
aspernatur modi, excepturi quod consequuntur nam ipsam quia sed eveniet quis ex cum labore! Repudiandae,
dolor recusandae!</p>
</div>
</body>
</html>
Relative 定位(偏移顯示)
相對自己在資料中的位置作偏移，所以沒有偏移就沒有任何效果。
兩個都有定位，後方物件會蓋住前方物件
只有一個有定位，定位物件會蓋住沒有定位物件，若要改變可以使用z-index
------------------------------------------------------------------15Day
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
ul {
/* fz0 */
font-size: 0;
/* 2個inline-block間有一空白字元的問題 */
}
li {
/* d:ib */
display: inline-block;
/* 2個inline-block間有一空白字元的問題 */
font-size: 50px;
width: 100px;
height: 100px;
background-color: #aaa;
margin: 10px;
/* tac */
text-align: center;
/* lh100px */
line-height: 100px;
}
.item03 {
background-color: #f00;
/* op.5 */
opacity: 0.5;
/* por */
position: relative;
/* 希望的效果是偏移顯示 但是他的位置以及空間不會受到任何影響 */
/* l100 */
left: 100px;
/* t30 */
top: 30px;
/* 有偏移才有效果顯現 */
}
.item08 {
background-color: #f00;
position: relative;
/* 08會蓋住09，有定位 z-index 會在前 */
left: 50px;
top: 0;
/* z1 */
z-index: 1;
/* z-index 預設值=0 */
}
.item09 {
position: relative;
/* 08與09都有定位，後方物件會蓋住前方物件 */
/* 此時若希望08會蓋住09，可以更改任一方 z-index */
}
/* 以下21與22呈現位置對調 */
.item21 {
background-color: #f00;
position: relative;
left: 120px;
}
.item22 {
position: relative;
left: -120px;
}
</style>
</head>
<body>
<!-- ul>li.item$${$$}*27 -->
<ul>
<li class="item01">01</li>
<li class="item02">02</li>
<li class="item03">03</li>
<li class="item04">04</li>
<li class="item05">05</li>
<li class="item06">06</li>
<li class="item07">07</li>
<li class="item08">08</li>
<li class="item09">09</li>
<li class="item10">10</li>
<li class="item11">11</li>
<li class="item12">12</li>
<li class="item13">13</li>
<li class="item14">14</li>
<li class="item15">15</li>
<li class="item16">16</li>
<li class="item17">17</li>
<li class="item18">18</li>
<li class="item19">19</li>
<li class="item20">20</li>
<li class="item21">21</li>
<li class="item22">22</li>
<li class="item23">23</li>
<li class="item24">24</li>
<li class="item25">25</li>
<li class="item26">26</li>
<li class="item27">27</li>
</ul>
</body>
</html>
Absolute絕對定位
物件設定絕對定位後，會從原資料中抽掉(類似fix)
------------------------------------------------------------------16Day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
padding: 40px;
border: 6px solid #f00;
font-size: 24px;
}
.b{
/* por */
position: relative;
/* b有定位所以c就會定在b內 */
/* 若 a,b 兩個都有定位，c還是定在b內(上一父層) */
}
.c {
border-color: #00f;
padding: 20px;
/* po:a */
position: absolute;
/* c雖仍在原位置，但已經抽離不在a，b內 */
/* a,b已不知c在哪裡 */
/* l0 */
left: 0;
/* t0 */
top: 0;
/* 因為父層a,b都沒有定位(fix、relative、absolute)所以找到視窗，且只定一次。會跟畫面一起捲動 */
/* fix 永遠固定在視窗範圍 */
}
</style>
</head>
<body>
<!-- div.a{aa}>div.b{bb}>div.c{cc} -->
<div class="a">aa
<div class="b">bb
<div class="c">cc</div>
</div>
</div>
<!-- (p>lorem)*20 -->
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Maiores velit impedit eum incidunt quod alias dolorem
minima, obcaecati corrupti eius. Delectus porro similique sunt eligendi placeat, facilis ipsa dolor officia!</p>
<p>Eligendi labore enim officiis explicabo. Facilis, corrupti recusandae reprehenderit pariatur debitis laboriosam.
Perspiciatis aliquam modi, illum, iusto magnam, officia quisquam ratione odio ipsam rerum aut? Totam sunt
repudiandae necessitatibus eius.</p>
<p>Consequuntur inventore maxime repudiandae eum suscipit nobis at nostrum temporibus voluptatem vel corrupti ipsum
possimus tenetur libero maiores perspiciatis ad ducimus numquam sit dolorem, quasi autem voluptatum. Nostrum, ab
quas.</p>
<p>Fugit, iusto! Quod reprehenderit rerum exercitationem, voluptatibus quia ad ab, magnam aliquid perspiciatis
voluptates veniam illo animi nostrum possimus officia dolorem qui numquam inventore error dignissimos? Fugit
nisi distinctio enim?</p>
<p>Dignissimos ipsam explicabo earum quae, necessitatibus tempore unde, culpa magni fugiat voluptates voluptas
consequatur veniam maiores tempora reprehenderit dolore nesciunt quisquam delectus. Veritatis corrupti rerum in
nemo, distinctio omnis unde.</p>
<p>Assumenda deleniti asperiores consectetur corrupti. Blanditiis et pariatur inventore deleniti quas labore
explicabo ipsam? Atque provident animi sit natus minus unde repudiandae vero, recusandae eos velit est, modi
pariatur dolor.</p>
<p>Qui sit in tenetur recusandae magni maiores ipsum saepe harum veniam odio repellat cumque provident quidem nemo
ratione explicabo facere, nam, eligendi necessitatibus praesentium ipsam! Ad atque earum quos deserunt?</p>
<p>Accusantium maiores delectus, dolores recusandae numquam veritatis blanditiis molestiae dicta odit sit minus
praesentium mollitia necessitatibus exercitationem eligendi alias dolorum, similique consectetur odio unde nemo?
Neque necessitatibus cumque itaque dicta.</p>
<p>Totam voluptate quis veniam necessitatibus dolores quod sunt delectus adipisci, eveniet quo nesciunt odit
repellendus, id magnam! Sunt, error? Repellendus, eos officia. Esse libero aliquid suscipit, sunt nemo
asperiores! Alias.</p>
<p>Facere, rerum! Commodi consequuntur exercitationem veniam reiciendis qui temporibus ratione corrupti quis, eum
voluptate ipsa nam aliquid praesentium, magnam excepturi labore quasi a molestiae, aut ad aspernatur natus
ullam! Cum.</p>
<p>Exercitationem doloremque in ipsam delectus expedita velit recusandae reprehenderit dolor praesentium. Provident
perspiciatis, harum ipsam corrupti ducimus amet vero dolore molestiae id aliquid qui, cupiditate optio animi
error maxime possimus.</p>
<p>Repellat unde dolor sunt eos repellendus in eum, aspernatur magnam qui minus, culpa, nobis quo mollitia. Sapiente
doloremque velit vero ratione ex doloribus harum nesciunt quam. Magnam excepturi reiciendis dolor.</p>
<p>Suscipit assumenda reprehenderit quibusdam sequi maiores iusto nam rem explicabo odit. Assumenda, quia ad!
Deleniti odio maxime architecto dignissimos omnis quaerat rerum, quibusdam itaque ullam, provident repellat
molestiae, in ut!</p>
<p>Optio non accusantium hic est aliquid praesentium voluptas cum ut ullam, suscipit excepturi quasi cupiditate
incidunt unde? Sunt alias hic repudiandae iure, placeat necessitatibus corrupti ex id. Animi, quas soluta?</p>
<p>Ipsa quod sit incidunt aspernatur, odit similique corporis voluptates tempore necessitatibus suscipit quibusdam
neque at numquam eligendi rem, molestiae nisi pariatur soluta natus, sunt officiis. Quam cumque pariatur labore
molestiae.</p>
<p>Officiis minus dolorum placeat molestias ex facilis, eos voluptatibus minima reprehenderit, exercitationem
veritatis tempore similique nulla quod ducimus et. Asperiores nesciunt suscipit consectetur harum? Ea tempora
ipsam excepturi dolor laborum?</p>
<p>Labore illo, quod voluptatem vero earum, quia quibusdam sit minima similique hic enim harum ullam reiciendis
voluptatum itaque placeat explicabo architecto iusto esse doloribus, ipsum veniam quasi. Dignissimos, minus
quaerat.</p>
<p>Maxime eveniet consectetur molestias cupiditate eligendi aliquam facere, alias reiciendis numquam nobis sint vero
blanditiis possimus. Quisquam dolorem minima hic natus! Maxime impedit porro, reprehenderit error iste accusamus
amet dolores.</p>
<p>Odio consequuntur possimus tempora minima, tenetur sapiente placeat aut consequatur hic assumenda aperiam ex
mollitia beatae ipsum quisquam corporis repellendus expedita porro consectetur. Aperiam laborum omnis fuga,
architecto numquam rem.</p>
<p>A, corrupti. Sit minima alias dolore fuga accusantium soluta eveniet aliquid cumque libero quis doloremque
commodi, veritatis sequi modi maxime earum debitis enim iusto mollitia maiores, corporis explicabo? Quasi,
voluptate?</p>
</body>
</html>
Absolute絕對定位 應用
------------------------------------------------------------------16Day
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.wrap {
width: 960px;
/* m:a */
margin: auto;
/* d:f */
display: flex;
}
.item {
width: 300px;
margin: 10px;
border: 1px solid #aaa;
padding: 10px;
/* 圖、字與邊框就會分開 */
position: relative;
/* .item 定位後 .item .tab就會定在內 */
/* 且 .item 也要跟大家排再一起所以用 relative */
}
.item img {
width: 100%;
}
.item .tab {
background-color: #f00;
color: #fff;
/* p6-10 */
padding: 6px 10px;
position: absolute;
right: 0;
top: 0;
/* 負值沒有效??? */
}
</style>
</head>
<body>
<!-- div.wrap>(div.item>div.tab{Hot!}+img[src="https://picsum.photos/300/200?random=1"]+h2>{Title}+p>lorem)*3 -->
<div class="wrap">
<div class="item">
<div class="tab">Hot!</div>
<img src="https://picsum.photos/300/200?random=1" alt="">
<h2>
Title
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolor aut perferendis ratione
exercitationem voluptas officia expedita. Eos cupiditate quaerat obcaecati excepturi, repudiandae
natus, ducimus nesciunt optio, deleniti voluptatem dolor.</p>
</h2>
</div>
<div class="item">
<div class="tab">Hot!</div>
<img src="https://picsum.photos/300/200?random=1" alt="">
<h2>
Title
<p>Sed fuga perspiciatis, et magnam at suscipit aliquid fugit quaerat earum distinctio molestias velit,
repellat quae, cupiditate dolorum? Sint provident quidem distinctio voluptatem odio pariatur aliquid
quod a minima quos.</p>
</h2>
</div>
<div class="item">
<div class="tab">Hot!</div>
<img src="https://picsum.photos/300/200?random=1" alt="">
<h2>
Title
<p>Veritatis ullam aut, eveniet culpa perspiciatis alias omnis nulla modi architecto blanditiis, ipsa
qui aliquid quia quibusdam saepe fugit facilis consequuntur mollitia sunt laudantium a? Labore
voluptates tempora eos maxime?</p>
</h2>
</div>
</div>
</body>
</html>
排個稀飯版
------------------------------------------------------------------17Day
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<style>
.header {
/* df */
display: flex;
/* p6-10 */
padding: 6px 10px;
background-color: #000;
}
.header .logo {
/* lh52px */
/* line-height: 52px; */
/* dib */
display: inline-block;
/* p6-0 */
padding: 6px 0;
}
.header nav {
/* tar */
text-align: right;
/* w100% */
width: 100%;
/* fz0 */
font-size: 0;
}
.header nav a {
/* fz16 */
font-size: 16px;
/* c#fff */
color: #fff;
/* tdn */
text-decoration: none;
/* dib */
display: inline-block;
/* lh52px */
line-height: 52pX;
/* p0-10 */
padding: 0 10px;
}
.header nav a:hover {
/* bgc#fa0 */
background-color: #fa0;
}
.banner img {
width: 100%;
}
.path {
/* df */
display: flex;
}
.path li {
/* por */
position: relative;
/* p6-8 */
padding: 6px 8px;
}
.path li a {
/* c#aaa */
color: #aaa;
/* tdn */
text-decoration: none;
/* fz15 */
font-size: 15px;
}
.path li+li::before {
content: "|";
color: #aaa;
/* poa */
position: absolute;
/* l0 */
left: 0;
}
.item h3 {
font-size: 36px;
/* p0-0-30 */
padding: 0 0 30px;
}
.wrap {
width: 960px;
/* m:a */
margin: auto;
}
.about {
/* p40-0-60 */
padding: 40px 0 60px;
}
.about .wrap {
/* df */
display: flex;
}
.about .wrap .item {
width: 300px;
margin: 0 10px;
/* tac */
text-align: center;
}
.about .item img{
/* bor-r */
border-radius: 50px;
}
/* >:第一層 */
.about>h2 {
width: 960px;
text-align: center;
font-size: 42px;
/* m:a */
margin: auto;
padding: 20px 0;
}
.about>p {
width: 660px;
margin: auto;
/* p20-0-40 */
padding: 0px 0 40px;
text-align: center;
}
.products {
background-color: #ccc;
}
.products .wrap {
/* df */
display: flex;
}
.products .item {
width: 50%;
}
.products .item img {
width: 100%;
/* vab */
vertical-align: bottom;
}
.products .pic {}
.products .text {
/* df */
display: flex;
/* fl-d */
flex-direction: column;
/* jcc */
justify-content: center;
padding: 0 20px;
text-align: center;
}
.service{
padding: 40px 0;
background-color: #ffa;
}
.service > h2{
width: 960px;
/* m:a */
margin: auto;
text-align: center;
font-size: 46px;
padding: 20px 0;
}
.service > p{
width: 960px;
/* m:a */
margin: auto;
text-align: center;
/* pb40 */
padding-bottom: 40px;
}
.service .wrap{
/* df */
display: flex;
}
.service .item{
margin: 0 10px;
width: 300px;
text-align: center;
}
.service .item img{
width: 100%;
}
.footer {
text-align: center;
background-color: #000;
color: #888;
padding: 20px 0;
}
</style>
</head>
<body>
<!-- .header>a[href="#"]>img[src="https://picsum.photos/80/40?random=1"][alt="網站名稱"]+nav>(a[href="#"]{關於我們})*6 -->
<div class="header">
<a href="#">
<img src="https://picsum.photos/80/40?random=1" alt="網站名稱">
<nav><a href="#" class="logo">關於我們</a><a href="#">關於我們</a><a href="#">關於我們</a><a href="#">關於我們</a><a
href="#">關於我們</a><a href="#">關於我們</a></nav>
</a>
</div>
<!-- .banner>img[src="https://picsum.photos/1200/300?random=2"] -->
<div class="banner"><img src="https://picsum.photos/1200/300?random=2" alt=""></div>
<!-- ul.path>(li>a[href="#"]{最新消息})*3 -->
<ul class="path">
<li><a href="#">最新消息</a></li>
<li><a href="#">最新消息</a></li>
<li><a href="#">最新消息</a></li>
</ul>
<!-- .about>.wrap>(.item>img[src="https://picsum.photos/50/50?random=$"]+h3{Title}+p>lorem20)*3 -->
<div class="about">
<h2>關於我們</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi sit eaque a, numquam harum
tempore necessitatibus similique ipsa!</p>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/50/50?random=1" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sit sint quod facilis neque vitae dolores
totam quidem aliquid fugit repudiandae?</p>
</div>
<div class="item">
<img src="https://picsum.photos/50/50?random=2" alt="">
<h3>Title</h3>
<p>Ut veniam, pariatur, quas aspernatur libero consectetur unde repellendus neque est fugit inventore?
Impedit minus illum, provident nesciunt voluptatum nobis!</p>
</div>
<div class="item">
<img src="https://picsum.photos/50/50?random=3" alt="">
<h3>Title</h3>
<p>Quis dignissimos, beatae est rerum numquam quisquam eligendi, perferendis error asperiores quam,
praesentium illum quo excepturi maiores libero molestiae cumque?</p>
</div>
</div>
</div>
<!-- .products>.wrap>.item*2 -->
<div class="products">
<div class="wrap">
<div class="item pic">
<!-- img[src="https://picsum.photos/300/200?random=6"][alt="假圖"] -->
<img src="https://picsum.photos/300/200?random=6" alt="假圖">
</div>
<div class="item text">
<h3>Title</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Recusandae modi, accusamus ratione nemo
impedit eligendi esse. Quidem aliquam, ullam, animi debitis rerum dolore ipsa a amet sit, officiis
iure omnis!</p>
</div>
</div>
</div>
<!-- .service>.wrap>(.item>img[src="https://picsum.photos/300/200?random=$"]+h3{Title}+p>lorem10)*4 -->
<div class="service">
<h2>服務項目</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum, debitis.</p>
<div class="wrap">
<div class="item">
<img src="https://picsum.photos/300/200?random=1" alt="">
<h3>Title</h3>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Hic, dolores.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200?random=2" alt="">
<h3>Title</h3>
<p>Commodi, aliquam quisquam? Iusto, blanditiis vel? Praesentium architecto quis veritatis.</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200?random=3" alt="">
<h3>Title</h3>
<p>Ab ducimus repudiandae nemo tenetur eligendi deleniti earum voluptate vel!</p>
</div>
<div class="item">
<img src="https://picsum.photos/300/200?random=4" alt="">
<h3>Title</h3>
<p>Voluptatum temporibus commodi dicta odit adipisci neque iusto consectetur ut?</p>
</div>
</div>
</div>
<div class="footer">
©copyright 2021 by chinku
</div>
</body>
</html>
Transition 網頁動畫
------------------------------------------------------------------18Day
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn {
/* dib */
display: inline-block;
padding: 10px 20px;
background-color: #000;
font-size: 50px;
text-decoration: none;
color: #fff;
/* transition: 屬性 轉換時間 延遲執行時間 速度; */
/* trans */
/* transition: all 1s 0s ease; */
transition: padding 1s 0s ease, background-color 1s 1s;
}
.btn:hover {
background-color: #f00;
color: #ff0;
padding: 10px 30px;
}
</style>
</head>
<body>
<!-- a.btn[href="#"]{送出} -->
<a href="#" class="btn">送出</a>
</body>
</html>
------------------------------------------------------------------1Day
CSS@media Rule 媒體查詢
針對不同裝置設定不外觀與顯示方式
http://csscoke.com/webq/fs-list.html
------------------------------------------------------------------20Day
------------------------------------------------------------------1Day
------------------------------------------------------------------1Day
