html5--2.10綜合實例2-移動端頁面練習

時間 2019-11-21

標籤 html5 html 2.10 綜合實例移動頁面練習欄目 HTML5 简体版

原文原文鏈接

html5--2.10綜合實例2-移動端頁面練習

學習要點

經過一個簡單的移動手機頁面，複習學過的內容
手機網頁的測試
手機佈局的屏幕設定

手機網頁的測試方法

直接在手機上測試，比較麻煩，效果好
電腦上下載手機模擬器
利用瀏覽器自帶的功能

name="viewport"：屏幕設定
maximum-scale=1.0,minimum-scale=1.0；initial-scale=1.0:最大最小縮放比例爲1：其實就是不容許點擊縮放
user-scalable=0,width=device-width:設定內容和設備的屏幕等寬，等高

學習要點

完成綜合實例2的頁面框架

本節課涉及到的知識點

本節課要用到的元素：header/footer/section/aside

本節課要用到的樣式：width/height/backgroud

本節課還要用到後邊CSS章節會詳細講解的幾個知識點，對這些只要求瞭解,後邊會有專門章節從頭仔細講，這裏爲了演示提取使用

浮動：float: left 暫時能夠簡單理解爲它的做用就是可讓塊元素不換行，而是從左向右排列

margin: 0暫時只需知道它能夠設置外邊距，能夠去掉body和內容的白邊便可。

學習要點

給section中添加內容

本節課涉及到的知識點

本節課要用到的元素：figure/figcaption

本節課要用到的樣式：width/height

本節課還要用到後邊CSS章節會詳細講解的幾個知識點，對這些只要求瞭解,後邊會有專門章節從頭仔細講，這裏爲了演示提取使用

margin: 0 暫時只需知道它能夠設置外邊距，能夠去掉body和內容的白邊便可。

overflow: auto 內容超出父元素容器後自動加滾動條

學習要點

給header和aside中添加內容

本節課涉及到的知識點

本節課要用到的元素：header/aside/hgroup

本節課要用到的樣式：width/max-with

本節課還要用到後邊CSS章節會詳細講解的幾個知識點，對這些只要求瞭解,後邊會有專門章節從頭仔細講，這裏爲了演示提取使用

text-decoration: none 給a標籤去掉下劃線，僅做了解

學習要點

給footer中添加內容

本節課涉及到的知識點

本節課要用到的元素：nav

本節課還要用到後邊CSS章節會詳細講解的幾個知識點，對這些只要求瞭解,後邊會有專門章節從頭仔細講，這裏爲了演示提取使用

text-decoration: none 給a標籤去掉下劃線，僅做了解

實例

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
 5     <meta charset="UTF-8">
 6     <title>綜合實例</title>
 7     <style type="text/css">
 8         body{margin: 0px}
 9         header{width: 100%;height: 50px;background: #FF8888}
10         h4{display: inline;color: #FD00FA}
11         aside{width: 20%;height: 540px;background: #888834;float: left;}
12         section{width: 80%;height: 540px;background: #FF8834;float: left;overflow: auto;}
13         footer{width: 100%;height: 50px;background: #88FF88;clear: left;}
14         figcaption{text-align: center;color: #00DFFA}
15         img{max-width: 70%;}
16         ul{list-style-type: none;}
17         li{display: inline;}
18     </style>
19 </head>
20 <body>
21     <header>
22         <hgroup>
23             <img src="images/ss.png" alt="">
24             <h4>移動端頁面練習</h4>
25         </hgroup>
26     </header>
27     <aside>
28         <nav>
29             <ul>
30                 <li><a href=""><img src="images/zhi.png" alt=""></a></li>
31                 <li><a href=""><img src="images/ka.png" alt=""></a></li>
32                 <li><a href=""><img src="images/tuan.png" alt=""></a></li>
33                 <li><a href=""><img src="images/ding.png" alt=""></a></li>
34                 <li><a href=""><img src="images/vip.png" alt=""></a></li>
35                 <li><a href=""><img src="images/sc.png" alt=""></a></li>
36             </ul>
37         </nav>
38     </aside>
39     <section>
40         <figure>
41             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
42         </figure>
43         <figcaption>食品/家電</figcaption>
44         <figure>
45             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
46         </figure>
47         <figcaption>汽車/家居</figcaption>
48         <figure>
49             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
50         </figure>
51         <figcaption>數碼/珠寶</figcaption>
52         <figure>
53             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
54         </figure>
55         <figcaption>食品/家電</figcaption>
56         <figure>
57             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
58         </figure>
59         <figcaption>汽車/家居</figcaption>
60         <figure>
61             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
62         </figure>
63         <figcaption>數碼/珠寶</figcaption>
64         <figure>
65             <img src="sp/sp1.png" width="50%" alt=""><img src="sp/sp2.png"  width="50%" alt="">
66         </figure>
67         <figcaption>食品/家電</figcaption>
68         <figure>
69             <img src="sp/sp3.png" width="50%" alt=""><img src="sp/sp4.png"  width="50%" alt="">
70         </figure>
71         <figcaption>汽車/家居</figcaption>
72         <figure>
73             <img src="sp/sp5.png" width="50%" alt=""><img src="sp/sp6.png"  width="50%" alt="">
74         </figure>
75         <figcaption>數碼/珠寶</figcaption>
76     </section>
77     <footer>
78         <ul>
79             <nav>
80                 <li><a href=""><img src="images/zy.png" alt="" width="45"></a></li>
81                 <li><a href=""><img src="images/qb.png" alt="" width="45"></a></li>
82                 <li><a href=""><img src="images/gw.png" alt="" width="45"></a></li>
83                 <li><a href=""><img src="images/dl.png" alt="" width="45"></a></li>
84             </nav>
85         </ul>
86     </footer>
87 </body>
88 </html>