<!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. 索引器、哈希表Hashtabl、字典Dictionary(转)

    一.索引器 索引器类似于属性,不同之处在于它们的get访问器采用参数.要声明类或结构上的索引器,使用this关键字. 示例:   索引器示例代码 /// <summary> /// 存储星 ...

  2. 浅谈iOS中的userAgent

    浅谈iOS中的userAgent   User-Agent(用户代理)字符串是Web浏览器用于声明自身型号版本并随HTTP请求发送给Web服务器的字符串,在Web服务器上可以获取到该字符串. 在公司产 ...

  3. 改进iOS客户端的升级提醒功能

    改进iOS客户端的升级提醒功能 功能设计 先申明一下,我是码农,不是一个产品经理,但我觉得现有市面上的很多 App,设计的 "升级提示功能" 都不太友好.在此分享一下我的想法,欢迎 ...

  4. 【软件工程实践一】git使用心得

    第一次软工实践,我们需要做的是学习如何使用github,并将本地库的文件添加到远程库中,以下是我进行实践的工程. [一.git的安装及准备工作] 首先从http://msysgit.github.io ...

  5. Window.onload与$（document）.ready()的对比

  6. C# 安装和卸载 Windows Service

    特别注意: 安装Window Service 的时候,一定要用管理员打开命令提示符(cmd) 1. 创建Windows Service 服务项目 2. Service设计界面:右键-->选择安装 ...

  7. Linux权限扩展

    在LINUX中我们创建文件或文件夹的时候系统总会为我们创建的对象分配一个默认的权限,那么今天我们就了解一下这个默认权限是怎么得来的?以及我们如何来改变系统的默认权限设置? 在LINUX系统中我们打开每 ...

  8. 2016huasacm暑假集训训练三 C - Til the Cows Come Home

    题目链接:http://acm.hust.edu.cn/vjudge/contest/123674#problem/C N题目大意是有n个点,然后给出从a点到b点的距离,a和b是互相可以抵达的,则是无 ...

  9. @property语句

    @property声明的形式是: @property ( attributes ) type name; type和name的含义一目了然,attributes描述了如何编写访问器. 一.assign ...

  10. mapminmax的用法详解 _MATLAB

    ============外一篇 有关mapminmax的用法详解 by faruto==================================转自:http://www.ilovematla ...