CSS导航栏

最新推荐文章于 2023-09-01 17:58:35 发布

原创最新推荐文章于 2023-09-01 17:58:35 发布 · 289 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #js

html 同时被 2 个专栏收录

1 篇文章

订阅专栏

CSS

1 篇文章

订阅专栏

该博客介绍了使用HTML和CSS实现导航栏的方法。先指出导航栏可用标签完成，接着阐述详细步骤，包括用标签定义无序列表并设置样式，给出了导航栏的CSS源码及在HTML文档中引入CSS的方法，还展示了HTML源码。

CSS导航栏

简介
总结

简介

导航栏<nav>就是一个链接列表，可以用<ul>标签来完成

以下是详细步骤：

步骤：

首先，用<ul>标签定义一个无序列表，设置样式：
list-style-type: none 清除列表项目前面的标记

CSS源码：

导航栏样式表：nav.css

/*------------------导航栏-------------------------*/
.nav ul{    
list-style-type: none;
margin: 0% 0%;
padding: 1%;
overflow: hidden;
background-color: rgb(250, 230, 180);
}
.nav li{
    float: left;
}
.header nav ul li.active a {
    color: #000;
}
.nav>ul>li>a {
    padding: 0 30px;
    outline: none;
    color: #838383;
    text-decoration: none;
    letter-spacing: 5px;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.75em;
}
.nav>ul>li>a::before {
    color: #000;
    background-color:  blue;    
    content: attr(data-hover);
    position: absolute;
    opacity: 0;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);    
    -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);    
    transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg);
    -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;    
    -moz-transition: -moz-transform 0.3s, opacity 0.3s;    
    transition: transform 0.3s, opacity 0.3s;
    pointer-events: none;    
}
.nav>ul>li>a:hover::before,
.nav>ul>li>a:focus::before {
    -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);    
    -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);    
    transform: scale(1) translateX(0px) translateY(0px) rotate(0deg);    
    opacity: 1;    
    background-color: rgb(0, 255, 100);    
    border-radius: 100% 0 100% 0;
}

CSS引入：

在HTML文档中引入nav.css：

<link rel="stylesheet" type="text/css" href="/css/main.css">

HTML源码：

HTML文档：

<header class="header">
    <nav class="nav" role="navigation">
        <ul>
            <li class="active"> <a href="#" data-hover="首页">首页</a> </li>
            <li> <a href="#" data-hover="示例">示例</a> </li>
            <li> <a href="#" data-hover="示例">示例</a></li>
            <li> <a href="#" data-hover="示例">示例</a> </li>
            <li> <a href="#" data-hover="示例">示例</a></li>
        </ul>    
    </nav>
</header>