弹性布局做导航

最新推荐文章于 2024-07-21 21:06:06 发布

caterpillar tail

最新推荐文章于 2024-07-21 21:06:06 发布

阅读量2.4k

点赞数 2

分类专栏： css web前端文章标签： flex 导航布局

本文链接：https://blog.csdn.net/dongxingpeng/article/details/77507470

版权

web前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

2 篇文章 0 订阅

订阅专栏

弹性布局做导航

主要用到的属性 { display:flex}和{justify-content: space-around;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>弹性布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            width: 100%;
            height: 50px;
            list-style-type: none;
            display: flex;/*弹性布局*/
            justify-content: space-around;/*设置内容自适应*/
            background-color: cadetblue;
        }
        li{
        line-height: 50px;
        }
        li:hover{
            color: #fff;
        }
    </style>
</head>
<body>
<!--导航容器-->
<ul id="listNav"></ul>
<!--说明-->
<div class="title">弹性布局简单的使用,当数组里面的数据缺少时，布局会自动调整，让整个导航页面充满。</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script !src="">
    $(function () {
//      导航数据
        var data = ['首页','新闻','国内','国际','社会','娱乐'];
//      动态加载
        $.each(data,function (key,val) {
            console.log('输出',val);
            $("#listNav").append('<li>'+val+'</li>');
        })
    })
</script>
</body>
</html>

效果图一

图片效果一

效果图二

图片效果二

caterpillar tail

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
弹性布局做导航

弹性布局做导航主要用到的属性 { display:flex}和{justify-content: space-around;}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no
复制链接

扫一扫

专栏目录