search

博客列表 >grid和flex布局实现右侧布局

grid和flex布局实现右侧布局

P粉854918706
P粉854918706原创
2022年10月05日 00:32:59581浏览

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>

上一条：数据类型与流程控制下一条：数据迁移工具 chameleon 的使用限制
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多