search

博客列表 >用grid和flex布局完成php中文网首页上半部分

用grid和flex布局完成php中文网首页上半部分

汇享科技
汇享科技原创
2022年07月15日 14:10:34463浏览

思路分享

效果图：
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. /*主体部分结束*/
上一条：mysql中出现Unit mysql.service could not be found 的解决方法下一条：深度学习系列，前沿技术值得拥有！
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多