<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,

    width=device-width,initial-scale=1.0" />

    <title></title>

    <style>

        body

        {

            margin: 0;

        }

        header

        {

            width: 100%;

            height: 50px;

            background: #AEFEEE;

        }

        header 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: 70%;

        }

        ul

        {

            list-style-type: none;

        }

        footer li

        {

            display:inline;

        }

    </style>

</head>

<body>

    <header>

    <hgroup>

    <img src="../Images/bb.png" width="30px"/>

     <h4>移动端页面练习</h4>

    </hgroup>

    </header>

    <aside>

        <nav>

         <ul>

            <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

              <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

              <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

        </ul>

        </nav>

    </aside>

    <section>

        <figure>

            <img src="../Images/bb.png" alt="" width="45%"  />

            <img src="../Images/bb.png" alt="" width="45%" />

        </figure>

        <figcation>衣服</figcation>

         <figure>

            <img src="../Images/bb.png" alt="" width="40%"  />

            <img src="../Images/bb.png" alt="" width="40%" />

        </figure>

        <figcation>衣服</figcation>

         <figure>

            <img src="../Images/bb.png" alt="" width="40%"  />

            <img src="../Images/bb.png" alt="" width="40%" />

        </figure>

        <figcation>衣服</figcation>

         <figure>

            <img src="../Images/bb.png" alt="" width="40%"  />

            <img src="../Images/bb.png" alt="" width="40%" />

        </figure>

        <figcation>衣服</figcation>

         <figure>

            <img src="../Images/bb.png" alt="" width="40%"  />

            <img src="../Images/bb.png" alt="" width="40%" />

        </figure>

        <figcation>衣服</figcation>

    </section>

    <footer>

      <nav>

         <ul>

            <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

              <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

              <li>

                <a href="">

                <img src="../Images/bb.png" width="30px"/>

                </a>

            </li>

        </ul>

        </nav>

    </footer>

</body>

</html>

Html5 手机端网页的更多相关文章

  1. Html5 手机端网页不允许缩放

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  2. 移动端调试神器vconsole,手机端网页的调试工具Eruda

    移动端调试神器vconsole,手机端网页的调试工具Eruda 移动端中使用 vConsole调试 移动端调试工具vconsole安装Git地址:https://github.com/WechatFE ...

  3. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  4. 手机端网页返回顶部js代码

    <!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" cont ...

  5. 关于HTML5手机端页面缩放的问题

    通常在写HTML5手机端页面的时候,我们会发现页面所显示元素的比例不正确,那此时我们需要添加的就是: <meta name="viewport" content=" ...

  6. html5手机端播放音效不卡的方法

    html5手机端播放音效不卡的方法线下载http://wxserver.knowway.cn/solosea/js/audioEngine.js 这个是性能不错 然后直接播放音效就可以了 audioE ...

  7. 70.JS---利用原生js做手机端网页自适应解决方案rem布局

    利用原生js做手机端网页自适应解决方案rem布局 刚开始我用的是下面这段代码,然后js通过外部链接引入,最后每次用手机刷新网页的时候都会出现缩略图 function getRem(pwidth, pr ...

  8. 手机端网页使用html5地理定位获取位置失败的解决办法

    网上有很多关于html5 geolocation 获取地理定位的方法,我试了下,只有在IE edge浏览器可以成功获取到,在chrome,firefox,手机端的safari,QQ浏览器,微信浏览器, ...

  9. 手机端网页web开发要点

    1.初始化 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

随机推荐

  1. HDU6191(01字典树启发式合并)

    Query on A Tree Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 132768/132768 K (Java/Othe ...

  2. npm 全局执行 update 、 outdated 出现 npm-debug.log 404 错误的问题

    想要执行一次全局更新,发现屡次报错: # npm update -g 提示的错误信息包含如下内容: npm ERR! code E404 npm ERR! 404 Registry returned ...

  3. 使用node.js进行API自动化回归测试

    概述 传统的QA自动化测试通常是基于GUI的,比如使用Selenium,模拟用户在界面上操作.但GUI测试的开发.维护成本和运行的稳定性一直是测试界的老大难问题.投入大量的人力物力开发.维护.运行,却 ...

  4. Oracle 11g数据库详细安装过程

    1.Oracle 11g下载 官方网址为:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.h ...

  5. Python 关于Python函数参数传递方式的一点探索

    关于Python函数参数传递方式的一点探索 by:授客 QQ:1033553122 实践代码 #!/usr/bin/env python # -*- coding:utf-8 -*- __author ...

  6. 安卓开发ScrollView嵌套ListView只显示一行

    在用列表控件做一个“更多功能”的界面的时候 <?xml version="1.0" encoding="utf-8"?> <ScrollVie ...

  7. [OTA] 系统加密后Recovery是如何读取OTA升级包的

    目前很多Android手机采用的FUSE方案,也就是内部SD卡不单独占用一个文件系统而实际上占用的是userdata的空间. 当系统加密后,解密需要VOLD的参于.而在Recovery模式下,是没有V ...

  8. django学习之命令

    1.启动一个django项目: $ django-admin startproject <project-name> 2.创建一个应用: $ python manage.py starta ...

  9. [20171124]手工使用Seed_Database.dfb和Seed_Database.ctl建库.txt

    [20171124]手工使用Seed_Database.dfb和Seed_Database.ctl建库.txt --//昨天看yueli34的帖子,链接http://www.itpub.net/thr ...

  10. 洗礼灵魂，修炼python（22）--自定义函数（3）—函数作用域，闭包

    前面你看到嵌套两层的函数,也许你有感而发,想来点刺激的对不?那么如果每层内的变量名如果相同会怎样?拿个例子看下就知道: 报错了,报错信息大意是,本地变量‘num’引用前没有被赋值定义.这咋回事,我外层 ...