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>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

VScode

2022-07-04 19:45:45