html5
运用 html5 新特性,首先需要声明头文件,其实浏览器不认识头也会照最新标准渲染。声明后网站结构如下:1
- <!DOCTYPE html>
- <html>
- <head>
- <!--html lang="zh-cmn-Hans"-->
- <meta charset="UTF-8">
- <!--<link rel="stylesheet"type="text/CSS"href="css/style.css">-->
- <script type="text/javascript" src="js/main.js">
- </script>
- <!--script language="javascript"src="js/main.js"></script-->
- <title>
- !!!我是标题!??!
- </title>
- <style type="text/css">
- </style>
- <style>
- *{ margin:0; padding:0; }
- </style>
- </head>
- <body>
- <header>
- </header>
- <nav>
- <ul>
- <li>
- <a href="#" title="点击转到">
- 列表
- </a>
- </li>
- <li>
- <a href="#" title="点击转到">
- 列表
- </a>
- </li>
- <li>
- <a href="#" title="点击转到">
- 列表
- </a>
- </li>
- </ul>
- </nav>
- <article>
- </article>
- <footer>
- ©额,本文博主版权所有翻版必究
- </footer>
- </body>
- </html>
上面的例子中已经运用了 html5 新标签 header,nav,footer 等类似的还有:
- [email protected]"target="_blank">
- <header>:描述了文档的头部区域,于定义内容的介绍展示区域
- <nav>:定义导航链接的部分。
- <section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分,section 通常 包含了一组内容及其标题。
- <article>:定义独立的内容。
- <aside>:定义页面主区域内容之外的内容(比如侧边栏)。
- <figure>:标签规定独立的流内容(图像、图表、照片、代码等等)。
- <figcaption>:定义 <figure> 元素的标题。
- <footer>:述了文档的底部区域,一个页脚通常包含文档的作者,著作权信息,链接的使用条款,联系信息等。
在一个网页中,这些新的语义标签元素位置如下图所示(引用自:http://blog.csdn.net/nongweiyilady/article/details/53885433):
下面是各个部分的 css 细致构建:
1. 导航标签 <nav>
- nav {
- background - color: #f00;
- font - family: 'Microsoft YaHei';
- padding: 3px;
- text - align: center;
- }
- nav ul {
- margin: 6px 30px;
- border - left: 1px solid#0f0;
- border - right: 1px solid#0f0;
- font - size: 12px;
- }
- nav li {
- list - style - type: none;
- display: inline;
- }
- nav p {
- padding - left: 12px;
- padding - right: 12px;
- color: #fff;
- font - size: 15px;
- display: inline;
- }
- nav a {
- color: #fff;
- text - decoration: none;
- font - size: 15px;
- }
- nav a: link,
- nav a: visited,
- nav a: active {
- color: #fff;
- text - decoration: none;
- }
- nav a: hover {
- color: #00f;
- text - decoration: none;
- }
2. 左右留边,内部固定大小居中以 footer 为例:
- footer{
- height:150px;
- background-color:#f00;
- font-size:10px;
- color:#fff;
- }
- footer div{
- margin:0 auto;
- width:1000px;
- }
3.
来源: http://www.bubuko.com/infodetail-2157000.html