lovecoding
/
VIP24


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            width:94px;
            height:33px;
            background: #bebebe;
            /* float: left; */
            text-align: center;
            line-height: 33px;
            color:#fff;

            font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体;
            font-size: 14px;
            font-weight: bold;

            /* 文本修饰  */
            text-decoration: none;

            /* 多个占一个 可以设置宽高 */
            display: inline-block;

            /* 
            display:inline-block 有一个问题:两个行级块元素之间有一个间隙 ?
            解决方式：取到父元素，把父元素中的文字的字体大小设置为0
            
            */
        }
        a:hover{
            background: #cc0000;
        }
        #container{
            font-size: 0;
        }

    </style>
</head>
<body>    
    <div id="container">
        <a href="#">HOME</a>
        <a href="#">NEWS</a>
        <a href="#">ARTICLES</a>
        <a href="#">FORUM</a>
        <a href="#">CONTACT</a>
        <a href="#">ABOUT</a>
    </div>

</body>
</html>