弹性布局做导航

弹性布局做导航

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


<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('
  • '+val+'
  • '
    ); }) })
    script> body> html>

    效果图一

    弹性布局做导航_第1张图片

    效果图二

    弹性布局做导航_第2张图片

    你可能感兴趣的:(css,web前端,flex,导航,布局)