导航栏的魔法

最新推荐文章于 2024-05-30 09:41:34 发布

傻她你呀

最新推荐文章于 2024-05-30 09:41:34 发布

阅读量165

点赞数 1

分类专栏： CSS3 web布局设计文章标签：导航栏

本文链接：https://blog.csdn.net/qq_41672008/article/details/102452450

版权

CSS3 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

web布局设计

4 篇文章 0 订阅

订阅专栏

本文探讨如何利用CSS布局技巧，特别是margin-left: auto，来简洁地创建导航栏。通过示例，解释了如何避免使用justify-content:space-between，以实现更直观的HTML结构，并展示了一个基本的导航栏布局实现。

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

导航栏的魔法

说起导航栏如何制作，相信只要会html和css都会写出一个导航栏，现在就来谈谈导航栏的布局
假如我要制作这样的导航栏
因为图片太小看不见，为了更容易看清，看看左侧部分和右侧部分
左侧部分
右侧部分
我最开始想到的肯定是flex布局，然后使用 justify-content:space-between ，这样基本就可以实现布局了，代码会是这样子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>导航栏</title>
        <link rel="stylesheet" href="./nav.css">
    </head>
    <body>
        <div class="container">
            <div class="nav">
                <div class="left">
                    <a href="#" class="nav-item">Home</a>
                    <a href="#" class="nav-item">About Us</a>
                    <a href="#" class="nav-item">Products</a>
                    <a href="#" class="nav-item">Policy</a>
                </div>
                <a href="#" class="nav-item nav-right">Contact Us</a>
            </div>
        </div>
    </body>
</html>

nav.css里的css样式代码如下：

*{
    margin: 0;
    padding: 0;
}
.container{
    width: 100vw;
}
.nav{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
}
.nav-item{
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    margin-left: 16px;
}
.nav-right{
    margin-right: 16px;
}

基本上可以完美还原导航栏
左侧部分
右侧部分
但是吧如果是这样，那么魔法在哪里，现在来考虑有没有更简单的方法，假设我要使用下面的html布局

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>导航栏</title>
        <link rel="stylesheet" href="./nav.css">
    </head>
    <body>
        <div class="container">
            <div class="menuwrap">
                <a href="#" class="list-item">Home</a>
                <a href="#" class="list-item">About Us</a>
                <a href="#" class="list-item">Products</a>
                <a href="#" class="list-item">Policy</a>
                <a href="#" class="last-item">Contact Us</a>
            </div>
        </div>
    </body>
</html>

很显然，这样的html看起来很舒服，但是css样式该怎么写才可以成功还原所要求的导航栏样式，首先 justify-content:space-between 没法使用了
看啊可能css样式

.menuwrap{
    width: 100vw;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 16px;
}
.list-item,.last-item{
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
    color: #fff;
}
.list-item{
    margin-right: 16px;
}
.last-item{
    margin-left: auto;
}