css浮动4 

<head>
        <meta charset="UTF-8">
        <title>练习四</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            .header{
                height: 66px;
                background: #0000FF;
                border: 1px #0000FF solid;
                border-radius: 20px;
                color: aliceblue;
                text-align: center;
                padding: 1px;
                text-decoration: none;
            }
            .box1{
                width: 900px;
                margin: 0px auto;
            }
            .box{
                width: 179px;
                border-right: 2px solid;
                float: left
            }
            .span{
                border: 1px solid transparent;    
            }
        </style>
    </head>
    <body>
        <div class="header">
            <div class="box1">
            <div class="box">
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            </div>
                <div class="box">
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            </div>
            <div class="box">
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            </div>
            <div class="box span" >
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            <a href="" target="_blank" class="header"><b>新闻</b></a>
            <a href="" target="_blank" class="header">军事</a>
            <a href="" target="_blank" class="header">社会</a>
            <a href="" target="_blank" class="header">国际</a>
            </div>
            </div>
            </div>
        </div>
    </body>
</html>

 

posted @ 2019-01-24 18:50  forwardq  阅读(109)  评论(0)    收藏  举报