导航栏

利用text-align-last居中对齐

在利用将块元素转为行内块元素，使a标签分布在周围

块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。

行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。

行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .div1 {
            position: fixed;
            height: 40px;
            width: 100%;
            background-color: rgb(250, 246, 248);
            border: 1px solid #e1e1e1;
        }
        .div2 {
            height: 275px;
            background: url(../img/hznu.jpg) 50%;
        }
        .div3 {
            height: 50px;
            background-color: rgb(49, 74, 92);
        }
        .div4 {
            width: 1000px;
            height: 50px;
            margin: 0 auto;
            /* background-color: #666; */
            font:17px/50px "微软雅黑";
            text-align-last: justify;
        }
        a {
            color:white;
            text-decoration: none;
            padding: 0 10px;
            display: inline-block;
        }
        a:first-child{
            background-color: #ee0012;
        }
        a:hover {
            background-color: #ee0012;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3">
        <div class="div4">
            <a href="#">首页</a>
            <a href="#">央视要闻</a>
            <a href="#">工作动态</a>
            <a href="#">央视党建</a>
            <a href="#">CCTV看点</a>
            <a href="#">合作交流</a>
            <a href="#">国际传播</a>
            <a href="#">创新探索</a>
            <a href="#">关于央视</a>
        </div>
    </div>
</body>
</html>