HTML5 1.11移動端頁面練習
1.手機網頁的測試方法css
a.直接在手機上測試，比較麻煩，效果好html
b.電腦上下載手機模擬器瀏覽器
c.利用瀏覽器自帶功能ide
2.name=「viewport」，屏幕設定測試
3.maximum-scale=1.0， minimum-scale=1.0； initial-scale=1.0最大最小縮放比例爲1，其實就是不容許縮放scala
3.user-scalable=0，width=device-width：設定內容和設備的屏幕等寬，等高htm
<DOCTYPE html>it
<html lang="zh-cn">io
<head> meta
<meta charset="UTF-8">
<title>移動端頁面<title>
<meta name="viewport" content="maximun-scale=1.0,minimun-scale=1.0,user-scale=0,width=device-width,initial-scale=1.0">
<style type="text/css">
header{width:100%;height:50%;background:#AEFEEE}
asider{width:20%;height:540px;background:#708099;float:left;}
section{width:80%;height:540%;background:#D8DFD8;float:left;}
footer{width:100%;height:50px;background:#green;clear:left;}
figure{padding：0px}
img{max-width：70%}
ul{list-style-type：none}
li{display：inline}
a{text-decoration：none}
</style>
</head>
<body>
<header>
<hgroup>
<img src="imges/ss.png" alt="">
<h4>移動端頁面<h4>
</hgroup>
</header>
<asider>
<ul>
<li><a href=""><img src="imges/aa.png" alt=""></a></li>
<li><a href=""><img src="imges/bb.png" alt=""></a></li>
<li><a href=""><img src="imges/cc.png" alt=""></a></li>
<li><a href=""><img src="imges/dd.png" alt=""></a></li>
</ul>
</asider>
<section>
<figure>
<img src="sp/sp1.png" alt="" width="50%"><img src="sp/sp2.png" alt="" width="50%">
</figure>
<figcaptio>食品/家電</figcaptio>
<figure>
<img src="sp/sp3.png" alt="" width="50%"><img src="sp/sp4.png" alt="" width="50%">
</figure>
<figcaptio>汽車/家居</figcaptio>
<figure>
<img src="sp/sp5.png" alt="" width="50%"><img src="sp/sp6.png" alt="" width="50%">
</figure>
<figcaptio>數碼/珠寶</figcaptio>
<figure>
<img src="sp/sp7.png" alt="" width="50%"><img src="sp/sp8.png" alt="" width="50%">
</figure>
<figcaptio>食品/家電</figcaptio>
</section>
<footer>
<nav>
<ul>
<li><a href=""><img src="imges/1.png" alt=""></a></li>
<li><a href=""><img src="imges/2.png" alt=""></a></li>
<li><a href=""><img src="imges/3.png" alt=""></a></li>
<li><a href=""><img src="imges/4.png" alt=""></a></li>
</ul>
</nav>
</footer>
</body>
</html>
- 1. 移動端頁面練習
- 2. html5--2.10綜合實例2-移動端頁面練習
- 3. html5 移動端單頁面佈局
- 4. 玩轉HTML5移動頁面
- 5. 移動端WEB頁面
- 6. 移動端頁面
- 7. 移動端頁面佈局
- 8. 【CSS練習】IT修真院--練習4-移動端界面
- 9. 移動端頁面重構
- 10. 移動端頁面開發
- 更多相關文章...
- • jQuery Mobile 頁面 - jQuery Mobile 教程
- • XSL-FO 頁面 - XSL-FO 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 移動端頁面練習
- 2. html5--2.10綜合實例2-移動端頁面練習
- 3. html5 移動端單頁面佈局
- 4. 玩轉HTML5移動頁面
- 5. 移動端WEB頁面
- 6. 移動端頁面
- 7. 移動端頁面佈局
- 8. 【CSS練習】IT修真院--練習4-移動端界面
- 9. 移動端頁面重構
- 10. 移動端頁面開發