Community Learn Tools Library Leisure
search
English
Home > List of blog posts > grid和flex布局实现右侧布局
Blogger Information
Blog 10
fans 0
comment 0
visits 4720
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布局实现右侧布局
P粉854918706
Original
580 people have browsed it

main.css代码

  1. main {
  2.     font-size: 14px;
  3. }
  4. main .navs{
  5.     display: grid;
  6.     grid-template-columns: 160px 810px 190px;
  7.     grid-template-rows: 400px 80px;
  8.     gap:20px;
  9.     place-content: center;
  10.     margin: 10px 0 20px;
  11. }
  12. main .navs > * {
  13.     background-color: #fff;
  14.     border-radius: 12px;
  15. }
  16. main .navs .slider a img{
  17.     width:100%;
  18.     border-radius: 12px;
  19. }
  20. main .navs .left{
  21.     padding: 20px 0;
  22.     display: grid;
  23.     place-items: center;
  24. }
  25. main .navs .left a{
  26.     padding:10px 20px;
  28. }
  29. main .navs .left a:hover{
  30.     border-radius: 20px;
  31.     color:red;
  32.     background-color: rgb(250,223,227);
  33. }
  34. main .navs .right{
  35.     display:grid;
  36.     grid-template-rows: 75px 75px 1fr;
  37. }
  38. main .navs .right .user{
  39.     display:flex;
  40.     place-content: space-evenly;
  41.     place-items: center start;
  42. }
  43. main .navs .right .user li{
  44.     display: grid;
  45.     grid-template-columns: 40px 100px;
  46.     grid-template-rows: repeat(2,25px);
  47.     gap: 0 10px;
  48.     place-items: center start;
  49. }
  50. main .navs .right .user li a:first-of-type{
  51.     grid-row: span 2; 
  52. }
  53. main .navs .right .user li a img{
  54.     width:100%;
  55.     border-radius: 50%;
  56. }
  57. main .navs .right .user li a{
  58.     font-size: 14px;
  59.     font-weight: bolder;
  60. }
  61. main .navs .right .user li a:hover,
  62. main .navs .right .list li a:hover{
  63.     color:red;
  64. }
  65. main .navs .right .user li span{
  66.     color:#999;
  67. }
  68. main .navs .right .title a{
  69.     display: block;
  70.     width:150px;
  71.     height:34px;
  72.     margin-left: 20px;
  73.     margin-bottom: 30px;
  74.     text-align: center;
  75.     line-height: 34px;
  76.     background-color: red;
  77.     color: #fff;
  78.     border-radius: 20px;
  79. }
  80. main .navs .right .list{
  81.     display: grid;
  82.     padding: 10px 20px 5px;    
  83. }
  84. main .navs .right .list li:first-of-type>a{
  85.     display: inline-block;
  86.     width:31px;
  87.     height:16px;
  88.     line-height: 16px;
  89.     border-radius: 2px;
  90.     background-color: red;
  91.     color:#fff;
  92.     font-size: 12px;
  93.     text-align: center;
  94. }
  95. main .navs .right .list li a{
  96.     margin-left: 10px;
  97.     color:#999;
  98. }
  99. main .navs .right .list .mid{
  100.     display: flex;
  101. }
  102. main .navs .right .list .mid span{
  103.     width:50px;
  104. }
  105. main .navs .bottom-left{
  106.     display: grid;
  107.     grid-column: span 2;
  108.     grid-template-columns: 100px 1fr;
  109. }
  110. main .navs .bottom-left .desc{
  111.     display: grid;
  112.     padding:16px 0;
  113.     place-items: center;
  114. }
  115. main .navs .bottom-left .desc span{
  116.     font-size: 12px;
  117.     color:#999;
  118. }
  119. main .navs .bottom-left .detail{
  120.     display: flex;
  121.     place-items: center;
  122.     place-content: space-between;
  123.     padding:20px;
  124. }
  125. main .navs .bottom-left .detail li{
  126.     display: grid;
  127.     grid-template-columns: 36px 85px;
  128.     grid-template-rows: repeat(2,20px);
  129.     gap: 0 10px;
  130.     place-items: center start ;
  131. }
  132. main .navs .bottom-left .detail li img{
  133.     width:100%;
  134.     grid-row:span 2;
  135. }
  136. main .navs .bottom-left .detail li a{
  137.     font-size: 14px;
  138. }
  139. main .navs .bottom-left .detail li a:hover{
  140.     color:red;
  141. }
  142. main .navs .bottom-left .detail li span{
  143.     font-size:12px;
  144.     color:#999;
  145. }
  146. main .navs .bottom-right{
  147.     display: flex;
  148.     place-items: center;
  149.     place-content: space-evenly;
  151. }
  152. main .navs .bottom-right li{
  153.     display:grid;
  154.     place-items: center;
  155.     gap:8px 0;
  156. }
  157. main .navs .bottom-right li span.icon-logo-wechat,
  158. main .navs .bottom-right li span.icon-QQ-circle-fill{
  159.     font-size:32px;
  160.     color:#999;
  161. }
  162. main .navs .bottom-right li span:hover{
  163.     cursor: pointer;
  164. }
  165. main .navs .bottom-right li a:hover{
  166.     color:red;
  167. }
  168. main .navs .bottom-right li a{
  169.     font-size: 12px;
  170.     font-weight:bolder;
  171.     color: #515151;
  172. }

这是case.html代码

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="static/css/header.css" />
  10.     <link rel="stylesheet" href="static/css/main.css">
  11.     <link rel="stylesheet" href="static/font/iconfont.css" />
  12. </head>
  14. <body>
  15.     <header>
  16.         <div class="top">
  17.             <div class="content">
  18.                 <div class="title">php中文网-程序员梦开始的地方</div>
  19.                 <div class="right">
  20.                     <a href="" class="iconfont icon-tixing-tianchong myicon"></a>
  21.                     <a href=""><img src="static/image/IMG_20210728_191104.jpg" alt="" /></a>
  22.                 </div>
  23.             </div>
  24.         </div>
  25.         <div class="navs">
  26.             <div class="content">
  27.                 <a href=""><img src="static/image/logo.png" alt="" /></a>
  28.                 <nav>
  29.                     <a href="" class="active">首页</a>
  30.                     <a href="">教学视频</a>
  31.                     <a href="">学习路径</a>
  32.                     <a href="">社区问答</a>
  33.                 </nav>
  34.                 <div class="search">
  35.                     <input type="search" placeholder="输入关键字" />
  36.                     <span class="iconfont icon-fangdajing1"></span>
  37.                 </div>
  38.             </div>
  39.         </div>
  40.     </header>
  41.     <main>
  42.         <div class="navs">
  43.             <div class="left">
  44.                 <a href="">php开发</a>
  45.                 <a href="">大前端</a>
  46.                 <a href="">后端开发</a>
  47.                 <a href="">数据库</a>
  48.                 <a href="">移动端</a>
  49.                 <a href="">运维开发</a>
  50.                 <a href="">UI设计</a>
  51.                 <a href="">计算机基础</a>
  52.             </div>
  53.             <div class="slider">
  54.                 <a href=""><img src="static/image/736f835f2907e552e0257e59ec635a10_62fdcfb67b3b8383.png" alt=""></a>
  55.             </div>
  56.             <div class="right">
  57.                 <div class="user">
  58.                     <li>
  59.                         <a href=""><img src="static/image/user_avatar.jpg" alt=""></a>
  60.                         <a href="">P粉8549...</a>
  61.                         <span>p豆 18</span>
  62.                     </li>
  63.                 </div>
  64.                 <div class="title">
  65.                     <a href="">我的学习</a>
  66.                     <hr style="height:1px;border:none;border-top:1px solid #eee">
  67.                 </div>
  68.                 <div class="list">
  69.                     <li>问答社区<a href="">答疑</a></li>
  70.                     <li class="mid">
  71.                         <span>头条</span> 
  72.                         <a href="">9个vue3开发技巧，提升效率帮</a>
  73.                     </li>
  74.                     <li>福利<a href="">限时折扣>></a></li>
  75.                     <li>新班<a href="">21期PHP直播班</a></li>
  76.                     <li>招募<a href="">课程合作计划</a></li>
  77.                     <li>公告<a href="">APP上线啦</a></li>
  78.                 </div>
  79.             </div>
  80.             <div class="bottom-left">
  81.                 <div class="desc">
  82.                     <div class="title">学习路径</div>
  83.                     <span>全部7个&gt</span>
  84.                 </div>
  85.                 <div class="detail">
  86.                     <li onclick="">
  87.                         <img src="static/image/dgjj.png" alt="">
  88.                         <a href="">独孤九剑</a>
  89.                         <span>9门课程</span>
  90.                     </li>
  91.                     <li onclick="">
  92.                         <img src="static/image/phpkjkf.png" alt="">
  93.                         <a href="">玉女心经</a>
  94.                         <span>5门课程</span>
  95.                     </li>
  96.                     <li onclick="">
  97.                         <img src="static/image/phpksrm.png" alt="">
  98.                         <a href="">天龙八部</a>
  99.                         <span>3门课程</span>
  100.                     </li>
  101.                     <li onclick="">
  102.                         <img src="static/image/tlbb.png" alt="">
  103.                         <a href="">自学指南</a>
  104.                         <span>19门课程</span>
  105.                     </li>
  106.                     <li onclick="">
  107.                         <img src="static/image/ynxj.png" alt="">
  108.                         <a href="">趣味闯关</a>
  109.                         <span>22门课程</span>
  110.                     </li>
  111.                 </div>
  112.             </div>
  113.             <div class="bottom-right">
  114.                 <li>
  115.                     <span class="iconfont icon-logo-wechat"></span>
  116.                     <a href="">官方公众号</a>
  117.                 </li>
  118.                 <li>
  119.                     <span class="iconfont icon-QQ-circle-fill"></span>
  120.                     <a href="">官方QQ群</a>
  121.                 </li>
  122.             </div>
  123.         </div>
  124.     </main>
  125. </body>
  127. </html>

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