HTML5+CSS3实现简单菜单导航栏

置顶

yellow_flowers

于 2019-04-11 22:00:44 发布

阅读量6k

点赞数 3

分类专栏：前端_基础文章标签： html css web

本文链接：https://blog.youkuaiyun.com/yellow_flowers/article/details/89220820

版权

本文档详细介绍了如何使用HTML5和CSS3来构建一个简单的菜单导航栏。通过设置浮动布局，移除li元素的默认样式，调整背景宽度和颜色，以及定制字体颜色，可以实现横排的导航条效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

期望效果：

纯HTML代码视图效果：

纯HTML视图的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航菜单的设计与实现</title>
    <!--<link rel="stylesheet" href="../css/NavigationBar.css">-->
</head>
<body>
<div id="recruits">
<h3>导航菜单的设计与实现</h3>
<hr/>
<nav>
    <ul>
        <li><a href="#">百度</a></li>
        <li><a href="#">娱乐</a></li>
        <li><a href="#">热