HTML5前端开发入门之使用a标签伪类选择器进行导航条实战

最新推荐文章于 2024-04-20 18:56:45 发布

小韩同学哇

最新推荐文章于 2024-04-20 18:56:45 发布

阅读量791

点赞数

分类专栏：从零玩转Html5前端开发

本文链接：https://blog.csdn.net/qq_41886761/article/details/85625900

版权

本文介绍了HTML5前端开发中如何利用a标签的伪类选择器来实现导航条的交互效果，包括鼠标悬停和长按状态的样式设计。通过实例代码和部分效果图，帮助初学者掌握这一技能。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>53-a标签伪类选择器导航条实战</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 960px;
            height: 40px;
            background-color: green;
            margin: 100px auto;
        }
        ul li{
            list-style: none;
            width: 120px;
            height: 40px;
            float: left;
            text-align: center;
            line-height: 40px;
            background-color: pink;
        }
        ul li a{
            display: inline-block;
            text-decoration: none;
            color: white;
            width: 120px;
            height: 40px;
        }
        ul li a:hover{
            color: yellow;
            background-color: #999999;
        }
        ul li a:active{
            color: red;
        }
    </style>