移动端页面练习

时间 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>