简体中文（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布局实际应用

grid和flex布局实际应用

xueblog9的进阶之旅
xueblog9的进阶之旅原创
2022年07月17日 01:10:11321浏览

grid和flex布局实际应用

布局实际应用

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>grid: 仿PHP.CN首页</title>
  8.     <!-- <link rel="stylesheet" href="icon-font.css" /> -->
  9.     <link rel="stylesheet" href="https://at.alicdn.com/t/font_3205780_7eqow85axa.css" />
  10.     <link rel="stylesheet" href="static/css/header.css" />
  11.     <link rel="stylesheet" href="static/css/main-nav.css" />
  12.   </head>
  13.   <body>
  14.     <!-- 页眉 -->
  15.     <header>
  16.       <!-- 顶部 -->
  17.       <div class="top">
  18.         <div class="content">
  19.           <!-- 左边:顶部标题 -->
  20.           <div class="title">php中文网,程序员梦开始的地方!</div>
  22.           <!-- 右边: 用户信息 -->
  23.           <div class="right">
  24.             <a href="" class="iconfont icon-tixingtianchong"></a>
  25.             <a href=""><img src="static/images/user-pic.jpeg" alt="" /></a>
  26.           </div>
  27.         </div>
  28.       </div>
  29.       <!-- 导航 -->
  30.       <div class="navs">
  31.         <div class="content">
  32.           <a href="" class="logo"><img src="static/images/logo.png" alt="" /></a>
  33.           <nav>
  34.             <a href="" class="`active">首页</a>
  35.             <a href="">视频教程</a>
  36.             <a href="">学习路径</a>
  37.             <a href="">php培训</a>
  38.             <a href="">资源下载</a>
  39.           </nav>
  40.           <div class="search">
  41.             <input type="search" placeholder="输入关键字" />
  42.             <span class="iconfont icon-fangdajing1"></span>
  43.           </div>
  44.         </div>
  45.       </div>
  46.     </header>
  48.     <!-- 主体 -->
  49.     <main>
  50.       <div class="navs">
  51.         <div class="left">
  52.           <a href="">php开发</a>
  53.           <a href="">大前端</a>
  54.           <a href="">后端开发</a>
  55.           <a href="">数据库</a>
  56.           <a href="">移动端</a>
  57.           <a href="">运维开发</a>
  58.           <a href="">UI设计</a>
  59.           <a href="">计算机基础</a>
  60.         </div>
  61.         <div class="slider">
  62.           <a href=""><img src="static/images/slider.jpeg" alt="" /></a>
  63.         </div>
  64.         <div class="right">
  65.           <div class="userinfo">
  66.             <a href=""><img src="static/images/user-pic.jpeg" alt=""></a>
  67.             <div class="name"><a href="">朱 老 师</a></div>
  68.             <div class="button"><a href="">我的学习</a></div>
  69.             <div class="info">p豆 2065.5</div>
  70.           </div>
  71.           <ul class="tab">
  72.             <li class="content1">问答社区</li>
  73.             <li class="content2">头条</li>
  74.             <li class="content3">福利</li>
  75.             <li class="content4">新班</li>
  76.             <li class="content5">招募</li>
  77.             <li class="content6">公告</li>
  78.             <li class="content7"><a href="">答疑</a></li>
  79.             <li class="content8"><a href="">【整理分享】2022年最流行的</a></li>
  80.             <li class="content9"><a href="">限时折扣>></a></li>
  81.             <li class="content10"><a href="">20期PHP线上班</a></li>
  82.             <li class="content11"><a href="">课程合作计划</a></li>
  83.             <li class="content12"><a href="">app上线啦</a></li>
  84.           </ul>
  85.         </div>
  86.         <div class="bottom-left">
  87.           <div class="desc">
  88.             <div class="title">学习路径</div>
  89.             <span>全部7个&gt;</span>
  90.           </div>
  91.           <ul class="detail">
  92.             <li onclick="">
  93.               <img src="static/images/dgjj.png" alt="" />
  94.               <a href="">独孤九贱</a>
  95.               <span>9门课程</span>
  96.             </li>
  97.             <li onclick="">
  98.               <img src="static/images/ynxj.png" alt="" />
  99.               <a href="">独孤九贱</a>
  100.               <span>9门课程</span>
  101.             </li>
  102.             <li onclick="">
  103.               <img src="static/images/tlbb.png" alt="" />
  104.               <a href="">独孤九贱</a>
  105.               <span>9门课程</span>
  106.             </li>
  107.             <li onclick="">
  108.               <img src="static/images/phpkjkf.png" alt="" />
  109.               <a href="">独孤九贱</a>
  110.               <span>9门课程</span>
  111.             </li>
  112.             <li onclick="">
  113.               <img src="static/images/phpksrm.png" alt="" />
  114.               <a href="">独孤九贱</a>
  115.               <span>9门课程</span>
  116.             </li>
  117.           </ul>
  118.         </div>
  119.         <div class="bottom-right">
  120.           <div class="tel">
  121.             <a href="" class="iconfont icon-weixin weixin"><h2>官方公众号</h2></a>
  122.             <a href="" class="iconfont icon-qq qq"><h2>官方QQ群</h2></a>
  123.           </div>
  124.         </div>
  125.       </div>
  126.     </main>
  127.   </body>
  128. </html>

css源码（部分）

  1. /* 右边菜单样式 */
  2. main .right {
  3.   position: relative;
  4.   padding-top: 30px; 
  5. }
  7. /* 1.头像信息 */
  8. main .right .userinfo {
  9.   display: grid;
  10.   grid-template-columns: 70px 100px;
  11.   grid-template-rows: 30px 30px 30px;
  12.   place-content: center;
  13.   place-items: center;
  14.   position: relative;
  15.   padding-bottom: 20px;
  16.   border-bottom: 1px solid #bbb;
  17. }
  19. /* 头像 */
  20. main .right .userinfo a img {
  21.   border-radius: 50%;
  22.   width: 40px;
  23. }
  25. main .right .userinfo a {
  26.   grid-area: 1 / 1 / span 2 / span 1;
  27.   place-self: center end;
  28. }
  30. main .right .userinfo .name {
  31.   font-size: 12px;
  32.   place-self: end center;
  33.   padding-right: 20px;
  34.   font-weight: bolder; 
  35. }
  37. main .right .userinfo .info {
  38.   font-size: 12px;
  39.   place-self: start center;
  40.   padding-right: 20px;
  41. }
  43. main .right .userinfo .button {
  44.   grid-column: 1 / 3;
  45.   grid-row: 3 / 4;
  46.   width: 130px;
  47.   height: 30px;
  48.   border:1px solid red;
  49.   text-align: center;
  50.   line-height: 30px;
  51.   font-size: 13px;
  52.   background-color: red;
  53.   border-radius: 20px;
  54. }
  56. main .right .userinfo .button a {
  57.   color: white;
  58. }
  60. main .right .userinfo .info {
  61.   grid-column: 2 / 3;
  62.   grid-row: 2 / 3;
  63.   font-weight: lighter;
  64. }
  66. main .right .tab {
  67.   display: grid;
  68.   grid-template-columns: 60px 90px;
  69.   grid-template-rows: repeat(6,35px);
  70.   grid-auto-flow: column;
  71.   place-content: center;
  72.   place-items: center start;
  73.   text-align: center;
  74.   font-size: smaller;
  75.   position: relative;
  76.   top: 20px;
  77. }
  79. main .right .tab li:nth-last-of-type(n+7) {
  80.   font-weight: bolder;
  81.   font-size: 14px;
  82. }
  84. main .right .tab li:nth-of-type(n+7) {
  85.   font-size: 10px;
  86. }
  88. main .right .tab .content7 {
  89.   place-self: center;
  90.   background-color: red;
  91. }
  93. main .right .tab .content7 a {
  94.   color: white;
  95. }
  97. main .right .tab a:hover {
  98.   color: red;
  99. }
  101. /* 右边菜单底部 */
  102. main .navs .bottom-right .tel {
  103.   display: flex;
  104.   place-content: space-evenly;
  105.   place-items: center;
  106.   text-align: center;
  107.   padding: 20px;
  108. }
  110. main .navs .bottom-right .tel h2 {
  111.   font-size: 10px;
  112. }

实际效果：

上一条：Fastadmin下拉多选框编辑显示已选选项下一条：使用grid 和 flex仿php中文网首页布局
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多