<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <!-- 修饰CSS样式 -->
        <style type="text/css">
            body{
                margin: 0;
                padding: 0;
            }
            .header{
                /* 用来填充背景 */
                /* 用来填充高度 */
                height: 76px;
                background-color: white;
                
            }
            .header-content{
                width: 1343px;
                /* border: 1px solid red; */
                /* 水平居中 */
                margin: 0 auto;
            }
            
            #logo{
                /* 垂直对齐方式 */    
                vertical-align: top;
                width: 200px;
                height: 50px;
                margin-top: 6px;
                
            }
            
            a{
                height: 60px;
                width: 48px;
                /* border: 1px solid green; */
                /* 让a标签在一行显示，并且支持宽高 */
                display: inline-block;
                color: black;
                /* 去掉a标签的下划线 */
                text-decoration: none;
                /* 文字水平居中 */
                text-align: center;
                /* 文字垂直居中  让行高等于box的高度*/
                line-height: 60px;
            }
            
            
        </style>
    </head>
    <body>
        <!-- 搭建网页结构 -->
        <div class="header">
            <div class="header-content">
                <!-- 左边部分 -->
                <div class="header-left">
                    <a href="" id="logo"><img src="../../images/logo.png" ></a>
                    <a href="">实战</a>
                    <a href="">课程</a>
                    <a href="">班级</a>
                    <a href="">博客</a>
                </div>
            </div>
            <!-- 右边暂时写不了 -->
                <div class="header-left">
                    
                </div>
        </div>
        
        
        
    </body>
</html>
最后修改：2019 年 04 月 28 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏