html5 简单实例源代码

来源：互联网发布：uiautomator java 编辑：程序博客网时间：2024/05/16 06:21

实例教程：http://www.w3school.com.cn/jquery/

源代码下载：

http://download.csdn.net/detail/wyx100/9827067

html5文件布局结构

html5文件布局结构html5语言标记

浏览器执行效果

html5文件源代码

源代码下载：

http://download.csdn.net/detail/wyx100/9827067

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome="><title>first html5 page</title><!--         <link rel="stylesheet" href="/css/style.css">        <script src="/js/libs/modernizr-2.5.3.min.js">        --><style type="text/css">body {margin: 0 auto;width: 900px;background: #fff;font: 100%/1.4 helvetica, arial, sans-serif;}header {background: #ccc;padding: 20px;}header h1 {margin: 0;}nav {float: left;width: 900px;background: #333;}nav ul {margin: 0;padding: 0;}nav ul li {list-style-type: none;display: inline;}nav li a {display: block;float: left;padding: 5px 10px;color: #fff;text-decoration: none;border-right: 1px solid #fff;}article {clear: left;float: left;width: 560px;padding: 20px 0;margin: 0 0 0 30px;display: inline;}article h2 {margin: 0;}aside {float: right;width: 240px;padding: 20px 0;margin: 0 20px 0 0;display: inline;}aside h3 {margin: 0;}footer {clear: both;background: #ccc;text-align: right;padding: 20px;height: 1%;}</style><script type="text/javascript"></script></head><body><!-- 头部 --><header><h1>头部</h1></header><!-- 导航 --><nav><ul><li id="home">Home</li><li id="about">About</li><li id="contact">Contact</li></ul></nav><!-- 导航 --><section><h1>My Article</h1><article><p>this is first article</p><div id="second_item">this is second article,I'm<a href="http://www.cnlbogs.com/hongten">Hongten</a></p><p>this is third article</p><p>this is 4's article</p></article></section><aside></aside><!-- 尾部 --><footer class="footer1"><p><a href="mailto:hongtenzone@foxmail.com">hongtenzone@foxmail.com</a> ||<a href="http://www.cnlbogs.com/hongten">Hongten</a></p></footer></body></html>

0 0