HTML5綜合實例--移動端頁面

本文轉載自查看原文 2016-09-23 17:02 2772 H5

學習要點

1.通過一個簡單的移動手機頁面，復習學過的內容

2.手機網頁的測試

3.手機布局的屏幕設定

　　手機網頁的測試方法

　　　　1.直接在手機上測試，比較麻煩，效果好，

　　　　2.電腦上下載手機模擬器

　　　　3.利用瀏覽器自帶的功能

　　name="viewport":屏幕設定

　　maximum-scale=1.0,minimum-scale=1.0;initial-scale=1.0:最大最小縮放比例為1：其實就是不允許點擊縮放

　　user-scalable=0,width=device-width:設定內容和設備的屏幕等高，等寬

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>
    
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
    
    <style type="text/css">
        body{margin:0}
        header{
            width:100%;height:50px;background:#AEFEEE;
        }
        h4{display:inline;}
        aside{
            width:20%;height:540px;background:#708090;float:left;
        }
        section{
            width:80%;height:540px;background:#D8BFD8;float:left;overflow:auto;
        }
        footer{    
            width:100%;height:50px;background:green;clear:left;
        }
        figure{padding:0;}
        img{max-width:80%;}
        ul{list-style-type:none;}
        li{display:inline;}
    </style>

  </head>
      
  <body>
     <header>
         <hgroup>
             <img alt="" height="50px" src="img/5.jpg">
             <h4>移動端頁面練習</h4>
         </hgroup>
     </header>
     <aside>
         <nav>
             <ul>
                 <li><a href="#"><img  src="img/1.jpg" /></a></li>
                 <li><a href="#"><img  src="img/2.jpg" /></a></li>
                 <li><a href="#"><img  src="img/3.jpg" /></a></li>
                 <li><a href="#"><img  src="img/4.jpg" /></a></li>
                 <li><a href="#"><img  src="img/5.jpg" /></a></li>
             </ul>
         </nav>
         
     </aside>
     
     <section>
         <figure>
             <img alt="" width="50%" src="img/1.jpg"><img alt=""width="50%" src="img/1.jpg">
         </figure>
         <figcaption>
             韋小寶身份證
         </figcaption>
         <figure>
             <img alt=""width="50%" src="img/2.jpg"><img alt="" width="50%" src="img/2.jpg">
         </figure>
         <figcaption>
             奧巴馬身份證
         </figcaption>
         <figure>
             <img alt="" width="50%" src="img/3.jpg"><img alt="" width="50%" src="img/3.jpg">
         </figure>
         <figcaption>
             營業執照1
         </figcaption>
         <figure>
             <img alt="" width="50%" src="img/4.jpg"><img alt="" width="50%" src="img/4.jpg">
         </figure>
         <figcaption>
             營業執照2
         </figcaption>
     </section>
     <footer>
         <nav>
             <ul>
                 <li><a href="#"><img  src="img/1.jpg"  width="45px" /></a></li>
                 <li><a href="#"><img  src="img/2.jpg" width="45px"/></a></li>
                 <li><a href="#"><img  src="img/3.jpg"  width="45px"/></a></li>
                 <li><a href="#"><img  src="img/4.jpg" width="45px"/></a></li>
                 <li><a href="#"><img  src="img/5.jpg" width="45px"/></a></li>
             </ul>
         </nav>
         
     </footer>
  </body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html5 移動端單頁面布局 HTML5新結構標簽和移動端頁面布局 HTML5 移動端web HTML5與移動端Web Html5移動端頁面布局通用模板暨移動端問題總結 html5 移動端頁面軟鍵盤彈出影響頁面布局移動端html頁面優化 html5 meta(移動端）介紹及使用 HTML5移動端實現自適應基於Html5的移動端APP開發框架