HTML5导航栏菜单的设计与实现

原创于 2020-08-09 22:54:02 发布 · 1.2w 阅读

64 ·

CC 4.0 BY-SA版权

文章标签：

#html5

HTML专栏专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了如何使用HTML和CSS来设计并实现一个简洁美观的导航栏菜单。通过具体的代码示例，展示了如何设置样式以创建无列表标记的水平菜单，以及如何使用链接伪类进行样式调整，包括字体加粗、背景颜色变化等。

在这里插入图片描述

<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏菜单的设计与实现</title>
        <style>
            ul {
                list-style: none;/*用于去掉列表标记实心点*/
                margin: 0;
                padding: 0;
            }		
            li {
                float: left;
            }
            a:link, a:visited {
                display: block;/*设置为块级元素*/
                width: 100px;/*设置宽度为100像素*/
                font-weight: bold;/*设置字体为加粗*/
                color: white;/*设置字体为白色*/
                background-color:#5AF;/*设置背景颜色为蓝色*/
                text-align: center;/*设置文本居中显示*/
                padding: 5px;/*设置各边内边距为5像素*/
                text-decoration: none;/*去掉文本下划线*/
            }
            a:hover, a:active {
                background-color:#006FDD;
            }
        </style>
    </head>
    <body>
        <h3>导航栏菜单的设计与实现</h3>
        <hr />
		<!--导航栏-->
        <nav>
            <ul>
                <li><a href="#">头条</a></li>
				<li><a href="#">娱乐</a></li>
                <li><a href="#">热点</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">财经</a></li>
                <li><a href="#">科技</a></li>
            </ul>
        </nav>
    </body>
</html>