Web前端开发笔记——一级导航栏

最新推荐文章于 2025-06-01 21:17:58 发布

原创

最新推荐文章于 2025-06-01 21:17:58 发布 · 611 阅读

8 ·

CC 4.0 BY-SA版权

这篇博客主要介绍了如何使用HTML和CSS实现一级导航栏。通过ul li方法和div方法进行了实践，讲解了float属性及其作用，CSS页面布局的相关属性如display, overflow和position。还探讨了position属性的不同值，包括absolute和relative定位，并强调了包含块的概念在绝对定位中的重要性。" 125581644,7640453,手动安装Ubuntu 12上的cmake 3.5.1,"['Linux', '服务器', 'Ubuntu', 'cmake']

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

一级导航栏编辑练习

1、ul li方法实现

<1> 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style >
        a{
            color: #ffffff;
            text-decoration: none;
        }
        a:hover{
            color: #ffffff;
            text-decoration: underline;
        }
        .top_nav{
            padding: 10px 10px 0;
            font-size: 12px;
            font-weight: bold;
            margin: 1px 0 0 0;
            list-style: none ;
            border-bottom: 8px solid darkred ;
            overflow: hidden ;
            /*background-color: #33b5e5 ;*/
        }
        .top_nav li{
            float: left ;
            margin-right: 1px;
        }
        .top_nav li a{
            position: relative ;
            z-index: 0;
            line-height: 20px;
            text-decoration: none ;
            background: #dddddd ;
            color: #666666 ;
            display: block ;
            width: 80px;
            text-align: center ;
        }
        .top_nav li a span{
            position: absolute ;
            visibility: hidden ;
        }
        .top_nav li a:hover span {
            line-height: 20px;
            text-decoration: none ;
            background: #dddddd ;
            colo