Java教程

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>

 

效果图：

 

这篇关于026.央视官网顶部banner及导航布局的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航