1. html代码

<!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>Document</title>
    <link rel="stylesheet" href="static/css/reset.css">
    <link rel="stylesheet" href="icon-font.css">
    <link rel="stylesheet" href="static/css/style.css">
</head>
<body>
    <!-- 页眉 -->
    <header>
        <!-- 顶部 -->
        <div class="top">
            <div class="content">
                <!-- 左边：顶部文字 -->
                <div class="title">php中文网-程序员梦开始的地方</div>
                <!-- 右边：用户信息 -->
                <div class="right">
                    <a href="" class="iconfont icon-tixingtianchong"></a>
                    <a href=""><img src="static/img/ET.jpg" alt="" ></a>
                </div>
            </div>
        </div>
        <!-- 导航 -->
        <div class="navs">
            <div class="content">
                <a href="" class="logo"><img src="php.png" alt=""></a>
                <nav>
                    <a href="" class="active">首页</a>
                    <a href="">视频教程</a>
                    <a href="">学习路径</a>
                    <a href="">php培训</a>
                    <a href="">资源下载</a>
                </nav>
                <div class="search">
                    <input type="search" placeholder="输入关键字">
                    <span class="iconfont icon-fangdajing1"></span>
                </div>
            </div>
        </div>
    </header>
    <!-- 主体 -->
    <main>
        <div class="grid">
            <div class="r1c1">
                    <a href="">php开发</a>
                    <a href="">大前端</a>
                    <a href="">后端开发</a>
                    <a href="">数据库</a>
                    <a href="">移动端</a>
                    <a href="">运维开发</a>
                    <a href="">UI设计</a>
                    <a href="">计算机基础</a>
            </div>
            <div class="r1c2">
                <a href=""><img src="static/img/xszbb.png" alt=""></a>
                <!-- <a href=""><img src="static/img/kqhz.jpg" alt=""></a>
                <a href=""><img src="static/img/appsxl.jpg" alt=""></a>
                <a href=""><img src="static/img/mtjbydd.jpg" alt=""></a> -->
            </div>
            <div class="r1c3">
                <div class="r1c3top">
                    <div class="toptop">
                        <a href=""><img src="static/img/ET.jpg" alt=""></a>
                        <strong>Mr xxx</strong>
                        <div>
                            <em>P豆<span>18</span></em>    
                        </div>
                    </div>
                    <a class="xuexi" href="" >我的学习</a>
                </div>
                <div class="r1c3bottom">
                    <div class="b1">
                        <strong>问答社区</strong>
                        <span>答疑</span>
                    </div>
                    <div class="b2">
                        <strong>头条</strong>
                        <span>头条内容</span>
                    </div>
                    <div class="b3">
                        <strong>福利</strong>
                        <span>福利内容</span>
                    </div>
                    <div class="b4">
                        <strong>新班</strong>
                        <span>新班内容</span>
                    </div>
                    <div class="b5">
                        <strong>招募</strong>
                        <span>招募内容</span>
                    </div>
                    <div class="b6">
                        <strong>公告</strong>
                        <span>公告内容</span>
                    </div>
                </div>
            </div>
            <div class="r2c1">
                <div class="desc">
                    <div class="title">学习路径</div>
                    <span>全部7个&gt;</span>
                </div>
                <ul class="detail">
                    <li onclick="">
                        <img src="static/img/dgjj.png" alt="">
                        <a href="">独孤九剑</a>
                        <span>9门课程</span>
                    </li>
                    <li onclick="">
                        <img src="static/img/ynxj.png" alt="">
                        <a href="">玉女心经</a>
                        <span>5门课程</span>
                    </li>
                    <li onclick="">
                        <img src="static/img/tlbb.png" alt="">
                        <a href="">天龙八部</a>
                        <span>3门课程</span>
                    </li>
                    <li onclick="">
                        <img src="static/img/phpkjkf.png" alt="">
                        <a href="">自学指南</a>
                        <span>19门课程</span>
                    </li>
                    <li onclick="">
                        <img src="static/img/phpksrm.png" alt="">
                        <a href="">趣味闯关</a>
                        <span>22门课程</span>
                    </li>
                    <!-- <li onclick="">
                        <img src="static/img/web.png" alt="">
                        <a href="">入门课程</a>
                        <span>22门课程</span>
                    </li>
                    <li onclick="">
                        <img src="static/img/phpsz.png" alt="">
                        <a href="">PHP直播班</a>
                        <span>三个阶段</span>
                    </li> -->
                </ul>
            </div>
            <div class="r2c2">
                <div class="r2c2left">
                    <a href=""><img src="php.png" alt=""></a>
                    <span>官方公众号</span>
                </div>
                <div class="r2c2right">
                    <a href=""><img src="php.png" alt=""></a>
                    <span>官方QQ群</span>
                </div>
            </div>  
        </div>
    </main>
</body>
</html>

2. style.css代码

body{
    background-color: #f3f5f7;
}
header .top{
    width: 100vw;
    height: 40px;
    background-color: #343434;
    color: #aaa;
}
header .top .content{
    width: 1200px;
    display: grid;
    grid-template-columns: 400px  100px;
    place-content: space-between;
    place-items: center start;
    grid-auto-rows: 40px;
    margin: auto;
}
header .top .content .right .iconfont{
    color: #eee;
    font-size:larger;
}
header .top .content .right>a>img{
    width: 50%;
    border-radius: 50%;
}
header .top .content .right{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    place-items: center start;
}
header .top .title{
    font-size: larger;
    font-weight: bold;
}
header .navs{
    width: 100vw;
    height: 90px;
    background-color:  #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
header .navs .content{
    width: 1200px;
    display: grid;
    grid-template-columns: 140px 1fr 200px;
    margin:auto;
    gap:10px;
    grid-auto-rows:90px;
    place-items: center start;
}
header .navs .content nav{
    display: flex;
}
header .navs .content nav a{
    padding: 0 10px;
}
header .navs .content nav a:hover,
header .navs .content nav a.active{
    font-weight: bold;
    color: red;
}
header .navs .content img{
    width: 100%;
    height: 90px;
    box-shadow: 0 5px 5px rgba(1,0,0,0.8);
}
header .navs .content .search{
    display: flex;
}
header .navs .content .search input[type="search"]{
    width: 200px;
    height: 36px;
    border: none;
    background-color: #f0f0f0;
    outline: none;
    border-radius: 10px;
    padding-left: 15%;
}
header .navs .content .search .icon-fangdajing1{
    font-size:20px;
    color: #ccc;
    position: relative;
    left: -40px;
    top: 8px;
}
header .navs .content .search .icon-fangdajing1:hover{
    cursor: pointer;
    color: #0f0f0f;
}
main{
    /* 浏览器默认16px字体有点大 */
    font-size: 14px;
}
main .grid{
    /* 调试用的定位色 */
    /* background-color: lightcyan; */
    display: grid;
    grid-template-columns: 160px 810px 190px;
    grid-template-rows: 400px 80px;
    gap: 20px;
    place-content: center;
    margin: 20px 0;
}
main .grid> *{
    background-color: #ffffff;
    border-radius: 5px;
}
main .grid .r2c1{
    grid-column: span 2;
}
main .grid .r1c1{
    padding: 20px 0px;
    display: grid;
    place-items: center;
}
main .grid .r1c1>a{
    padding: 10px 20px;
}
main .grid .r1c1>a:hover{
    color: red;
    border-radius: 10px;
    background-color: rgb(250, 223, 270);
}
main .grid .r1c2 img{
    width: 100%;
    border-radius: 10px;
}
main .grid .r2c1{
    display: grid;
    grid-template-columns: 100px 1fr;
}
main .grid .r2c1 .desc{
    padding: 16px 0;
    display: grid;
    place-items: center;
}
main .grid .r2c1 .desc span{
    font-size: 12px;
    color: #999;
}
main .grid .r2c1 .detail{
    display: flex;
    place-items: center;
    place-content: space-between;
    padding 20px 0;
}
main .grid .r2c1 .detail li{
    display: grid;
    grid-template-columns: 36px 85px;
    grid-template-columns: repeat(2,36);
    gap: 0 10px;
    place-items: center start;
}
main .grid .r2c1 .detail li img{
    width:100%;
    grid-row: span 2;
}
main .grid .r2r1 .detail li a{
    font-size: 14px;
}
main .grid .r2c1 .detail li a:hover{
    color: red;
}
main .grid .r2c1 .detail li span{
    font-size: 12px;
    color: #999;
}
main .grid .r1c3{
    display: grid;
    grid-template-rows: 200px 200px;
    padding: 2px;
}
main .grid .r1c3 .r1c3top{
    display: grid;
    grid-template-rows: 100px 100px;
    /* gap 10px 0; */
    place-content: space-between;
    place-items: center start;
    border-bottom: 1px solid #eee;
}
main .grid .r1c3 .r1c3top .toptop{
    display: grid;
    grid-template-columns: 60px 110px;
    gap: 0px 10px;
    place-content: space-between;
    place-items: center;
}
main .grid .r1c3 .r1c3top .toptop a{
    grid-row: span 2;
}
main .grid .r1c3 .r1c3top .toptop img{
    width: 100%;
    border-radius: 100px;
}
main .grid .r1c3 .r1c3top .xuexi{
    place-content: top center;
    /* place-items: center; */
    margin-bottom: 100px;
    width: 90%;
    height: 35%;
    background-color: red;
    border-radius: 10px;
    text-align: center ;
    padding-top: 10px;
    color: #fff;
    font-weight: bold;
}
main .grid .r1c3 .r1c3bottom{
    padding: 10px;
    display: grid;
    grid-template-rows: 30px 30px 30px 30px 30px 30px;
    gap: 1px 0;
}
main .grid .r1c3 .r1c3bottom div{
    display: grid;
    grid-template-columns: 80px 80px;
}
main .grid .r1c3 .r1c3bottom div span{
    color: #999;
}
main .grid .r2c2{
    display:grid;
    grid-template-columns: 90px 90px;
    place-content: space-between;
}
main .grid .r2c2 div{
    display: grid;
    grid-template-rows: 40px 40px;
    place-items: center;
}
main .grid .r2c2 div img{
    align-items: center;
    padding: 10px;
    width: 40px;
    height: 40px;
}

3. reset.css代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a{
    text-decoration: none;
    color: #555;
}
body{
    background-color: rgb(243.245,247);
}
li{
    list-style: none;
}

4. icon-font.css代码

@font-face {
    /*引入的字体，可在阿里自行下载。*/
    font-family: "iconfont"; /* Project id 3205780 */
    src: url(./font_3205780_7eqow85axa.woff2) format('woff2'),
         url(./font_3205780_7eqow85axa.woff) format('woff'),
         url(./font_3205780_7eqow85axa.ttf) format('truetype');
  }
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .icon-tixingtianchong:before {
    content: "\e695";
  }
  .icon-fangdajing1:before {
    content: "\e609";
  }
  .icon-fangdajing:before {
    content: "\e60c";
  }
  .icon-gouwuche:before {
    content: "\e899";
  }
  .icon-wodetaobao:before {
    content: "\e61b";
  }
  .icon-rmb:before {
    content: "\e6b0";
  }
  .icon-xiantiao-:before {
    content: "\e600";
  }
  .icon-aixin:before {
    content: "\e6ec";
  }
  .icon-shejiaotubiao-08:before {
    content: "\e641";
  }
  .icon-shejiaotubiao-44:before {
    content: "\e648";
  }