css水平与垂直导航栏

最新推荐文章于 2021-06-03 10:45:22 发布

xy66

最新推荐文章于 2021-06-03 10:45:22 发布

阅读量501

点赞数

分类专栏： web前端

本文链接：https://blog.csdn.net/weixin_45742613/article/details/109757517

版权

web前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

css水平与垂直导航栏

理解皆在代码中

水平：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            margin: 0;
            padding: 0;
            overflow: hidden;
            list-style-type: none;
            border: 1px solid #e7e7e7;/* 细小边框 */
            background-color: #f3f3f3;
        }
        li{
            float: left;/* 向左对齐，right向右对齐 */
        }
        li a { /* 字体属性 */
            display: block;
            color: #666;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        li a.active {
            color: white;
            background-color: #4CAF50;
        }
        li a:hover:not(.active){/* 除了类名active外的所有元素 */
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
    </ul>
</body>
</html>

效果图
在这里插入图片描述
默认1em=16px；
加入 li a{width: 10em;}设置宽度
就变成了下面这样

垂直

类似水平结构
垂直结构不需要向左向右对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            width: 100px;
            list-style-type: none;
            background-color: #f1f1f1;
        }       

        li a {
            display: block;
            color: #000;
            padding: 8px 16px;
            text-decoration: none;
        }

        li a.active {
            background-color: #4CAF50;
            color: white;
        }

        li a:hover:not(.active) {
            background-color: #555;
            color: white;
        }
    </style>
</head>
<body>
    <ul>
        <li><a class="active" href="#home">主页</a></li>
        <li><a href="#news">新闻</a></li>
        <li><a href="#contact">联系</a></li>
        <li><a href="#about">关于</a></li>
      </ul>
</body>
</html>

效果图
在这里插入图片描述
东拼西凑终于近似完结，哈哈哈。
想到更多再补充。

xy66

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
css水平与垂直导航栏

css水平与垂直导航栏理解皆在代码中水平：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫