html5--2.6新的布局元素(5)-nav

最新推荐文章于 2024-08-29 19:24:16 发布

转载最新推荐文章于 2024-08-29 19:24:16 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Renyi-Fan/p/7910560.html

本文介绍了HTML5中的aside和nav元素的语义及其用法，通过实例展示了如何利用这两个元素进行网页布局，包括定义侧边栏和导航栏的具体实现。

html5--2.6新的布局元素(4)-aside/nav

学习要点

了解aside/nav元素的语义和用法
通过实例理解aside/nav元素的用法

1. aside元素

aside元素通常用来设置侧边栏。
用于定义article元素之外的内容，前提是这些内容与article元素内的内容相关。
同时也可嵌套在article元素内部使用，作为主要内容的附属信息，比如与主内容有关的参考资料，名词解释等。

1. nav元素

通常用它给超链接分组用来定义导航栏，包括主导航栏，和侧边导航栏
并非所有的超链接都放在nav元素中，通常只把一个文档中的主导航栏放在nav中
在文章页面中，nav还可以用来给一个文章做一个目录的超链接

实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         nav{width: 100%;height: 40px;background: #FF6677;text-align: center;padding: 6px}
 8         /*放在一行*/
 9         li{display: inline;}
10         /*去掉a标签的横线*/
11         a{text-decoration: none;}
12     </style>
13 </head>
14 <body>
15     <nav><ul>
16         <li><a href="">首页</a></li>    
17         <li><a href="">电脑办公</a></li>
18         <li><a href="">平面设计</a></li>
19         <li><a href="">设计素材</a></li>
20         <li><a href="">电脑办公</a></li>
21         <li><a href="">平面设计</a></li>
22     </ul></nav>
23 </body>
24 </html>

View Code

转载于:https://www.cnblogs.com/Renyi-Fan/p/7910560.html