HTML+CSS練習---空隙產生記錄

news2024/11/15 6:47:35

1.第一層和第二層之間的間隙：以為導航欄超過高度朝下擠下來了

2.第2層兩個div中的空隙

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>


        @font-face {
        font-family: 'iconfont';
        src: url('./font/iconfont.ttf?t=1722477916565') format('truetype');
        }
        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            }

        body{
            padding: 0;
            margin: 0;
            background-color: #F5F5F5;
            font-size: 16px;
            font-family: Arial, Helvetica, sans-serif;
            
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }
        .clear::before{
            content: "";
            display: block;
            clear: both;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        .ml7{
            margin-left: 7px;
        }
        .mr7{
            margin-right: 7px;
        }
        .mtb7{
            margin: 7px 0px;
        }
        ul li{
            list-style: none;
        }
        .layer{
            margin: 0 auto;
        }
        .c5{
            color: #f50;
        }
        a{
            text-decoration: none;
        }
        #header1{
            background-color: #F5F5F5;
            height: 36px;
            width: 1280px;
        }
        #header1 .selectcorp{
            width: 500px;
            font-size: 16px;
            background-color: white;
        }
        #header1 .corpinfo{
            height: 30px;
            line-height: 30px;


        }
        #header1 .userinfo{
            margin-right: 30px;
            height: 30px;
            line-height: 30px;
 

        }
        #header1 .userinfo .ritem{
            margin: 0 15px;
     
        }

        #header1 .userinfo .ritem img{
            width: 18px;
            height: 18px;
        }

        /* 第2塊 logo部分 */
        #header2{
            background-color: #e1e9ff;
            height: 120px;

        }
        #header2 .content1{
            background-color:  #e1e9ff;
            height: 180px;
            width: 1280px;
            background-color: greenyellow;
            /* overflow: hidden; */

        }
        #header2 .content1 .logo{
            width: 600px;
            height: 180px;
            line-height: 180px;
            background-color: #f50;
           
 
         

      }
        #header2 .content1 .logo span{
            display: inline-block;
            height: 180px;
            line-height: 180px;
            font-size: 50px;
            font-weight: bold;
            background-color: #f50;

        }






    </style>
</head>

<body>
    <!-- 第一行登錄信息 -->
    <div id="header1" class="layer clear">
        <div class="corpinfo mtb7 fl">
            <span>公司代碼:</span>
            <select class="selectcorp">
                <option>000XXX--XXXXXXXXX股份有限公司</option>
            </select>
        </div>
        <ul class="userinfo mtb7 fr">

            <li  class="ritem fr">
                <span class="iconfont">&#xe798;</span>
                <span>安全退出</span>
            </li>
            <li  class="ritem fr">
                <span class="iconfont">&#xe7fb;</span>
                <span>修改密碼</span></li>
            <li  class="ritem fr">
                <span class="iconfont">&#xe60c;</span>
                <span>權限變更</span></li>
            <li class="ritem fr">
                <span class="iconfont">&#xe608;</span>
                <span>用戶名</span>
            </li>  
        </ul>

    </div>

    <!-- 第2行系統logo -->
    <div id="header2">
        <div class="content1 layer clear">
            <div class="logo fl">
                <img src=""><span>|XXX系統</span>
            </div>
            <div class="logo fr"> 
                <span style="color: #3378cf;">XXX化&nbsp;&nbsp;&nbsp;XXX化&nbsp;&nbsp;&nbsp;XXX化</span>
            </div>  
        </div>

    </div>


    <div class="lastone">

    </div>





</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1974203.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！