<!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. 如何用minitab检测一组数据是否服从正态分布

    打开Minitab之后 点击Stat>Basic Statistics> Normality Test  分析之后若 P value(P值)>0.05,说明此组数据服从正态分布

  2. Why in the code “456”+1, output is “56”

    Question: #include <iostream> int main() { std::cout << "25"+1; return 0; } I ...

  3. vue VNode如何使用，是什么东西？

    前言:element ui 中有些 demo 使用了 vue 的 VNode,但是 demo 毕竟不全,所以想要了解 VNode 到底是什么,如何写出符合自己业务的代码. vue 官网介绍:渲染函数 ...

  4. 本地navicate for mysql怎么修改密码？

    1.以前在本地设置sql库密码,就是在本地新建数据库的时候就输入,怎么也链接不上,原来是新建数据库的时候不能输入密码,需要在内部修改. 2. 打开mysql user表 3. 打开mysql user ...

  5. regular.js

    //手机号验证 var regMobile=/^1[3,5,8]\d{9}$/; //固定电话 var regPhone=/^(^0\d{2}-?\d{8}$)|(^0\d{3}-?\d{7}$)|( ...

  6. 原生js 对象深拷贝

    经常需要copy一个对象,又怕拷贝有问题,那下面这段就很方便啦,不用担心copy只是一个引用了. /** @ values 需要copy的变量 */ function deepClone(values ...

  7. [笔记] imooc《JavaScript深入浅出》对象与函数

    懒得做草稿了,习惯md也懒得扔印象笔记 主要是之前没去接触这一部分,就随手记下来了 创建对象的方法 对象字面量 new构造器/原型链 Object.create() 属性操作 属性读写(以及读写异常. ...

  8. 【读书笔记】iOS-成为一名开发者

    iOS开发者计划是按年付费的,在过期前60天可以开始续费.如果你不续费的话,你将无法发布应用.另外苹果会吊销你的开发者证书和发布证书.最后,苹果将你在iTunes App Store上的所有应用下架. ...

  9. 【读书笔记】iOS-iOS的UI自动化测试

    1,Instruments iOS自带的自动化测试工具. 2,TuneupJs  最早的iOS自动化测试工具 https://github.com/alexvollmer/tuneup_js 3,yn ...

  10. 关于BI商业智能的“8大问”｜一文读懂大数据BI

    这里不再阐述商业智能的概念了,关于BI,就从过往的了解,搜索以及知乎的一些问答,大家困惑的点主要集中于大数据与BI的关系,BI的一些技术问题,以及BI行业和个人职业前景的发展.这里归纳成8个问题点,每 ...