移動端頁面練習

時間 2019-11-17
標籤移動頁面練習欄目無線简体版
原文原文鏈接
<!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <title>0210課堂演示</title>    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,    width=device-width,initial-scale=1.0">    <!--//手機端name="viewport"屏幕設定    //maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,最大最小縮放比例爲1，不容許點擊縮放    //width=device-width,initial-scale=1.0 設定內容與設備的屏幕等寬等高-->    <style type="text/css">        body{margin:0;}        h4{display:inline;}        header{width:100%; height:50px; background:#AEFEEE;}        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:#F0FFFF;clear:left;}        figure{padding:0;}        img{max-width:70%;}        ul{list-style-type: none;}        li{display:inline;}        a{text-decoration: none;}    </style></head><body>    <!--//元素：header頭部/footer尾部/section主體/aside邊框    //樣式：width/height/background    //margin:0 設置外邊距，去掉body和內容的白邊便可    元素：figure/figcaption    overflow:auto 內容超出父元素容器後自動加滾動條    nav主導航利於瀏覽器解鎖，看着方便    header/aside/hgroup    樣式：width/max-width    -->    <header>        <hgroup>            <img src="4.jpg" alt="" width="20">            <h4><a href>移動端頁面練習</a></h4>        </hgroup>    </header>    <aside>        <nav>            <ul>                <li><a href=""><img src="6.jpg" alt=""></a></li>                <li><a href=""><img src="6.jpg" alt=""></a></li>                <li><a href=""><img src="6.jpg" alt=""></a></li>                <li><a href=""><img src="6.jpg" alt=""></a></li>                <li><a href=""><img src="6.jpg" alt=""></a></li>            </ul>        </nav>    </aside>    <section>        <figure>            <img src="4.jpg" alt="" width="45%">            <img src="5.jpg" alt="" width="45%">        </figure>        <figcaption>食品/家電</figcaption>        <figure>            <img src="6.jpg" alt="" width="45%">            <img src="7.jpg" alt="" width="45%">        </figure>        <figcaption>汽車/家居</figcaption>        <figure>            <img arc="8.jpg" alt="" width="45%">            <img arc="4.jpg" alt="" width="45%">        </figure>        <figcaption>食品/家電</figcaption>        <figure>            <img src="5.jpg" alt="" width="45%">            <img src="6.jpg" alt="" width="45%">        </figure>        <figcaption>汽車/家居</figcaption>        <figure>            <img src="5.jpg" alt="" width="45%">            <img src="6.jpg" alt="" width="45%">        </figure>        <figcaption>汽車/家居</figcaption>        <figure>            <img src="5.jpg" alt="" width="45%">            <img src="6.jpg" alt="" width="45%">        </figure>        <figcaption>汽車/家居</figcaption>    </section>    <footer>        <nav>            <ul>                <li><a href=""><img src="6.jpg" alt="" width="45"></a></li>                <li><a href=""><img src="6.jpg" alt="" width="45"></a></li>                <li><a href=""><img src="6.jpg" alt="" width="45"></a></li>                <li><a href=""><img src="6.jpg" alt="" width="45"></a></li>                <li><a href=""><img src="6.jpg" alt="" width="45"></a></li>            </ul>        </nav>    </footer></body></html>