用html編寫簡單的天氣預報介面
阿新 • • 發佈：2019-01-23
css3層疊樣式表在此不再詳述, 請看程式碼備註及執行效果圖!
<!DOCTYPE html> <html lang="en"> <head> <!--meta 單標籤 用來引入或宣告一些內容--> <meta charset="UTF-8"> <!--viewport 視口--> <!--width 設定視口寬度--> <!--user-scalable 網頁是否可以被縮放--> <!--initial-scale 網頁被載入時，初始的比例--> <!--maximum-scale 網頁最大的放大比例--> <!--minimum-scale 網頁最小的縮放比例--> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <!--title 標題標籤--> <title>天氣預報</title> <style> html{ height: 100%; } body{ /*邊界看寬度預設為8,在這裡初始值設為零*/ margin: 0; /*高度100%,整個介面*/ height: 100%; /*display: inline-block 轉換為行內塊元素*/ /*display: flex 將該標籤作為彈性佈局的容器*/ display: flex; /*指定容器內的item佈局方向*/ /*row 容器內的item按照x軸(主軸方向佈局)*/ /*column 容器內的item按照y軸(交叉軸)方向佈局*/ /*row-reverse 容器內的item按照x軸反向佈局*/ /*column-reserve 容器內的item按照y軸反向佈局*/ flex-direction: column; /*文字居中*/ text-align: center; /*設定背景圖片*/ /*rgb() red green blue 取值0~255*/ /*rgba() red green blue alpha(取0~1)*/ /*設定背景色從rgb(14,105,189)到red值從上到下漸變*/ background-image: linear-gradient(to bottom,rgb(14,105,189),red); /*主軸專案item的佈局方式*/ justify-content: space-between; /*交叉軸的專案item佈局方式*/ /*align-items: ;*/ } header{ /*字型大小*/ font-size: 30px; } img{ /*width: 設定圖片顯示寬度，高度會自適應*/ width: 80px; } footer{ /*display: flex 將該標籤作為彈性佈局的容器*/ display: flex; /*設定item的佈局方式*/ justify-content: space-between; } footer section{ /*寬度佔比33%*/ width: 33%; border-right: 1px black solid; } </style> </head> <!--body 標記網頁主題資訊--> <body> <!--header 網頁中的頭部內容--> <header>鄭州市</header> <!--main 塊元素 標記網頁中的主要內容--> <main> <!--img 標記網頁中的圖片--> <!--src source 圖片來源--> <!--alt alter 當圖片未被加載出來時，以文字方式代替圖片顯示--> <!--title 當滑鼠停留在圖片上時，展示的文字--> <img src="days/qing.png" alt="qing.png"> <!--h1~h6 標題標籤, 標籤獨自佔一行空間，稱之為塊元素--> <h2>27~32℃</h2> <h3>晴轉多雲</h3> <!--p標籤，用來標記網頁中的段落內容！--> <p>東風微風</p> <p>實時溫度: 32℃,空氣質量指數65,良</p> </main> <!--footer 網頁中的尾部內容--> <footer> <!--section 元件、模組, 塊元素--> <section> <p>週三</p> <p>27~30℃</p> <img src="days/xiaoyu.png" alt=""> <p>陰轉小雨</p> <p>南風微風</p> </section> <section> <p>週三</p> <p>27~30℃</p> <img src="days/xiaoyu.png" alt=""> <p>陰轉小雨</p> <p>南風微風</p> </section> <section> <p>週三</p> <p>27~30℃</p> <img src="days/xiaoyu.png" alt=""> <p>陰轉小雨</p> <p>南風微風</p> </section> </footer> </body> </html>
