css-导航条（一）

作者: 杰伊_约翰 | 来源:发表于2018-11-04 08:55 被阅读0次

css-导航条（一）
css-导航条
CSS-移动端页面（响应式）
导航条设置
Tailwind Navbar
分页、导航条1、导航条2
分页导航栏开班信息
Bootstrap - 导航条
分页、导航条1、导航条2、开班信息
练习二导航条

导航条一般来说电商网站的都分左右两小块，某些是一整块的长条。
在排列文字的时候我们需要用到浮动（float），这样才能使文字依次按顺序排列，在前面的时候我写了一个布局里的flaot，那个是排列div元素的。

作业：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 960px;
            height: 40px;
            background-color: #55a8ea;
            margin: 50px auto 0;

        }
        .box1 li{
            padding-left: 20px;
            width: 10%;
            height: 100%;
            list-style: none;
            float: left;
        }
        a{
            display: block;
            height: 100%;
            width: 100%;
            text-decoration: none;
            font-family: '微软雅黑';
            color: white;
            text-align: center;
            line-height: 40px;
        }
        a:hover{
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="box1">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">程序开发</a></li>
            <li><a href="#">网络营销</a></li>
            <li><a href="#">企业VI</a></li>
            <li><a href="#">案例展示</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
</body>
</html>

image.png