ASCII码 ASCII码

仿PHP中文网首页部分布局

发布于：2022-04-14 13:01:50  栏目：技术文档

仿PHP中文网首页部分布局

1. demo.html

  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>仿PHP中文网首页布局</title>
  8.     <link rel="stylesheet" href="static/css/my-reset.css">
  9.     <link rel="stylesheet" href="static/css/my-header.css">
  10.     <link rel="stylesheet" href="static/css/my-main-nav.css">
  11. </head>
  12. <body>
  13.     <!-- 头部 -->
  14.     <header>
  15.         <!-- 顶部横条 -->
  16.         <div class="top">
  17.             <div class="content">
  18.                 <div class="tltle">PHP中文网-程序员梦开始的地方!</div>
  19.                 <div class="login">注册/登录</div>
  20.             </div>
  21.         </div>
  22.         <!-- 导航 -->
  23.         <div class="navs">
  24.             <div class="content">
  25.                 <div class="logo">
  26.                     <a href="https://www.php.cn/" title="php中文网">
  27.                         <img src="static/images/logo.png" alt="php中文网">
  28.                     </a>
  29.                 </div>
  30.                 <div class="nav">
  31.                     <a href="">首页</a>
  32.                     <a href="">视频教程</a>
  33.                     <a href="">学习路径</a>
  34.                     <a href="">大前端培训</a>
  35.                     <a href="">资源下载</a>
  36.                     <a href="">技术文章</a>
  37.                     <a href="">社区</a>
  38.                     <a href="">APP下载</a>
  39.                 </div>
  40.                 <div class="search">
  41.                     <input type="search" name="search" placeholder="请输入关键词搜索">
  42.                     <span class="iconfont icon-Magnifier"></span>
  43.                 </div>
  44.             </div>
  45.         </div>
  46.     </header>
  47.     <!-- 主体 -->
  48.     <main>
  49.         <!-- 第一块 -->
  50.         <div class="firBox">
  51.             <!-- 2行3列 -->
  52.             <!-- 侧边栏目 -->
  53.             <div class="menu">
  54.                 <a href="">php开发</a>
  55.                 <a href="">大前端</a>
  56.                 <a href="">后端开发</a>
  57.                 <a href="">数据库</a>
  58.                 <a href="">移动端</a>
  59.                 <a href="">运维开发</a>
  60.                 <a href="">UI设计</a>
  61.                 <a href="">计算机基础</a>
  62.             </div>
  63.             <!-- banner轮播图 -->
  64.             <div class="banner">
  65.                 <a href=""><img src="static/images/slider.jpeg" alt="轮播图1"></a>
  66.             </div>
  67.             <!-- sider -->
  68.             <div class="sider">
  69.                 <div class="userInfo">
  70.                     <div class="userCont1">
  71.                         <a href=""><img src="static/images/user-pic.jpeg" alt="小头像"></a>
  72.                         <dl>
  73.                             <dt><a href=''>一步莲华</a></dt>
  74.                             <dd>P豆：37.5</dd></dd>
  75.                         </dl>
  76.                     </div>
  77.                     <div class="userCont2">
  78.                         <span><a href="">我的学习</a></span>
  79.                     </div>
  80.                 </div>
  81.                 <div class="wenda">
  82.                     <div class="wenda-tit">
  83.                         <span>问答社区</span>
  84.                         <a href="">答疑</a>
  85.                     </div>
  86.                     <div class="wenda-tj">
  87.                         <p><span>头条</span><a href="">总结往年大前端技术趋势，展望2022...</a></p>
  88.                         <p><span>活动</span><a href="">限时减免>></a></p>
  89.                         <p><span>新班</span><a href="">大前端线上班</a></p>
  90.                         <p><span>招募</span><a href="">课程合作计划</a></p>
  91.                         <p><span>公告</span><a href="">APP上线啦</a></p>
  92.                     </div>
  93.                 </div>
  94.             </div>
  95.             <!-- 底部栏目 -->
  96.             <div class="bottom-menu">
  97.                 <div class="desc">
  98.                     <div class="tit">学习路径</div>
  99.                     <span>全部7个&gt;</span>
  100.                 </div>
  101.                 <ul class="detail">
  102.                     <li>
  103.                         <img src="static/images/dgjj.png" alt="独孤九贱">
  104.                         <a href="">独孤九贱</a>
  105.                         <span>9门课程</span>
  106.                     </li>
  107.                     <li>
  108.                         <img src="static/images/ynxj.png" alt="独孤九贱">
  109.                         <a href="">玉女心经</a>
  110.                         <span>5门课程</span>
  111.                     </li>
  112.                     <li>
  113.                         <img src="static/images/tlbb.png" alt="独孤九贱">
  114.                         <a href="">天龙八部</a>
  115.                         <span>3门课程</span>
  116.                     </li>
  117.                     <li>
  118.                         <img src="static/images/phpkjkf.png" alt="独孤九贱">
  119.                         <a href="">自学指南</a>
  120.                         <span>19门课程</span>
  121.                     </li>
  122.                     <li>
  123.                         <img src="static/images/phpksrm.png" alt="独孤九贱">
  124.                         <a href="">趣味闯关</a>
  125.                         <span>22门课程</span>
  126.                     </li>
  127.                     <!-- <li>
  128.                         <img src="static/images/dgjj.png" alt="独孤九贱">
  129.                         <a href="">入门教程</a></a>
  130.                         <span>22门课程</span>
  131.                     </li>
  132.                     <li>
  133.                         <img src="static/images/dgjj.png" alt="独孤九贱">
  134.                         <a href="">PHP直播班</a>
  135.                         <span>三个阶段</span>
  136.                     </li> -->
  138.                 </ul>
  139.             </div>
  140.             <!-- 底部关注 -->
  141.             <div class="attention">
  142.                 <ul class="att">
  143.                     <li><a href="">
  144.                         <span class="iconfont icon-weixin-copy"></span>
  145.                         <span>官方公众号</span>
  146.                     </a>
  147.                     </li>
  148.                     <li><a href="">
  149.                         <span class="iconfont icon-qq"></span>
  150.                         <span>官方QQ群</span>
  151.                     </a>
  152.                     </li>
  153.                 </ul>
  154.             </div>
  155.         </div>
  156.         <!-- 第二块 -->
  157.         <div class="secBox">
  158.             <div class="secTit">
  159.                 <h2>最新课程</h2>
  160.                 <a href="">更多&gt;</a>
  161.             </div>
  162.                     <!-- 课程列表 -->
  163.         <ul class="courses">
  164.             <li>
  165.                 <span><a href="">H5+CSS3从入门到精通</a></span>
  166.                 <dl>
  167.                     <dt><i>初级</i><a href="">前端基础HTML5+CSS3从入门到精通</a></dt>
  168.                     <dd><p>8053次学习</p><em class="iconfont icon-xinghao"><a href="">收藏</a></em></dd>
  169.                 </dl>
  170.             </li>
  171.             <li>
  172.                 <span><a href="">JavaScript基础语法讲解</a></span>
  173.                 <dl>
  174.                     <dt><i>初级</i><a href="">JavaScript基础语法讲解</a></dt>
  175.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  176.                 </dl>
  177.             </li>
  178.             <li>
  179.                 <span><a href="">HTTP基础原理及应用</a></span>
  180.                 <dl>
  181.                     <dt><i>初级</i><a href="">HTTP基础原理及应用</a></dt>
  182.                     <dd><p>8053次学习</p><em class="iconfont icon-xinghao"><a href="">收藏</a></em></dd>
  183.                 </dl>
  184.             </li>
  185.             <li>
  186.                 <span><a href="">HTTP协议基础知识掌握</a></span>
  187.                 <dl>
  188.                     <dt><i>初级</i><a href="">HTTP协议基础知识掌握</a></dt>
  189.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  190.                 </dl>
  191.             </li>
  192.             <li>
  193.                 <span><a href="">API接口开发规范</a></span>
  194.                 <dl>
  195.                     <dt><i>初级</i><a href="">API接口开发规范</a></dt>
  196.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  197.                 </dl>
  198.             </li>
  199.             <li>
  200.                 <span><a href="">MySQL查询优化方案</a></span>
  201.                 <dl>
  202.                     <dt><i>初级</i><a href="">MySQL查询优化方案</a></dt>
  203.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  204.                 </dl>
  205.             </li>
  206.             <li>
  207.                 <span><a href="">Promise教程从入门到精通</a></span>
  208.                 <dl>
  209.                     <dt><i>初级</i><a href="">Promise教程从入门到精通</a></dt>
  210.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  211.                 </dl>
  212.             </li>
  213.             <li>
  214.                 <span><a href="">Bootstrap框架入门讲解</a></span>
  215.                 <dl>
  216.                     <dt><i>初级</i><a href="">Bootstrap框架入门讲解</a></dt>
  217.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  218.                 </dl>
  219.             </li>
  220.             <li>
  221.                 <span><a href="">Linux一周时间轻松掌握</a></span>
  222.                 <dl>
  223.                     <dt><i>初级</i><a href="">Linux一周时间轻松掌握</a></dt>
  224.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  225.                 </dl>
  226.             </li>
  227.             <li>
  228.                 <span><a href="">仿美团APP项目JS实战</a></span>
  229.                 <dl>
  230.                     <dt><i>初级</i><a href="">仿美团APP项目JS实战</a></dt>
  231.                     <dd><p>8053次学习</p><em>收藏</em></dd>
  232.                 </dl>
  233.             </li>
  234.         </ul>
  235.         </div>
  236.     </main>
  237.     <!-- 底部 -->
  238.     <footer></footer>
  239. </body>
  240. </html>

2. static/css/my-reset.css

  1. /* 引入阿里图标库 */
  2. @import url(//at.alicdn.com/t/font_3325033_28ckjqi2ecx.css);
  3. *{
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  8. a{
  9.     text-decoration: none;
  10.     color: #333;
  11. }
  12. li{
  13.     list-style: none;
  14. }
  15. body{
  16.     background-color: #F3F5F7;
  17. }
  18. input,textarea{
  19.     border: none;
  20.     outline: none;
  21. }

3. static/css/my-header.css

  1. /* top */
  2. header .top{
  3.     width: 100vw;
  4.     height: 40px;
  5.     background-color: rgb(52,52,52);
  6.     color: rgb(196, 191, 191);
  7. }
  8. header .top .content{
  9.     width: 1200px;
  10.     /* 定义网格布局 */
  11.     display: grid;
  12.     /* 2列 230px 75px */
  13.     grid-template-columns: 230px 75px;
  14.     /* 网格行高 */
  15.     grid-auto-rows: 40px;
  16.     /* 子元素分散对齐 */
  17.     place-content: space-between;
  18.     /* 子元素 垂直居中 靠左 */
  19.     place-items: center start;
  20.     /* 两端对齐 */
  21.     margin: auto;
  23.     font-size: 14px;
  24. }
  26. /* navs */
  27. header .navs{
  28.     width: 100vw;
  29.     height: 90px;
  30.     background-color: #fff;
  31. }
  32. header .navs .content{
  33.     width: 1200px;
  34.     /* 定义网格布局 */
  35.     display: grid;
  36.     /* 2列 230px 75px */
  37.     grid-template-columns:  140px 1fr 200px;
  38.     /* 网格行高 */
  39.     grid-auto-rows: 90px;
  40.     /* 网格行列间距 */
  41.     gap: 10px;
  42.     /* 子元素分散对齐 */
  43.     place-content: space-between;
  44.     /* 子元素 垂直居中 靠左 */
  45.     place-items: center start;
  46.     /* 两端对齐 */
  47.     margin: auto;
  48. }
  49. header .navs .content .logo img{
  50.     width: 100%;
  51. }
  52. header .navs .content .nav a{
  53.     padding: 0 10px;
  54. }
  55. header .navs .content .nav a:hover,header .navs .content .nav a:first-of-type,header .navs .content .nav a:last-of-type{
  56.     color: red;
  57.     font-weight: bold;
  58. }
  60. /* search */
  61. header .navs .content .search{
  62.     display: flex;
  63. }
  64. header .navs .content .search input[type='search']{
  65.     border-radius: 20px;
  66.     background-color: rgb(247,248,250);
  67.     width: 200px;
  68.     height: 40px;
  69.     padding-left: 20px;
  70. }
  71. header .navs .content .search .icon-Magnifier{
  72.     position: relative;
  73.     font-size: 24px;
  74.     left: -40px;
  75.     top: 8px;
  76.     color: #ccc;
  77. }

4. static/css/my-main-nav.css

  1. main{
  2.     display: grid;
  3.     place-content: center;
  4.     font-size: 14px;
  5. }
  6. main .firBox{
  7.     /* 2行3列 */
  8.     display: grid;
  9.     grid-template-columns:160px 1fr 190px;
  10.     grid-template-rows: 400px 80px;
  11.     gap: 20px;
  12.     place-content: center;
  13.     margin: 30px 0px;
  14. }
  15. main .firBox>*{
  16.     background-color: #fff;
  17.     border-radius: 20px;
  18. }
  19. /* menu 左侧菜单 */
  20. main .firBox .menu{
  21.     display: grid;
  22.     place-items: center;
  23.     padding: 20px 0;
  24. }
  25. main .firBox .menu a{
  26.     border-radius: 20px;
  27.     padding: 10px 20px;
  28.     min-width: 120px;
  29.     text-align: center;
  30. }
  31. main .firBox .menu a:hover{
  32.     color: red;
  33.     background-color: rgb(255, 0, 0,.1);
  34. }
  35. /* 轮播图 */
  36. main .firBox .banner img{
  37.     border-radius: 10px;
  38.     width: 100%;
  39. }
  40. /* 右侧 */
  41. main .firBox .sider{
  42.     display: grid;
  43.     grid-template-columns: 1fr;
  44.     grid-template-rows: 140px 1fr;
  45.     place-content: center;
  46. }
  47. main .firBox .sider .userInfo{
  48.     display: grid;
  49.     grid-template-rows: 60px 80px;
  50.     place-items: center;
  51.     padding: 15px 0 10px;
  52.     border-bottom: 1px solid rgb(209, 209, 209);
  53. }
  54. main .firBox .sider .userCont1{
  55.     width: 155px;
  56.     display: grid;
  57.     grid-template-columns: 40px 1fr;
  58.     gap: 15px;
  59. }
  60. main .firBox .sider .userCont1 a>img{
  61.     width: 40px;
  62.     border-radius: 20px;
  63. }
  64. main .firBox .sider .userCont1 dl dt{
  65.     margin-top: -5px;
  66. }
  67. main .firBox .sider .userCont1 dl dt>a{
  68.     font-size: 14px;
  69.     font-weight:bold;
  70. }
  71. main .firBox .sider .userCont1 dl dd{
  72.     font-size: 12px;
  73.     color: #999;
  74.     margin-top: 5px;
  75. }
  76. main .firBox .sider .userCont2{
  77.     position: relative;
  78.     bottom: 20px;
  79. }
  80. main .firBox .sider .userCont2 span{
  81.     background-color: red;
  82.     width: 80%;
  83. }
  84. main .firBox .sider .userCont2 span a{
  85.     color: #fff;
  86.     font-size: 14px;
  87.     display: block;
  88.     background-color: red;
  89.     width: 150px;
  90.     text-align: center;
  91.     border-radius: 20px;
  92.     height: 34px;
  93.     line-height: 34px;
  94. }
  95. main .firBox .sider .userCont2 span a:hover{
  96.     background-color: rgb(196, 6, 6);
  97. }
  98. /* 问答 2行1列*/
  99. main .firBox .sider .wenda{
  100.     display: grid;
  101.     grid-template-rows: 40px 1fr;
  102.     padding: 10px 20px;
  103. }
  104. main .firBox .sider .wenda .wenda-tit{
  105.     margin-top: 10px;
  106. }
  107. main .firBox .sider .wenda .wenda-tit span{
  108.     line-height: 18px;
  109.     margin-right: 10px;
  110.     color: #515151;
  111. }
  112. main .firBox .sider .wenda .wenda-tit a{
  113.     color: white;
  114.     background-color: red;
  115.     font-size: 10px;
  116.     padding: 1px 3px;
  117. }
  118. main .firBox .sider .wenda .wenda-tj p{
  119.     margin-top: 17px;
  120. }
  121. main .firBox .sider .wenda .wenda-tj p:first-of-type{
  122.     margin-top: 0;
  123. }
  124. main .firBox .sider .wenda .wenda-tj p>span{
  125.     line-height: 18px;
  126.     margin-right: 10px;
  127.     color: #515151;
  128. }
  129. main .firBox .sider .wenda .wenda-tj p>a{
  130.     color: rgb(182,182,182);
  131. }
  132. /* 底部左侧占2列 */
  133. main .firBox .bottom-menu{
  134.     grid-column: span 2;
  135. }
  136. /* 底部左侧 */
  137. main .firBox .bottom-menu{
  138.     display: grid;
  139.     grid-template-columns: 100px 1fr;
  140. }
  141. main .firBox .bottom-menu .desc{
  142.     display: grid;
  143.     place-items: center;
  144.     padding: 16px;
  145. }
  146. main .firBox .bottom-menu .desc span{
  147.     color: rgb(153,153,153);
  148.     font-size: 12px;
  149. }
  150. main .firBox .bottom-menu .detail{
  151.     display: flex;
  152.     place-content: space-between;
  153.     place-items: center;
  155. }
  156. main .firBox .bottom-menu .detail img{
  157.     width: 100%;
  158.     grid-row: span 2;
  159. }
  160. main .firBox .bottom-menu .detail li{
  161.     display: grid;
  162.     grid-template-columns: 36px 85px;
  163.     gap: 0 10px;
  164. }
  165. main .firBox .bottom-menu .detail li span{
  166.     color: rgb(153,153,153);
  167.     font-size: 12px;
  168. }
  170. /* 底部右侧 */
  171. main .firBox .attention .att{
  172.     display: flex;
  173.     place-content: space-between;
  174.     place-items: center;
  175.     gap:0 20px;
  176.     width: 150px;
  177.     margin: 15px auto;
  179. }
  180. main .firBox .attention .att li a .iconfont{
  181.     font-size: 30px;
  182.     color: rgb(153,153,153);
  183. }
  184. main .firBox .attention .att li a{
  185.     display: grid;
  186.     grid-template-rows: 30px 25px;
  187.     place-items: center;
  188. }
  189. main .firBox .attention .att li a span{
  190.     font-weight: bold;
  191.     font-size: 12px;
  192. }
  194. /* 第二块 secBox */
  195. main .secBox{
  196.     margin-top: 10px;
  197. }
  198. main .secBox .secTit{
  199.     display: grid;
  200.     grid-template-columns: 90px 80px;
  201.     place-content: space-between;
  202.     place-items: center;
  203. }
  204. main .secBox .secTit h2{
  205.     font-size: 22px;
  206.     font-weight: bold;
  207.     color: #333;
  208.     line-height: 40px;
  209. }
  210. main .secBox .secTit a{
  211.     font: 18px;
  212.     color: #999;
  213.     background-color: #f0f1f4;
  214.     width: 100%;
  215.     text-align: center;
  216.     border-radius: 20px;
  217.     line-height: 30px;
  218. }
  219. main .secBox .courses{
  220.     display: grid;
  221.     grid-template-columns: repeat(5,224px);
  222.     grid-template-rows: repeat(2,235px);
  223.     place-content: space-between;
  224.     place-items: center;
  225.     row-gap: 20px;
  226.     margin-top: 10px;
  228. }
  229. main .secBox .courses li{
  230.     display: grid;
  231.     grid-template-rows: 130px 1fr;
  232.     background-color: #fff;
  233.     border-radius: 10px;
  234. }
  235. main .secBox .courses li span{
  236.     border-radius: 10px 10px 0 0;
  237. }
  238. main .secBox .courses li:first-of-type span{
  239.     background: linear-gradient(to bottom right, RGB(72,118,230),RGB(153,101,235));
  240. }
  241. main .secBox .courses li:nth-of-type(2) span{
  242.     background: linear-gradient(to bottom right, RGB(27,132,236),RGB(39,229,241));
  243. }
  244. main .secBox .courses li:nth-of-type(3) span{
  245.     background: linear-gradient(to bottom right, RGB(237,73,106),RGB(255,182,96));
  246. }
  247. main .secBox .courses li:nth-of-type(4) span{
  248.     background: linear-gradient(to bottom right, RGB(93,60,255),RGB(219,99,255));
  249. }
  250. main .secBox .courses li:nth-of-type(5) span{
  251.     background: linear-gradient(to bottom right, RGB(70,129,252),RGB(81,43,240));
  252. }
  253. main .secBox .courses li:nth-of-type(6) span{
  254.     background: linear-gradient(to bottom right, RGB(249,86,117),RGB(219,34,30));
  255. }
  256. main .secBox .courses li:nth-of-type(7) span{
  257.     background: linear-gradient(to bottom right, RGB(255,112,155),RGB(254,70,105));
  258. }
  259. main .secBox .courses li:nth-of-type(8) span{
  260.     background: linear-gradient(to bottom right, RGB(252,115,250),RGB(244,195,243));
  261. }
  262. main .secBox .courses li:nth-of-type(9) span{
  263.     background: linear-gradient(to bottom right, RGB(247,151,30),RGB(255,210,0));
  264. }
  265. main .secBox .courses li:last-of-type span{
  266.     background: linear-gradient(to bottom right, RGB(69,186,91),RGB(137,199,104));
  267. }
  268. main .secBox .courses li span a{
  269.     color: #fff;
  270.     font-weight: bold;
  271.     font-size: 20px;
  272.     text-align: center;
  273.     padding: 35px 30px;
  274.     display: table-cell;
  275.     vertical-align: middle;
  276. }
  277. main .secBox .courses li dl{
  278.     width: 188px;
  279.     margin: auto;
  280.     height: 105px;
  281. }
  282. main .secBox .courses li dl dt{
  283.     margin-top: 18px;
  284.     line-height: 25px;
  285. }
  286. main .secBox .courses li dl dt i{
  287.     background-color: #E0E8FC;
  288.     color: #298AFD;
  289.     font-size: 11px;
  290.     font-style: normal;
  291.     padding: 2px 4px;
  292.     border-radius: 2px;
  293.     margin-right: 10px;
  294. }
  295. main .secBox .courses li dl dd{
  296.     color: #b7b7b7;
  297.     font-size: 12px;
  298.     line-height: 30px;
  299.     display: flex;
  300.     place-content: space-between;
  301. }
  302. main .secBox .courses li dl dd em{
  303.     font-style: normal;
  304.     font-size: 12px;
  305. }
  306. main .secBox .courses li dl dd em a{
  307.     color: #b7b7b7;
  308.     padding-left:5px;
  309. }

5. 效果图

连续看了2天的教程，今天把这个作业全部做了一遍，到现在快晚上9点了才完成。虽然时间花得久，但是感触良多。感觉布局万物皆可grid,而且grid还能精简很多代码。

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行