要创建导航栏和链接,我们需要用到HTML中的超链接标签和无序列表标签和列表项标签
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
在这个例子中,我们使用了
如果你想让导航栏水平排列,可以将
<nav>
<ul style="display: flex; list-style: none;">
<li style="margin-right: 1rem;"><a href="#home">首页</a></li>
<li style="margin-right: 1rem;"><a href="#about">关于我们</a></li>
<li style="margin-right: 1rem;"><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
在这个例子中,我们使用了CSS样式来将
如果你想给导航栏添加标题,可以使用
<nav>
<h3>网站导航</h3>
<ul style="display: flex; list-style: none;">
<li style="margin-right: 1rem;"><a href="#home">首页</a></li>
<li style="margin-right: 1rem;"><a href="#about">关于我们</a></li>
<li style="margin-right: 1rem;"><a href="#services">服务</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
在这个例子中,我们使用了
如果你想给导航栏中的某些关键词加上高亮颜色,可以使用CSS样式或者标签:
<nav>
<h3>网站导航</h3>
<ul style="display: flex; list-style: none;">
<li style="margin-right: 1rem;"><a href="#home">首页</a></li>
<li style="margin-right: 1rem;"><a href="#about">关于<span style="color: red;">我们</span></a></li>
<li style="margin-right: 1rem;"><a href="#services">服务</a></li>
<li><a href="#contact"><span style="color: red;">联系我们</span></a></li>
</ul>
</nav>
在这个例子中,我们使用了CSS样式和标签来将“关于我们”和“联系我们”中的关键词加上了红色高亮颜色。
最后,如果你想将代码块以纯文本形式展示,可以使用
标签:<pre> <nav> <h3>网站导航</h3> <ul style="display: flex; list-style: none;"> <li style="margin-right: 1rem;"><a href="#home">首页</a></li> <li style="margin-right: 1rem;"><a href="#about">关于<span style="color: red;">我们</span></a></li> <li style="margin-right: 1rem;"><a href="#services">服务</a></li> <li><a href="#contact"><span style="color: red;">联系我们</span></a></li> </ul> </nav> </pre>
在这个例子中,我们使用了
标签将代码块以纯文本形式展示,使得代码更易于阅读和复制。2023-05-09 22:41:19 更新