其他分享
首页 > 其他分享> > 026.央视官网顶部banner及导航布局

026.央视官网顶部banner及导航布局

作者:互联网

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>2021-11-6</title>
        <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
            .div1{
                position: fixed;
                height: 40px;
                width: 100%;
                background-color: blue;
                border: 1px solid lawngreen;
            }
            .div2{
                height: 225px;
                background-color: black;
            }
            .div3{
                height: 50px;
                background-color: #7CFC00;
            }
            .div4{
                width:1000px;
                height: 50px;
                margin: 0 auto;
                font: 17px/50px "微软雅黑";
                text-align-last: justify;
            }
            a{
                color: white;
                text-decoration: none;
                padding: 0 10px;
                display: inline-block;
            }
            a:first-child{
                background-color: red;
            }
            a:hover{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3">
            <div class="div4">
                <a href="#">首页1</a>
                <a href="#">首页2</a>
                <a href="#">首页3</a>
                <a href="#">首页4</a>
                <a href="#">首页5</a>
                <a href="#">首页6</a>
                <a href="#">首页7</a>        
            </div>
            
        </div>
    </body>
</html>

 

效果图:

 

标签:color,text,50px,height,026,首页,background,官网,banner
来源: https://www.cnblogs.com/LLL0617/p/15515801.html