纯html加css简单网页（新手初学，恐有漏洞，还请包涵，源码附后）

效果图

html部分代码

   <div class="zhu">

        <!-- header部分 -->

        <header>

            <div class="header-con">

                <div class="logo">logo</div>

                <nav>

                    <ul>

                        <li><a href="#"> 文案1</a></li>

                        <li><a href="#"> 文案1</a></li>

                        <li><a href="#"> 文案1</a></li>

                        <li><a href="#"> 文案1</a></li>

                        <li><a href="#"> 文案1</a></li>

                    </ul>

                </nav>

            </div> 

        </header>

       <!-- header部分 end -->

       <!-- main部分 -->

css部分代码 

*{

    margin:0;

    padding: 0;

    box-sizing: border-box;

    list-style: none;

  }  

  .zhu{

    width: 100%;

     min-width: 100%; 

    display:grid;

    grid-template-rows: 120px 1fr 120px;

       }

header,main,footer{

        padding: 24px 10vw;

    }

/* header begin */

header{

display:grid;

grid-template-columns: max-content 1fr;

align-items:center;

height: 90px;

width: 100%;

background: #e9e5e5;

text-align: center;

margin: 0 auto;

}

.header-con{

  display:grid;

  grid-template-columns: max-content 1fr;

  align-items:center;

  height: 40px;

  width: 100%;

  background: #e9e5e5;

  text-align: center;

  margin-left: 200px;

  }

  .logo{

    float: left;

  }

nav ul{

display:flex;

gap: 88px;

align-items: center;

justify-content: flex-end;

font-size: 18px;

}

nav ul li a{

text-decoration: none;

color: #000000;

}

nav ul li a:hover{

color: red;

}

/* header end */

/* main begin */

 

源码连接：链接：https://pan.baidu.com/s/1in1XQJmEL8KUIB27SFg1_Q 
提取码：uzom