html+css布局实例：对C3School在线教程导航栏进行模拟编写

The..Fuir

已于 2022-03-22 17:28:35 修改

阅读量458

点赞数

分类专栏： css html 文章标签： css html

于 2022-03-21 21:49:47 首次发布

本文链接：https://blog.csdn.net/qq_51066068/article/details/123646795

版权

html 同时被 2 个专栏收录

50 篇文章 6 订阅

订阅专栏

css

45 篇文章 6 订阅

订阅专栏

问题描述：

对C3School在线教程导航栏进行模拟编写，做出以下效果图：

效果图：

代码实现：

注意flex布局的性质，如果不知道可以去看我的关于flex布局的博客（明天再码字，我也想躺平，呜呜呜），这需要对CSS有一定的理解才能弄明白。

height 和 line-height 区别：height 设置在标签内显示的这个标签的行高，line-height设置在标签内显示的标签内内容的高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏</title>
    <style>
        div{
            margin: 50px;
        }
        .menu{
            /* 让ul里的li小点消失 */
            list-style: none;
            /* 标签高度 */
            height: 50px;
            /* flex布局，按照一行排列 */
            display: flex;
            /* flex布局，居中排列 */
            justify-content: center;
            background-color: rgb(221, 218, 218);
            padding: 0;
        }
        li{
            /* 行内内容高度 */
            line-height: 50px;
            /* flex布局,充满整行，每一个都宽度一样，因为都设置成了1 */
            flex-grow: 1;
            /* li行的文字居中 */
            text-align: center;
        }
        /* 鼠标停留变色 */
        li:hover{
            background-color: rgb(126, 128, 128);
        }
    </style>
</head>
<body>
    <div>
        <ul class="menu">
            <li title="HTML/CSS 系列教程">HTML/CSS</li>
            <li title="浏览器脚本教程">Browser Side</li>
            <li title="服务器脚本教程">Server Side</li>
            <li title="编程教程">Programing</li>
            <li title="XML系列教程">XML</li>
            <li title="建站手册">WebBuilding</li>
            <li title="参考手册">Reference</li>
        </ul>
    </div>
</body>
</html>

第二种更完整的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .nav{
            width: 1210px;
            height: 48px;
            background-color: #e8e7e3;
            margin: 50px auto;
            display: flex;
            line-height: 48px;
        }
        li {
            flex-grow: 2;
            text-align: center;
        }
        a{
            text-decoration: none;
            color: #979795;
            display: block;
            font-size: 18px;
        }
        a:hover{
            background-color: #3f3f3f;
            color: #c7c6c2;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li><a href="#">HTML/CSS</a></li>
        <li><a href="#">Browser Side</a></li>
        <li><a href="#">Server Side</a></li>
        <li><a href="#">Programing</a></li>
        <li><a href="#">XML</a></li>
        <li><a href="#">Web Building</a></li>
        <li><a href="#">Reference</a></li>
    </ul>
</body>
</html>