<!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. Spring源码分析之IoC容器初始化

    本文首发于cdream个人博客(点击获得更加阅读体验) 欢迎转载,转载请注明出处 作为一个java程序员,保守估计一年里也都有300天要和Spring有亲密接触~~像我这种怕是每天都要撸撸Spring ...

  2. [转*译]Networking API Improvements in Windows 10

        在当今,以云优先,移动优先技术为宗旨的时代下,大多数Apps都至少有一些与web服务或网络上其他设备的集成.这些包括应用程序,它获取天气在线内容,新闻或体育比赛的分数,媒体或下载的播客,甚至对 ...

  3. Debian、Ubuntu恢复误删除(或者说重装)的/var/lib/dpkg

    在使用ubuntu的使用,有可能会碰到dpkg挂掉,网上的通用解决方法,如果不管用: 1, dpkg 被中断,您必须手工运行 sudo dpkg --configure -a解决此问题 2, sudo ...

  4. 洛谷P3987 我永远喜欢珂朵莉~(set 树状数组)

    题意 题目链接 Sol 不会卡常,自愧不如.下面的代码只有66分.我实在懒得手写平衡树了.. 思路比较直观:拿个set维护每个数出现的位置,再写个线段树维护区间和 #include<bits/s ...

  5. 【代码笔记】Web-JavaScript-JavaScript语法

    一,效果图. 二,代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 如今领占主导地位的19种AI技术！

    如今领占主导地位的19种AI技术! http://blog.itpub.net/31542119/viewspace-2212797/ 深度学习的突破将人工智能带进全新阶段. 2006 年-2015 ...

  7. Android事件总线（三）otto用法全解析

    前言 otto 是 Square公司发布的一个发布-订阅模式框架,它基于Google Guava 项目中的event bus模块开发,针对Android平台做了优化和加强.虽然Square已经停止了对 ...

  8. 关于MySQL checkpoint

    Ⅰ.Checkpoint 1.1 checkpoint的作用 缩短数据库的恢复时间 缓冲池不够用时,将脏页刷到磁盘 重做日志不可用时,刷新脏页 1.2 展开分析 page被缓存在bp中,page在bp ...

  9. Sublime Text 3 注册码激活码被移除的解决办法

    新版的sublime text3中加入了验证功能,之前成功注册的也被移除了,在网上搜索的验证码要么已经失效要么已经被封,少数几个正常的注册输入进去注册成功后几分钟之内这个注册码就会被莫名其妙的被移除. ...

  10. nginx 编译安装时的编译参数说明（不建议看）

    https://www.cnblogs.com/wazy/p/8108824.html ./configure --user=www \ #worker进程运行用户 --group=www \ #wo ...