在网页布局中建议细节布局用flex,大局布局用grid:
效果图：
margin: 0; padding: 0; box-sizing: border-box;}a{ color: #555; text-decoration: none; font-size: larger; font-weight: bolder;}body{ background-color: rgb(243,245,247);}li { list-style: none;}@import url(reset.css);body{ background-color: #f3f3f3;}header .top{ width: 100vw; height: 40px; background-color: #343434; color: #aaa; display: flex; place-content: center; /* margin: auto; */}header .top .content{ width: 1200px; display: grid; grid-template-columns: 400px 100px; grid-auto-rows: 40px; place-content: space-between; place-items: center start; /* margin: auto; */}header .top .content .rightx .iconfont{ color: #eee; font-size: larger;}header .top .content img{ width: 50%; border-radius: 50%;}header .top .content .rightx { display: grid; /* repeat（x,y） 第一个参数是要重复的次数，第二个参数大小，fr表示的是平均分配*/ grid-template-columns: repeat(2,1fr); place-items: center; }header .top .content .title{ font-size: larger; font-weight: bolder;}header .navs{ width: 100vw; height: 90px; background-color: #fff; box-shadow: 0px 5px 15px rgba(0,0,0,0.1);}header .navs .content{ width: 1200px; display: grid; grid-template-columns: 140px 1fr 200px; grid-auto-rows: 90px; gap: 10px; place-items: center start; margin: auto;}header .navs .content nav a { padding: 0 10px; }header .navs .content img{ width: 100%;}header .navs .content .search input[type='search'] { width: 200px; height: 36px; border: none; background-color: #eee; outline: none; border-radius: 20px; padding-left: 10px; }header .navs .content .search { position: relative;}header .navs .content .search .icon-fangdajing1 { position: absolute; right: 10px; top: 10px; }header .navs .content .search .icon-fangdajing1:hover { color: red; /* 小手 */ cursor: pointer; }main{ font-size: 14px;}main .navs{ display: grid; grid-template-columns: 160px 810px 190px; grid-template-rows: 400px 80px; gap: 20px; place-content: center; margin: 30px 0;}main .navs > *{ background-color: #fff; border-radius: 20px;}main .navs .bottom-left{ grid-area: 2 / 1 / span 1 /span 2;}main .navs .left{ width: 160px; height: 400px; display: flex; flex-direction: column; place-content: space-evenly; place-items: center;}/* 给每个a元素加个宽和高，这样会让圆角更好看 */main .navs .left a { padding: 10px 20px; }main .navs .left a:hover{ border-radius: 20px; color: red; background-color: rgb(250,223,227);}ul{ width: 990px; height: 80px; background-color: #fff; display: flex; place-content: space-evenly; place-items: center;}li{ height: 80px; width: 165px; display: flex; place-content: center; place-items: center;}li:nth-of-type(1){ display: flex; flex-direction: column; place-content: center; place-items: center;}li img{ width: 30%;}li div{ display: flex; flex-direction: column; place-content: center; place-items: center;}.bottom-right{ height: 80px; width: 190px; background-color: #fff; display: flex; place-content: space-evenly; place-items: center;}.right{ background-color: #fff; display: grid; grid-template-rows: 60px repeat(6,1fr); place-content: center; place-items: center;}.right .bottom-top{ display: flex; place-content: center; place-items: center;}.right .bottom-top img{ width: 20%; border-radius: 100%;}dl{ display: flex; flex-direction: column; place-content: center; place-items: center;}<!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>grid: 防php中文网</title> <link rel="stylesheet" href="https://at.alicdn.com/t/font_3205780_7eqow85axa.css"> <link rel="stylesheet" href="./CSS/header.css"> <link rel="stylesheet" href="./css/main-nav.css" /></head><body> <header> <div class="top"> <div class="content"> <div class="title">PHP中文网，程序员梦开始的地方</div> <div class="rightx"> <a href="" class="iconfont icon-tixingtianchong"></a> <a href=""><img src="./images/user-pic.jpeg" alt=""></a> </div> </div> </div> <div class="navs"> <div class="content"> <a href="" class="logo"><img src="./images/logo.png"></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="输入关键字" /> <i class="iconfont icon-fangdajing1"></i> </div> </div> </div> </header> <main> <div class="navs"> <div class="left x"> <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="slider"> <a href=""><img src="./images/slider.jpeg" alt=""></a> </div> <div class="right"> <div class="bottom-top"> <img src="./images/user-pic.jpeg" alt=""> <dl> <dt>P粉0366</dt> <dd>p豆20</dd> </dl> </div> <button>我的学习</button> <p>问答社区</p> <p>头条</p> <p>福利</p> <p>招聘</p> <p>广告</p> </div> <div class="bottom-left"> <ul> <li> <div class="title">学习路径</div> <span>独孤九剑</span> </li> <li> <img src="./images/dgjj.png" alt=""> <div> <a href="">独孤九剑</a> <span>9门课程</span> </div> </li> <li> <img src="./images/ynxj.png" alt=""> <div> <a href="">独孤九剑</a> <span>9门课程</span> </div> </li> <li> <img src="./images/tlbb.png" alt=""> <div> <a href="">独孤九剑</a> <span>9门课程</span> </div> </li> <li> <img src="./images/phpkjkf.png" alt=""> <div> <a href="">独孤九剑</a> <span>9门课程</span> </div> </li> <li> <img src="./images/phpksrm.png" alt=""> <div> <a href="">独孤九剑</a> <span>9门课程</span> </div> </li> </ul> </div> <div class="bottom-right"> <i class="iconfont icon-gouwuche"></i> <i class="iconfont icon-fangdajing1"></i> </div> </div> </main></body></html>