1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=++, initial-scale=1.0"> 6 <title>Document</title> 7 </head> 8 <body style="background-color: cadetblue;"> 9 <!-- 10 css 設定樣式的 11 透過元素的style屬性進行設定 12 style = "樣式名：樣式值；樣式名：樣式值；... ..." 13 14 塊元素：自己獨佔一行 塊元素的CSS樣式的寬、高等等，往往都是生效的 15 div h1-h6 16 17 行內元素：不會自己獨佔一行的元素 行內元素的CSS樣式的寬、高等等，往往都是不生效的 18 span img a 19 20 --> 21 <div style="border: 1px solid red;width: 600px;height: 1000px;margin: 10px auto;"> 22 23 <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: bisque;">123</div> 24 <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: burlywood;">456</div> 25 <div style="border: 1px solid red;width: 500px;height: 300px;margin: 10px auto;background-color: darksalmon;"> 26 <span style="font-size: 30px;color: cornflowerblue;font-weight: 100px;">中國礦業大學</span>是一所非常優秀的大學！ 27 </div> 28 29 <span style="border: 1px solid greenyellow;width: 100px;height: 100px;">555</span> 30 31 </div> 32 33 </body> 34 </html>