<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
    <style type="text/css">
        body{margin: 0px;}
        header{width: 100%;height: 50px;background:#aefeee;}
        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: #f0ffff;clear: left;}
        figure{padding: 0px;}
        figcaption{text-align: center;}
        img{max-width: 70%;}
        ul{list-style: none;}
        li{display: inline;}
        a{text-decoration: none;}
    </style>

</head>
<body>
    <header>
        <hgroup>
            <img src="h.jpg"  alt="h1" style="width: 30px;height: 30px;">
            <h4>移动开发练习</h4>
        </hgroup>
    </header>
    <aside>
        <ul>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
            <li><a href=""><img src="h.jpg" width="70%"   height="30px" alt="">超级链接</a></li>
        </ul>
    </aside>
    <section>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
        <figure>
            <img src="0.jpg" width="50%" height="100px"><img src="1.jpg" width="50%" height="100px">
        </figure>
        <figcaption>图片案例</figcaption>
    </section>
    <footer>
    <nav>
        <ul>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>
            <li><a href=""><img src="h.jpg" width="45px" height="30px" alt=""></a></li>                
        </ul>        
    </nav>        
    </footer>
</body>
</html>

html5，实例开发代码的更多相关文章

  1. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  2. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（六）媒体查询

    响应式设计的另一个重要技术手段是媒体查询.如果只是简单的设计一个流式布局系统,那么可以保证每个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这样的设计称不上响应 ...

  3. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（五）图解通过Fiddler加速开发

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  4. 《HTML5网页开发实例详解》连载（四）HTML5中的FileSystem接口

    HTML 5除了提供用于获取文件信息的File对象外,还添加了FileSystem相关的应用接口.FileSystem对于不同的处理功能做了细致的分类,如用于文件读取和处理的FileReader和Fi ...

  5. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（三）DOCTYPE和字符集

    在2.1.2节中通过新老DOCTYPE的对比,读者可以清晰地看到HTML 5在精简旧有结构上做出的努力.DOCTYPE在出现之初主要用于XML中,用作描述XML允许使用的元素.属性和排列方式.起初HT ...

  6. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  7. 免费的HTML5连载来了《HTML5网页开发实例具体解释》连载（六）媒体查询

    响应式设计的还有一个重要技术手段是媒体查询.假设仅仅是简单的设计一个流式布局系统,那么能够保证每一个网格按比例的放大和缩小,但有可能会使得在小屏幕下(如手机设备)网格太小而严重影响阅读,这种设计称不上 ...

  8. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  9. 值得 Web 开发人员收藏的20个 HTML5 实例教程

    当开始学习如何创建 Web 应用程序或网站的时候,最流行的建议之一就是阅读教程,并付诸实践.也有大量的 Web 开发的书,但光有理论没有实际行动是无用的.现在由于网络的发展,我们有很多的工具可以用于创 ...

随机推荐

  1. js正则表达式校验非负整数：^\d+$ 或 ^[1-9]\d*|0$ 【转载】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Objective-c的内存管理MRC与ARC

    Objective-c的内存管理MRC与ARC   Objective-c中提供了两种内存管理机制MRC(MannulReference Counting)和ARC(Automatic Referen ...

  3. 类库，委托，is和as运算符，泛型集合

    类库:其实就是一堆类文件,只不过用户看不到这些类的源代码,保密性好. 优点:保密性好缺点:如果这个方法不好用,使用者无法自己去更改它. 类文件是.cs    类库是.dll 新建项目为类库,在debu ...

  4. .net 服务器端文件下载

    string path = Server.MapPath("/Source/mjpjb.rar"); System.IO.FileInfo file = new System.IO ...

  5. oracle 字符乱码问题解决方案

    今天在客户服务器上遇到了oracle中文乱码问题,第一个想到的是:要想避免oracle字符乱码的问题,需要注意oracle客户端的字符编码和服务端的字符编码保持一致. 于是操作如下: 1.查看服务端字 ...

  6. php extension memcache and memcached module on centos6

    环境 centos6 php5.6 nginx 1.8 防火墙均关闭 我在这里简单描述一下过程 #install nginxyum -y install pcre pcre-devel openssl ...

  7. 使用ImageCreate()创建一个代表空白图像的变量

    在建立图像创建环境之前,还需要做一些准备工作.首先,安装t1lib接着安装jpeg-6b,然后再安装GD库文件.在安装时一定要按这里给定的顺序进行安装,因为在编译GD入库时会用到jpeg-6b,如果没 ...

  8. 第七周PSP

    团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 8:20 10:34 20 58 68 分析与 ...

  9. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  10. Android课程---日历选择器和时间选择器

    package com.hanqi.test5; import android.os.Bundle; import android.support.annotation.IdRes; import a ...