咖啡 - HackMD

<!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>作業1</title> <link rel="stylesheet" href="style.css"> </head> <body>  <h1 style="font-size: 60px; color: rgb(180, 61, 61);">咖啡</h1> <hr> 咖啡（英語：coffee）是採用經過烘焙過程的咖啡豆（咖啡屬植物的種子）所製作沖泡出來的飲料。咖啡是人類社會流行範圍最為廣泛的飲料之一，也是重要經濟作物，其為全球期貨貿易額度第二高（最高為石油）。 <h2>起源</h2> 咖啡的來源已無從稽考，有諸多傳說。相傳，今天的奧羅莫人的祖先被認為是首個認識到咖啡樹令人振奮的效果[4]，雖然沒有直接的證據指出非洲咖啡的增長或是本地人會用它作為興奮劑，甚至早於17世紀已經知道。 <h2 style="font-size: 30px; color: rgb(180, 61, 61);">咖啡的主要成分</h2> <ul> <li>蔗糖:烘培過程中部分會熱烈解為甲酸、醋酸、如酸、甘醇酸，故含糖量越高的生豆。</li> <li>咖啡因：略帶苦味，熔點高達237度C，因此烘培好的咖啡熟豆，其咖啡因幾乎完整保留下來，並在萃取時會融入到杯中。</li> <li>綠原酸：淺培至中培(一爆到二爆中)，約有50%的綠原會降解為奎寧酸(酸澀)，而咖啡亦是人類攝取綠原酸的主要來源。</li> </ul> </body> </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>作業1</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <div class="left"> </div> <div class="right">  <h1>咖啡</h1> <hr>  <p> 咖啡（英語：coffee）是採用經過烘焙過程的咖啡豆（咖啡屬植物的種子）所製作沖泡出來的飲料。咖啡是人類社會流行範圍最為廣泛的飲料之一，也是重要經濟作物，其為全球期貨貿易額度第二高（最高為石油）。 </p> <h2>起源</h2> <p> 咖啡的來源已無從稽考，有諸多傳說。相傳，今天的奧羅莫人的祖先被認為是首個認識到咖啡樹令人振奮的效果[4]，雖然沒有直接的證據指出非洲咖啡的增長或是本地人會用它作為興奮劑，甚至早於17世紀已經知道。 </p> <h2>咖啡的主要成分</h2> <ul> <li><h3>蔗糖</h3>烘培過程中部分會熱烈解為甲酸、醋酸、如酸、甘醇酸，故含糖量越高的生豆。</li> <li><h3>咖啡因</h3>略帶苦味，熔點高達237度C，因此烘培好的咖啡熟豆，其咖啡因幾乎完整保留下來，並在萃取時會融入到杯中。</li> <li><h3>綠原酸</h3>淺培至中培(一爆到二爆中)，約有50%的綠原會降解為奎寧酸(酸澀)，而咖啡亦是人類攝取綠原酸的主要來源。</li> </ul> </div> </div> </body> </html> *{ /* border: solid 3px black; */ font-size: 20px; } h1{ font-size: 50px; color: white; background-color: brown; } .card{ border: solid 3px black; width: 800px; display: flex; /* div同一派上から順に横並びにする */ } .left{ width: 30%; background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Roasted_coffee_beans.jpg/1280px-Roasted_coffee_beans.jpg); } .right{ width: 70%; } ul li{ display: inline-block; width: 30%; vertical-align: top; } /* h3がないから直接書いていい */ /* ほかにある時はul li h3{}って書く */ h3{ background-color: brown; color: white; }