<!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. PHP slim restfull框架nginx 配置

    http://docs.slimframework.com/ 下载地址这个东西很不错,照到官方的例子做 <?php require 'vendor/autoload.php'; $app = n ...

  2. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  3. 在IE8中使用padding设置select控件文字垂直居中

    在火狐.苹果.谷歌.欧鹏等主流浏览器中,select下拉表单的文字能够垂直居中,如图: 而在ie8中,select下拉表单的文字基本就是靠底部显示,如图: 那么,如何使得ie8下的select文字垂直 ...

  4. Oracle函数解析

    一:大小写控制函数 lower()函数:(此函数将全部的大写字母都可以变为小写字母) upper()函数:(将输入的字符串变为大写字母) initcap()函数:(将每个字符串的首字母大写)  二:字 ...

  5. zk master-slaver机制

    1.基本概念 >>zookeeper handler (zk句柄)有点类似文件句柄,打开一个文件就保持了一个文件句柄!同样的道理: 建立一个到zk server的session就会有一个z ...

  6. MySQL数据库基本指令

    对MySQL的指令不太熟悉,在此特别整理了一下一些常用的指令: 约定:大写字母写SQL关键字和函数名,小写字母写数据库.数据表和数据列的名字.(下述代码更新不同步,部分代码未依据此约定) 1 数据库的 ...

  7. css重新认识(2)

    1)行内元素可以用margin-left与margin-right调整位置,但用margin-top与margin-bottom来调整位置不会有效果,只有具有block属性值后才能像块级元素般被外边距 ...

  8. 64位虚拟机安装64位ubuntu出现问题

    virtualbox 出现this kernel requires an an x86-64 cpu 错误 如题,但是主机是win8 64位,使用virtualbox安装ubuntu-12.04.3- ...

  9. 第一章 开始编写第一个jsp

    第一章 搭好框架,需要tomcat服务器和jdk. JSP是Java Server Page的缩写,现在先让我们编写一个简单的jsp页面,看看jsp究竟能干什么? <%=new java.uti ...

  10. JavaScript入门篇 编程练习

    编程挑战 一.定义"改变颜色"的函数 提示: obj.style.color obj.style.backgroundColor 二.定义"改变宽高"的函数 提 ...