页眉中的导航如何写

版权声明:本文为博主原创文章,请勿转载。 https://blog.csdn.net/Neil_Wesley/article/details/51595190

不啰嗦,直接上代码


<body>
<header>
<h1>牛逼的导航</h1>
<!-- 块元素nav -->
<nav role="navagation">
<!-- 无序列表ul -->
<ul>
<li>
<a href="http://www.google.com">谷歌是皇帝</a>
</li>
<li>
<a href="http://www.baidu.com">百度是太监</a>
</li>
<li>
<a href="http://www.bing.com">必应说“我”说的对</a>
</li>
</ul>
</nav>
</header>

效果:

牛逼 的导航

解释:

1、使用到的元素有header、nav、ul、ol、li、a

2、header标识这是页眉

3、nav是块元素,为导航开辟出一块小地方

4、ul是无序列表(Unordered list),表示导航中条目的顺序不重要

5、ol是有序列表(Ordered List),表示导航中条目的顺序很重要

6、li表示这是一个链接哦,默认样子是在链接文字前有小黑点,并且每个li之间用行来划分开,可以用css去掉小黑点并且实现一行显示

猜你喜欢

转载自blog.csdn.net/Neil_Wesley/article/details/51595190