Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用grid和flex布局完成php中文网首页上半部分
Blogger Information
Blog 43
fans 4
comment 0
visits 19426
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用grid和flex布局完成php中文网首页上半部分
汇享科技
Original
464 people have browsed it

思路分享

效果图：
l5m29h2r.png

  1. 先从顶部开始一部分一部分往下写
  2. 布局方式：分析这一部分可以拆分成几部分 进行构思 用网格来表示看下可以生成几行几列的网格 例如：l5m1lqgj.png
  3. 先写一个大盒子包住 然后在盒子内进行布局 把每块想象成一个盒子左中右三部分
  4. 细致划分里面的区域左边的盒子可以用flex也可以用grid进行划分用flex的话可以将排列方式改为列column然后在给里面的每个标签设置一些边距撑开

代码下载

  • html代码部分
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>仿phpcn首页</title>
  8.     <link rel="stylesheet" href="static/css/font.css" />
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.   </head>
  11.   <body>
  12.     <!-- 顶部 -->
  13.     <header>
  14.       <div class="content">
  15.         <div class="top_content">
  16.           <div class="title">
  17.             <span>php中文网，程序员梦开始的地方</span>
  18.           </div>
  19.           <div class="right">
  20.             <a href="" class="iconfont icon-tixing"></a>
  21.             <a href=""><img src="static/images/tx.jpg" alt="" /></a>
  22.           </div>
  23.         </div>
  24.       </div>
  25.     </header>
  26.     <!-- 导航栏 -->
  27.     <nav>
  28.       <div class="nav_content">
  29.         <div class="logo">
  30.           <a href=""><img src="static/images/logo.png" alt="" /></a>
  31.         </div>
  32.         <div class="navs">
  33.           <a href="" class="active">首页</a>
  34.           <a href="">视频教程</a>
  35.           <a href="">学习路径</a>
  36.           <a href="">PHP培训</a>
  37.           <a href="">资源下载 </a>
  38.           <a href="">技术文章</a>
  39.           <a href="">社区</a>
  40.         </div>
  41.         <div class="nav_right">
  42.           <input type="search" name="" id="" placeholder="输入关键字搜索" />
  43.           <span class="iconfont icon-sousuo"></span>
  44.         </div>
  45.       </div>
  46.     </nav>
  47.     <!-- 主体 -->
  48.     <main>
  49.       <div class="main_content">
  50.         <div class="left">
  51.           <a href="">视频教程</a>
  52.           <a href="">学习路径</a>
  53.           <a href="">PHP培训</a>
  54.           <a href="">资源下载 </a>
  55.           <a href="">技术文章</a>
  56.           <a href="">资源下载 </a>
  57.           <a href="">技术文章</a>
  58.           <a href="">资源下载 </a>
  59.         </div>
  60.         <div class="lb">
  61.           <a href="">
  62.             <img src="static/images/lb.png" alt="" />
  63.           </a>
  64.         </div>
  65.         <div class="right">
  66.           <div class="right_top">
  67.             <div class="tx">
  68.               <span>
  69.                 <a href="">
  70.                   <img src="static/images/tx.jpg" alt="" />
  71.                 </a>
  72.               </span>
  73.               <dl>
  74.                 <dt>
  75.                   <a href="">汇享科技</a>
  76.                   <span class="iconfont icon-tipvip vip"></span>
  77.                 </dt>
  78.                 <dd>P豆 12.00</dd>
  79.               </dl>
  80.             </div>
  81.             <div class="anniu">
  82.               <button>我的学习</button>
  83.             </div>
  84.           </div>
  85.           <div class="right_bottom">
  86.             <div class="top">
  87.               <p class="cont1">
  88.                 <span>问答社区</span>
  89.                 <a>答疑</a>
  90.               </p>
  91.             </div>
  92.             <div class="bottom">
  93.               <p class="cont2">
  94.                 <span>头条</span>
  95.                 <a href="">20期PHP线上班</a>
  96.               </p>
  97.               <p class="cont3">
  98.                 <span>福利</span>
  99.                 <a href="">20期PHP线上班</a>
  100.               </p>
  101.               <p class="cont3">
  102.                 <span>新班</span>
  103.                 <a href="">20期PHP线上班</a>
  104.               </p>
  105.               <p class="cont3">
  106.                 <span>招募</span>
  107.                 <a href="">20期PHP线上班</a>
  108.               </p>
  109.               <p class="cont3">
  110.                 <span>公告</span>
  111.                 <a href="">20期PHP线上班</a>
  112.               </p>
  113.             </div>
  114.           </div>
  115.         </div>
  116.         <div class="main_bottom">
  117.           <div class="bottom_left">
  118.             <div class="left_xxlj">
  119.               <span>学习路径</span>
  120.               <span>全部7个></span>
  121.             </div>
  122.             <a href="">
  123.               <img src="static/images/dgjj.png" alt="" />
  124.               <dl>
  125.                 <dt>独孤九贱</dt>
  126.                 <dd>9门课程</dd>
  127.               </dl>
  128.             </a>
  129.             <a href="">
  130.               <img src="static/images/ynxj.png" alt="" />
  131.               <dl>
  132.                 <dt>玉女心经</dt>
  133.                 <dd>5门课程</dd>
  134.               </dl>
  135.             </a>
  136.             <a href="">
  137.               <img src="static/images/tlbb.png" alt="" />
  138.               <dl>
  139.                 <dt>天龙八部</dt>
  140.                 <dd>3门课程</dd>
  141.               </dl>
  142.             </a>
  143.             <a href="">
  144.               <img src="static/images/phpkjkf.png" alt="" />
  145.               <dl>
  146.                 <dt>自学指南</dt>
  147.                 <dd>19门课程</dd>
  148.               </dl>
  149.             </a>
  150.             <a href="">
  151.               <img src="static/images/phpksrm.png" alt="" />
  152.               <dl>
  153.                 <dt>趣味闯关</dt>
  154.                 <dd>22门课程</dd>
  155.               </dl>
  156.             </a>
  157.           </div>
  158.         </div>
  159.         <div class="bottom_right">
  160.           <a href="">
  161.             <span class="iconfont icon-weixin"></span>
  162.             <h2>微信公众号</h2>
  163.           </a>
  164.           <a href="">
  165.             <span class="iconfont icon-QQ-circle-fill"></span>
  166.             <h2>官方QQ群</h2>
  167.           </a>
  168.         </div>
  169.       </div>
  170.     </main>
  171.   </body>
  172. </html>
  • css部分
  1. /*这一部分是初始化样式*/
  2. * {
  3.   padding: 0;
  4.   margin: 0;
  5.   box-sizing: border-box;
  6. }
  7. a {
  8.   text-decoration: none;
  9. }
  10. ul {
  11.   list-style: none;
  12. }
  13. /*初始化结束*/
  14. /*css代码*/
  15. @import url(init.css);
  16. @import url(font_icon/iconfont.css);
  17. body {
  18.   background-color: #f3f5f7;
  19. }
  21. /*顶部布局开始*/
  22. header .content {
  23.   width: 100vw;
  24.   height: 40px;
  25.   background-color: #343434;
  26. }
  27. header .content .top_content {
  28.   width: 1200px;
  29.   display: grid;
  30.   grid-template-columns: 400px 100px;
  31.   grid-template-rows: 40px;
  32.   margin: auto;
  33.   place-content: space-between;
  34.   place-items: center start;
  35. }
  36. header .content .top_content .title span {
  37.   color: #ccc;
  38.   font-weight: 550;
  39.   font-family: "微软雅黑";
  40.   font-size: 14px;
  41. }
  42. header .content .top_content .right {
  43.   display: flex;
  44.   place-items: center;
  45. }
  46. header .content .top_content .right img {
  47.   border-radius: 30px;
  48.   width: 25px;
  49.   height: 25px;
  50.   margin-left: 22px;
  51. }
  52. header .content .top_content .right .icon-tixing {
  53.   font-size: 20px;
  54.   color: #fff;
  55. }
  56. /*顶部布局结束*/
  57. /*顶部导航开始*/
  58. nav {
  59.   width: 100vw;
  60.   height: 90px;
  61.   background-color: white;
  62.   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  63. }
  64. nav .nav_content {
  65.   width: 1200px;
  66.   display: grid;
  67.   margin: auto;
  68.   gap: 0 10px;
  69.   grid-template-columns: 200px 1fr 200px;
  70.   grid-auto-rows: 90px;
  71.   place-items: center start;
  72. }
  74. nav .nav_content .navs a {
  75.   color: #333333;
  76.   padding: 0 10px;
  77.   font-weight: bold;
  78. }
  79. nav .nav_content .navs .active,
  80. nav .nav_content .navs a:hover {
  81.   color: red;
  82.   font-size: 18px;
  83. }
  85. nav .nav_right {
  86.   display: flex;
  87. }
  88. nav .nav_right input[type="search"] {
  89.   width: 200px;
  90.   height: 36px;
  91.   border: none;
  92.   outline: none;
  93.   background-color: rgba(219, 211, 211, 0.938);
  94.   border-radius: 20px;
  95.   padding: 15px;
  96. }
  97. nav .nav_right .icon-sousuo {
  98.   position: relative;
  99.   left: -30px;
  100.   top: 8px;
  101. }
  102. nav .nav_right .icon-sousuo:hover {
  103.   color: red;
  104. }
  105. /*导航结束*/
  106. /*主体区开始*/
  108. main {
  109.   width: 100%;
  110.   margin-top: 30px;
  111. }
  112. main .main_content {
  113.   width: 1200px;
  114.   margin: auto;
  115.   display: grid;
  116.   grid-template-columns: 166px 810px 190px;
  117.   grid-template-rows: 400px 80px;
  118.   gap: 15px;
  119. }
  120. main .main_content .main_bottom {
  121.   grid-area: 2 / 1 / span 2 / span 2;
  122. }
  123. main .main_content .left {
  124.   border-radius: 20px;
  125.   background-color: #fff;
  126.   display: flex;
  127.   flex-flow: column;
  128.   place-items: center;
  129. }
  130. main .main_content .left a {
  131.   color: #333333;
  132.   width: 126px;
  133.   height: 40px;
  134.   margin-top: 8px;
  135.   padding: 10px 0;
  136.   text-align: center;
  137.   border-radius: 20px;
  138. }
  139. main .main_content .left a:hover {
  140.   background-color: lightsalmon;
  141. }
  142. main .main_content .lb a img {
  143.   border-radius: 20px;
  144.   width: 100%;
  145. }
  146. main .main_content .right {
  147.   /* height: 400px; */
  148.   display: grid;
  149.   background-color: #fff;
  150.   border-radius: 20px;
  151.   grid-template-rows: 141px 1fr;
  152. }
  153. main .main_content .right .right_top {
  154.   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  155. }
  156. main .main_content .right .right_top .tx {
  157.   padding: 18px 0;
  158.   width: 155px;
  159.   display: grid;
  160.   margin: auto;
  161.   place-items: center start;
  162.   gap: 0 10px;
  163.   grid-template-columns: 40px 105px;
  164. }
  165. main .main_content .right .right_top .tx a img {
  166.   border-radius: 30px;
  167.   width: 100%;
  168. }
  169. main .main_content .right .right_top .tx dl dt > a {
  170.   color: #333333;
  171.   font-size: 14px;
  172.   font-weight: bold;
  173. }
  174. main .main_content .right .right_top .tx dl dt > .vip {
  175.   position: relative;
  176.   font-size: 20px;
  177.   top: 2px;
  178. }
  179. main .main_content .right .right_top .tx dl dd {
  180.   color: #999999;
  181.   padding: 10px 0;
  182.   font-size: 12px;
  183. }
  184. main .main_content .right .right_top .anniu button {
  185.   display: block;
  186.   border: none;
  187.   outline: none;
  188.   background-color: #f11717;
  189.   width: 150px;
  190.   height: 34px;
  191.   border-radius: 20px;
  192.   margin: auto;
  193.   color: #fff;
  194.   font-weight: bold;
  195. }
  196. main .main_content .right .right_top .anniu button:hover {
  197.   cursor: pointer;
  198.   width: 151px;
  199.   height: 35px;
  200. }
  202. main .main_content .right .right_bottom .top {
  203.   display: flex;
  204.   place-content: center;
  205. }
  206. main .main_content .right .right_bottom {
  207.   display: grid;
  208.   grid-template-rows: 18px 1fr;
  209.   margin-top: 10px;
  210. }
  211. main .main_content .right .right_bottom .bottom {
  212.   margin-top: 10px;
  213.   place-items: center;
  214.   /* margin: 10px; */
  215.   display: grid;
  216.   gap: 25px;
  217.   grid-template-rows: repeat(5, 18px);
  218. }
  220. main .main_content .right .right_bottom p span {
  221.   font-size: 14px;
  222.   margin: 0 10px;
  223. }
  224. main .main_content .right .right_bottom .top p:first-of-type a {
  225.   background-color: #f11717;
  226.   color: #fff;
  227.   font-size: 12px;
  228.   padding: 1px;
  229. }
  230. main .main_content .right .right_bottom .bottom p a {
  231.   color: #b6b6b6;
  232.   font-size: 14px;
  233. }
  234. main .main_content .right .right_bottom .bottom p a:hover {
  235.   color: red;
  236. }
  238. /*主题内容完结*/
  240. main .main_content .main_bottom .bottom_left {
  241.   background-color: #fff;
  242.   border-radius: 20px;
  243.   display: grid;
  244.   grid-template-columns: repeat(6, 1fr);
  245.   grid-auto-rows: 80px;
  246. }
  247. main .main_content .main_bottom .bottom_left a img {
  248.   width: 100%;
  249. }
  250. main .main_content .main_bottom .bottom_left .left_xxlj {
  251.   display: flex;
  252.   flex-flow: column;
  253.   place-items: center;
  254.   place-content: center;
  255. }
  256. main .main_content .main_bottom .bottom_left .left_xxlj span:first-of-type {
  257.   color: #333333;
  258. }
  259. main .main_content .main_bottom .bottom_left .left_xxlj span:nth-of-type(2) {
  260.   color: #999999;
  261.   font-size: 12px;
  262. }
  263. main .main_content .main_bottom .bottom_left a:nth-of-type(1) {
  264.   display: grid;
  265.   width: 130px;
  266.   grid-template-columns: 40px 1fr;
  267.   place-content: center;
  268.   gap: 10px;
  269. }
  270. main .main_content .main_bottom .bottom_left a dt {
  271.   color: #333333;
  272.   font-size: 12px;
  273. }
  274. main .main_content .main_bottom .bottom_left a dd {
  275.   padding: 8px 0;
  276.   font-size: 12px;
  277.   color: #999999;
  278. }
  279. main .main_content .main_bottom .bottom_left a dt:hover {
  280.   color: red;
  281. }
  282. main .main_content .main_bottom .bottom_left a:nth-of-type(2) {
  283.   display: grid;
  284.   width: 130px;
  285.   grid-template-columns: 40px 1fr;
  286.   place-content: center;
  287.   gap: 10px;
  288. }
  289. main .main_content .main_bottom .bottom_left a:nth-of-type(3) {
  290.   display: grid;
  291.   width: 130px;
  292.   grid-template-columns: 40px 1fr;
  293.   place-content: center;
  294.   gap: 10px;
  295. }
  296. main .main_content .main_bottom .bottom_left a:nth-of-type(4) {
  297.   display: grid;
  298.   width: 130px;
  299.   grid-template-columns: 40px 1fr;
  300.   place-content: center;
  301.   gap: 10px;
  302. }
  303. main .main_content .main_bottom .bottom_left a:nth-of-type(5) {
  304.   display: grid;
  305.   width: 130px;
  306.   grid-template-columns: 40px 1fr;
  307.   place-content: center;
  308.   gap: 10px;
  309. }
  310. main .main_content .bottom_right {
  311.   background-color: #fff;
  312.   border-radius: 20px;
  313.   display: grid;
  314.   grid-template-columns: repeat(2, 1fr);
  315. }
  316. main .main_content .bottom_right a:first-of-type {
  317.   display: flex;
  318.   flex-flow: column;
  319.   place-content: center;
  320.   place-items: center;
  321. }
  322. main .main_content .bottom_right a:first-of-type + a {
  323.   display: flex;
  324.   flex-flow: column;
  325.   place-content: center;
  326.   place-items: center;
  327. }
  328. main .main_content .bottom_right a h2 {
  329.   height: 16px;
  330.   font-size: 12px;
  331.   font-weight: bold;
  332.   line-height: 16px;
  333.   color: #333333;
  334. }
  335. main .main_content .bottom_right a span {
  336.   color: #777;
  337.   font-size: 32px;
  338.   padding-bottom: 5px;
  339. }
  340. main .main_content .bottom_right a:hover h2 {
  341.   color: red;
  342. }
  343. /*主体部分结束*/
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：写的不错
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post