grid+flex布局仿 PHP 页头

效果图如下：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿PHP</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="/0713/static/css/reset.css">
    <style>
        .header {           
            height: 130px;
        }
        .header .top{
            width: 100VW;
            height: 40px;
            background-color: #444546;
        }
        .header .top .content{
            /* 定义居中: 内容区需要有宽度 */
            width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: 400px 100px;
            grid-auto-rows: 40px;
            place-content: space-between space-between;
            place-items: center start;
        }
        .header .top .content .title a{
            color: #fff;
            font-weight: lighter;
        }
        .header .top .content .top-r{
            display: flex;
            color: #fff;
        }
        .header .top .content .top-r span{
            padding: 0 10px;
        }
        .header .top .content .top-r .icon-lingdang{
            font-size: 22px;
        }
        .header .top .content .top-r img{
            width: 80%;
            border-radius: 50%;
        }
        .header .navs{
            width: 100vw;
            background-color: #fff;
            height: 90px;
            box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        }
        .header .navs .content{
            width: 1200px;
            margin: auto;
            display: grid;
            /* 1fr=auto */
            grid-template-columns: 140px 1fr 200px;
            /* 格子间距 */
            gap: 10px;
            grid-auto-rows: 90px;
            place-items: center start;
        }
        .header .navs .content img{
            width: 100%;
        }
        .header .navs .content .menu{
           display: flex;
        }
        .header .navs .content .menu a{
            padding: 0 10px;
        }
        .header .navs .content .menu a:hover,
        .header .navs .content .menu a.active{
            color: red;
            font-weight: bold;
        }
        .header .navs .content .right{
            display: flex;
        }
        .header .navs .content .right input[type="search"]{
            width: 200px;
            height: 36px;
            border-radius: 20px;
            border: none;
            outline: none;
            background-color: #eee;
            padding-left: 10px;
        }
        .header .navs .content .right .icon-sousuo{
            font-size: 22px;
            color: #ccc;
            position: relative;
            left: -30px;
            top:5px
        }
        .header .navs .content .right .icon-sousuo:hover{
            color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 页眉 -->
    <div class="header">
        <!-- 头部 -->
        <div class="top">
            <div class="content">
                <div class="title"> <a href="">PHP中文网-程序员梦开始的地方!</a></div>
                <div class="top-r">
                    <span class="iconfont icon-lingdang"></span>
                    <span class="iconfont"><a href=""><img src="/0713/static/images/user-pic.jpeg" alt=""></a></span>      
                </div>                          
            </div>
        </div>
        <!-- 导航 -->
        <div class="navs">
            <div class="content">
                <a href=""><img src="../0713/static/images/logo.png" alt=""></a>
                <nav class="menu">
                    <a href="" class="active">首页</a>
                    <a href="">视频教程</a>
                    <a href="">学习路径</a>
                    <a href="">PHP培训</a>
                    <a href="">资源下载</a>
                    <a href="">技术文章</a>
                </nav>
                <div class="right">
                    <input type="search" placeholder="请输入关键字">
                    <a><span class="iconfont icon-sousuo"></span></a>   
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

VScode

2022-07-04 19:45:45