<!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. SSM实现简单后台分页

    1.简单思路 这是最常见的分页格式,分析一下我们需要传什么数据给前端吧! 首先是左边下面的总共几条记录,然后是右边的当前页面,然后就是一些你所需要展示的数据.对了每页显示多少条是不也得控制下,下面的显 ...

  2. linux下vscode的c++工程配置

    准备 安装vscode,可直接下载deb包进行安装,完成后安装C/C++ for Visual Studio Code插件,安装后重启(最新1.3版本以后不需要重启). 生成目录和文件 新建文件夹[t ...

  3. JS window与document

    开头语:嗯~~~~~~~~~ 正文如下 一.window window是Javascript中的最高级对象,它是document.location和history对象的父对象.正因为window是一个 ...

  4. 使用普通用户执行 docker

    CentOS 版本 7.4,Docker 版本 docker-1.13 及以下 ll /var/run/docker.sock srw-rw----. 1 root root 0 May 25 14: ...

  5. idea vue.js插件安装

    Vue.js for IntelliJ IDEA-based IDEs This plugin provides support for Vue.js in IntelliJ IDEA Ultimat ...

  6. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  7. 快捷键整理（来源：http://www.cnblogs.com/xing901022/p/4741630.htm）

    Eclipse 跳转到指定行:ctrl+l 1几个最重要的快捷键 代码助手:Ctrl+Space(简体中文操作系统是Alt+/)快速修正:Ctrl+1单词补全:Alt+/打开外部Java文档:Shif ...

  8. loadrunner 运行场景-命令行运行场景

    运行场景-命令行运行场景 by:授客 QQ:1033553122 1 相对路径与绝对路径 在场景中为脚本指定一个相对位置,可以是相对于当前场景目录或lr安装目录. 当你运行一个场景,场景自动从这个相对 ...

  9. WebAPI路由、参数绑定

    ​ 一.测试Web API a)测试Web API可以用来检测请求和返回数据是否正常,可以使用Fiddler.Postman等工具.以Fiddler为例,这是一个http协议调试代理工具,它能够记录客 ...

  10. Application.Current的使用

    来源 http://www.cnblogs.com/symons/archive/2010/03/15/1686200.html Application.Current的使用 WPF程序对应一个App ...