简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >使用grid 和 flex仿php中文网首页布局

使用grid 和 flex仿php中文网首页布局

早晨
早晨原创
2022年07月17日 00:54:00369浏览

运行效果：

代码：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>使用grid 和 flex仿PHP中文网首页布局</title>
  8.     <link rel="stylesheet" href="static/css/index.css">
  9. </head>
  10. <body>
  11.     <!-- 页眉 -->
  12.     <header>
  13.         <!-- 顶部 -->
  14.         <div class="top">
  15.             <div class="con">
  16.                 <!-- 左边：顶部标题 -->
  17.                 <div class="con_l">PHP中文网  程序员梦开始的地方！</div>
  18.                 <!-- 右边：用户信息 -->
  19.                 <div class="con_r">
  20.                     <a href="" class="iconfont icon-xiaoxi"></a>
  21.                     <a href=""><img src="static/images/user_avatar.jpg" alt=""></a>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.         <!-- 导航 -->
  26.         <div class="navs">
  27.             <div class="navs-con">
  28.                 <a href=""><img src="static/images/logo.png" alt=""></a>
  29.                 <nav>
  30.                     <a href="">网站首页</a>
  31.                     <a href="">视频教程</a>
  32.                     <a href="">学习路径</a>
  33.                     <a href="">PHP培训</a>
  34.                     <a href="">资源下载</a>
  35.                     <a href="">技术文章</a>
  36.                     <a href="">社区</a>
  37.                 </nav>
  38.                 <div class="search">
  39.                     <input type="search" placeholder="输入关键字">
  40.                     <span class="iconfont icon-sousuo"></span>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </header>
  45.     <!-- 主体内容 -->
  46.     <main>
  47.         <div class="m-navs">
  48.             <div class="m-navs-l">
  49.                 <a href="">php开发</a>
  50.                 <a href="">大前端</a>
  51.                 <a href="">后端开发</a>
  52.                 <a href="">数据库</a>
  53.                 <a href="">移动端</a>
  54.                 <a href="">运维开发</a>
  55.                 <a href="">UI设计</a>
  56.                 <a href="">计算机基础</a>
  57.             </div>
  58.             <div class="slider">
  59.                 <a href=""><img src="static/images/1.png" alt="" /></a>
  60.             </div>
  61.             <div class="m-navs-r">
  62.                 <!-- 用户 -->
  63.                 <div class="user">
  64.                     <div class="user_l">
  65.                         <img src="static/images/user_avatar.jpg" alt="">
  66.                         <a href="">用户名称</a>
  67.                         <span>P豆 2000</span>
  68.                     </div>
  69.                 </div>
  70.                 <div class="user_r"><button class="btn">我的学习</button></div>
  71.                 <!-- 列表 -->
  72.                 <div class="list">
  73.                     <p class="cont1">问答社区</p>
  74.                     <p class="cont2"><span>头条</span><a href="">20期PHP线上班</a></p>
  75.                     <p class="cont2"><span>福利</span><a href="">20期PHP线上班</a></p>
  76.                     <p class="cont2"><span>新班</span><a href="">20期PHP线上班</a></p>
  77.                     <p class="cont2"><span>招募</span><a href="">课程合作计划</a></p>
  78.                     <p class="cont2"><span>公告</span><a href="">APP上线哟</a></p>
  79.                 </div>
  80.             </div>
  81.             <div class="m-navs-b-l">
  82.                 <div class="desc">
  83.                     <div class="title">学习路径</div>
  84.                     <span>全部7个</span>
  85.                 </div>
  86.                 <ul class="detail">
  87.                     <li onclick="">
  88.                         <img src="static/images/dgjj.png" alt="" />
  89.                         <a href="">独孤九贱</a>
  90.                         <span>9门课程</span>
  91.                       </li>
  92.                       <li onclick="">
  93.                         <img src="static/images/ynxj.png" alt="" />
  94.                         <a href="">独孤九贱</a>
  95.                         <span>9门课程</span>
  96.                       </li>
  97.                       <li onclick="">
  98.                         <img src="static/images/tlbb.png" alt="" />
  99.                         <a href="">独孤九贱</a>
  100.                         <span>9门课程</span>
  101.                       </li>
  102.                       <li onclick="">
  103.                         <img src="static/images/phpkjkf.png" alt="" />
  104.                         <a href="">独孤九贱</a>
  105.                         <span>9门课程</span>
  106.                       </li>
  107.                       <li onclick="">
  108.                         <img src="static/images/phpksrm.png" alt="" />
  109.                         <a href="">独孤九贱</a>
  110.                         <span>9门课程</span>
  111.                       </li>
  112.                 </ul>
  113.             </div>
  114.             <div class="m-navs-b-r">
  115.                 <ul class="wx-qq">
  116.                     <a href="" class="iconfont icon-weixin3f"><li>官方公众号</li></a>
  117.                     <a href="" class="iconfont icon-QQ-circle-fill"><li>官方QQ群</li></a>
  118.                 </ul>
  119.             </div>
  120.         </div>
  121.     </main>
  123. </body>
  124. </html>

CSS样式

  1. @import url(font/iconfont.css);
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5.     box-sizing: border-box;
  6. }
  7. a{
  8.     text-decoration: none;
  9.     color: #555;
  10. }
  11. body{
  12.     background-color: #f3f5f7;
  13. }
  14. li{
  15.     list-style: none;
  16. }
  17. .top {
  18.     width: 100vw;
  19.     height: 40px;
  20.     background-color: #343434;
  21.     color: aliceblue;
  22. }
  23. .top .con {
  24.     width: 1200px;
  25.     display: grid;
  26.     grid-template-columns: 400px 100px;
  27.     grid-auto-rows: 40px;
  28.     place-content: space-between;
  29.     place-items: center start;
  30.     margin: auto;
  31. }
  32. .top .con .con_l{
  33.     font-size: larger;
  34.     font-weight: lighter;
  35. }
  36. .top .con img{
  37.     width: 30%;
  38.     border-radius: 50%;
  39. }
  40. .top .con .con_r{
  41.     place-items: center;
  42. }
  43. .top .con .con_r .iconfont{
  44.     color: #eee;
  45.     font-size: larger;
  46. }
  47. .navs{
  48.     width: 100vw;
  49.     height: 90px;
  50.     background-color: #fff;
  51.     box-shadow: 0 5px 15px rgd(0,0,0,0.1);
  52. }
  53. .navs .navs-con {
  54.     width: 1200px;
  55.     display: grid;
  56.     grid-template-columns: 140px 1fr 200px;
  57.     grid-auto-rows: 90px;
  58.     margin: auto;
  59.     gap: 10px;
  60.     place-items: center start;
  61. }
  62. .navs .navs-con nav{
  63.     display: flex;
  64. }
  65. .navs .navs-con nav a {
  66.     padding: 0 10px;
  67. }
  68. .navs .navs-con nav a:hover,
  69. .navs .navs-con nav a:active {
  70.     font-weight: bold;
  71.     color: red;
  72. }
  73. .navs .navs-con img {
  74.     width: 100%;
  75. }
  76. .navs .navs-con .search {
  77.     display: flex;
  78. }
  79. .navs .navs-con .search input[type='search']{
  80.     width: 200px;
  81.     height: 36px;
  82.     border: none;
  83.     background-color: #eee;
  84.     outline: none;
  85.     border-radius: 10px;
  86.     padding-left: 10px;
  87. }
  88. .navs .navs-con .search .icon-sousuo{
  89.     font-size: 22px;
  90.     color: #ccc;
  91.     position: relative;
  92.     left: -30px;
  93.     top:8px;
  94. }
  95. .navs .navs-con .search .icon-sousuo:hover{
  96.     color: red;
  97.     cursor: pointer;
  98. }
  99. main{
  100.     font-size: 14px;
  101. }
  103. .m-navs{
  104.     display: grid;
  105.     grid-template-rows: 400px 80px;
  106.     grid-template-columns: 160px 810px 190px;
  107.     gap: 20px;
  108.     place-content: center;
  109.     margin: 30px 0;
  110. }
  111. .m-navs > * {
  112.     background-color: #fff;
  113.     border-radius: 20px;
  114.   }
  115. .m-navs .m-navs-b-l{
  116.     grid-column: span 2;
  117. }
  118. .m-navs .m-navs-l{
  119.     padding: 20px 0;
  120.     display: grid;
  121.     place-items: center;
  122. }
  123. .m-navs .m-navs-l a{
  124.     padding: 10px 20px;
  125. }
  126. .m-navs .m-navs-l a:hover{
  127.     border-radius: 20px;
  128.     color: red;
  129.     background-color: rgb(250,230,227);
  130. }
  131. .m-navs .slider img{
  132.     width: 100%;
  133.     border-radius: 20px;
  134. }
  135. .m-navs .m-navs-r .user {
  136.     display: flex;
  137.     place-items: center;
  138.     place-content: space-between;
  139.     padding: 20px;
  140. }
  141. .m-navs .m-navs-r .user .user_l{
  142.     display: grid;
  143.     grid-template-columns: 50px 100px;
  144.     gap: 0 10px;
  145.     place-items: center start;
  146. }
  147. .m-navs .m-navs-r .user_r{
  148.     height: 60px;
  149.     padding: 20px;
  150.     border-bottom:1px solid rgb(223, 223, 223);
  151. }
  152. .m-navs .m-navs-r .user_r .btn {
  153.     width: 150px;
  154.     height: 30px;
  155.     text-align: center;
  156.     background-color: red;
  157.     color: white;
  158.     border: none;
  159.     border-radius: 20px;
  160.     font-weight: 30px;
  161. }
  162. .m-navs .m-navs-r .user_r .btn:hover{
  163.     background-color: rgb(194, 2, 2);
  164. }
  165. .m-navs .m-navs-r .list{
  166.     padding: 0 15px;
  167. }
  168. .m-navs .m-navs-r .list p{
  169.     margin-top: 17px;
  170. }
  171. .m-navs .m-navs-r .list .cont1{
  172.     height: 18px;
  173.     line-height: 18px;
  174.     overflow: hidden;
  175.     font-weight: bolder;
  176. }
  177. .m-navs .m-navs-r .list .cont2 span{
  178.     font-weight: bold;
  179.     padding-right: 10px;
  180. }
  181. .m-navs .m-navs-r .list .cont1 span{
  182.     color: #333333;
  183. }
  184. .m-navs .m-navs-r .user .user_l img{
  185.     width: 100%;
  186.     grid-row: span 2;
  187.     border-radius: 50%;
  188. }
  189. .m-navs .m-navs-r .user .user_l a {
  190.     font-size: 16px;
  191.     font-weight: bold;
  193. }
  194. .m-navs .m-navs-r .user .user_l span {
  195.     font-size: 12px;
  196.     text-align: center;
  197. }
  199. .m-navs .m-navs-b-l{
  200.     display: grid;
  201.     grid-template-columns: 100px 1fr;
  202. }
  203. .m-navs .m-navs-b-l .desc{
  204.     padding: 16px 0;
  205.     display: grid;
  206.     place-items: center;
  207. }
  208. .m-navs .m-navs-b-l .desc span{
  209.     font-size: 12px;
  210.     color: #343434;
  211. }
  212. .m-navs .m-navs-b-l .detail{
  213.     display: flex;
  214.     place-items: center;
  215.     place-content: space-between;
  216.     padding: 20px;
  217. }
  218. .m-navs .m-navs-b-l .detail li {
  219.     display: grid;
  220.     grid-template-columns: 36px 85px;
  221.     grid-template-columns: repeat(2,36);
  222.     gap: 0 10px;
  223.     place-items: center start;
  224. }
  225. .m-navs .m-navs-b-l .detail img{
  226.     width: 100%;
  227.     grid-row: span 2;
  228. }
  229. .m-navs .m-navs-b-l .detail li a {
  230.     font-size: 14px;
  231. }
  232. .m-navs .m-navs-b-l .detail li a:hover{
  233.     color: crimson;
  234. }
  235. .m-navs .m-navs-b-l .detail li span{
  236.     font-size: 12px;
  237.     color: #555;
  238. }
  239. .m-navs .m-navs-b-r .wx-qq{
  240.     display: grid;
  241.     grid-template-columns: 90px 90px;
  242.     gap: 10px;
  243.     place-items: center;
  244. }
  245. .m-navs .m-navs-b-r .wx-qq li{
  246.     font-size: 14px;
  247. }
  248. .m-navs .m-navs-b-r .wx-qq .icon-weixin3f,
  249. .m-navs .m-navs-b-r .wx-qq .icon-QQ-circle-fill{
  250.     font-size: 40px;
  251.     text-align: center;
  252.     padding: 10px;
  253. }
  254. .m-navs .m-navs-b-r .wx-qq  a:hover{
  255.     color: red;
  256. }
上一条：grid和flex布局实际应用下一条：grid网格布局常用属性
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多