页面开发

隐藏样式，有三种方法

一种是dispplay

第二种是透明度

第三中是  visibility: visible;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>公司网站页面</title>
    <style>
        .header{
            width: 1180px;
            margin: 0 auto;
            height: 90px;
            border: 1px solid red;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo{
            width: 100px;
            
        }
         .logo img {
             width: 100px;
             height: 80px;
             animation: logoBig 6s linear  infinite;
         }
        .nav{
            flex: 1;
            display:  flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            padding: 0 20px;
        }
        .item{
            position:  relative;
            padding: 20px 10px;
        }
        .item:hover .show {
           background: red;
           visibility: visible;
        }
        .show {
            visibility: hidden;
            position: absolute;
            height: 60px ;
            width: 100px;
            top :50px;
            left: 0;
            display: flex ;
            flex-direction: column;
            justify-items: center;
            background: #000;
            color: #FFF;
            padding: 8px;
            border-radius: 5px;
        }
        .show:hover{
            visibility: visible;
        }
        .lable{
            margin: 2px 0;
            padding: 3px;
        }
        .lable:hover{ 
            color:  red;
            background: yellow;
        }
        .tel{
            width: 120px;
        }
        @keyframes logoBig {
            0%{
                width: 100px;
                height: 80px;
            }
            50%{
                position: absolute;
                top :200px;
                left: 10px;
                width: 400px;
                height: 320px;
            }
            100%{
                width: 100px;
                height: 80px;
            }
            
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"><img src="https://www1.djicdn.com/dps/f77b1a299ef740568ce7fcbe13990403.jpg"  ></div>
        <div class="nav">
            <div class="item">首页</div>
            <div class="item">关于我们
                <div class="show">
                <div class="lable">加入我们</div>
                <div class="lable">公司简介</div>
                 </div>
            </div>
            <div class="item">解决方案
                <div class="show">
                    <div class="lable">公司一</div>
                    <div class="lable">案例二</div>
                     </div>
            </div>
            <div class="item">荣誉证书
                <div class="show">
                    <div class="lable">全国第一</div>
                    <div class="lable">牛逼哄哄</div>
                     </div>
            </div>
            <div class="item">新闻报道</div>
            <div class="item">留言</div>
            
        </div>
        <div class="tel">
            <div>全国电话</div>
            <div>400-888-8888</div>
        </div>
    </div>
</body>
</html>

页面布局效果

 

posted @ 2022-03-26 23:52  剧里局外  阅读(29)  评论(0)  编辑  收藏  举报