这种组件化模块化的思想是非常重要的。这使得维护代码变得简单。

card卡片组件

代码

card.less

  1. .card{
  2.     border:solid 1px #ddd;//边框
  3.     box-shadow: 0 0 5px rgb(128, 125, 125);//边上的阴影
  4.     border-radius: .2rem;
  5.     .card-header{
  6.         padding:1rem;
  7.         border:solid 1px #ddd;//这里的同样颜色可以设置成一个变量，方便更改
  8.     }
  9.     .card-body{
  10.         padding:1rem;
  11.     }
  12.     .card-footer{
  13.         padding:1rem;
  14.         border-top:solid 1px #ddd;
  15.     }
  16. }

title.less:

  1. h2,h3,h4{
  2.     color:#555;
  3. }
  4. h2{
  5.     font-size:1rem;
  6. }
  7. h3{
  8.     font-size:.8rem;
  9. }
  1. <div class="card">
  2.   <div class="card-header">
  3.     <h3>newest</h3>
  4.   </div>
  5.   <div class="card-body"></div>
  6.   <div class="card-footer"></div>
  7. </div>

效果

image.png

list-group组件

代码

list-group:

  1. .list-group{
  2.     li{
  3.         display:flex;
  4.         justify-content:space-between;//两侧对齐
  5.         padding: .8rem 0;//上下内边距  左右不要
  6.         border-bottom:solid 1px #ddd;
  7.         font-size:.8rem;
  8.         &:last-child{//最后一个不想要底线
  9.             border-bottom:none;
  10.         }
  11.         a{
  12.             color:#777;
  13.         }
  14.         span{
  15.             font-size: .5rem;
  16.             color:#888;
  17.         }
  18.     }
  19. }

HTML：

  1. <div class="container">
  2.         <div class="row">
  3.             <div class="col-6 col-lg-9 col-sx-12">
  4.                 <div class="card">
  5.                     <div class="card-header">
  6.                         <h3>newest</h3>
  7.                     </div>
  8.                     <div class="card-body">
  9.                         <ul class="list-group">
  10.                             <li>
  11.                                 <a href="#">test1</a>
  12.                                 <span>2021-05-27</span>
  13.                             </li>
  14.                             <li>
  15.                                 <a href="#">test1</a>
  16.                                 <span>2021-05-27</span>
  17.                             </li>
  18.                             <li>
  19.                                 <a href="#">test1</a>
  20.                                 <span>2021-05-27</span>
  21.                             </li>
  22.                             <li>
  23.                                 <a href="#">test1</a>
  24.                                 <span>2021-05-27</span>
  25.                             </li>
  26.                         </ul>
  27.                     </div>
  28.                     <div class="card-footer">footer</div>
  29.                 </div>
  30.             </div>
  31.             <div class="col-6 col-lg-3 col-sx-12">
  32.                 <div class="card">
  33.                     <div class="card-header">
  34.                         <h3><i class="fa fa-home" aria-hidden="true"></i>社区</h3>                        
  35.                     </div>
  36.                 </div>
  37.             </div>
  38.         </div>
  40.     </div>

效果

image.png
image.png

页码组件

代码

page.less:

  1. .page{
  2.     display:flex;
  3.     a{
  4.         display:block;
  5.         padding:.3rem .8rem;
  6.         border:solid 1px #ddd;
  7.         margin-left: -1px;
  8.         color:#555;
  9.         &:first-child{
  10.             border-top-left-radius: .3rem;
  11.             border-bottom-left-radius: .3rem;
  12.         }
  13.         &:last-child{
  14.             border-top-right-radius: .3rem;
  15.             border-top-right-radius: .3rem;
  16.         }
  17.         &.current{
  18.             background-color:rgb(21, 156, 73);
  19.             color:rgba(255, 255, 255, 0.993);
  20.             border:solid 1px rgb(21, 156, 73);
  21.         }
  22.     }
  23. }

html:

  1. <div class="card-footer">
  2.                         <div class="page">
  3.                             <a href=""><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
  4.                             <a href="">1</a>
  5.                             <a href="">2</a>
  6.                             <a href="" class="current">3</a>
  7.                             <a href="">4</a>
  8.                             <a href="">5</a>
  9.                             <a href=""><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
  10.                         </div>
  11.                     </div>

效果

image.png

边距控制组件

代码

margin：

  1. .mb-1{
  2.     margin-bottom: 1rem;
  3. }
  4. .mb-2{
  5.     margin-bottom: 2rem;
  6. }
  7. .mb-3{
  8.     margin-bottom: 3rem;
  9. }
  10. .mb-4{
  11.     margin-bottom: 4rem;
  12. }
  13. .mb-5{
  14.     margin-bottom: 5rem;
  15. }

HTML：

  1. <body>
  2.     <header class="mb-1">//其实关键就在第一行 看懂这里就好了 下面的都不用看
  3.         <div class="container ">
  4.             <div class="navbar">
  5.                 <a href="#" class="logo">okkjoo</a>
  6.                 <label for="toggle-nav">
  7.                     <i class="fa fa-tasks" aria-hidden="true"></i>
  8.                 </label>
  9.                 <input type="checkbox" id="toggle-nav">
  10.                 <div class="collapse">
  11.                     <ul class="links">
  12.                         <li><a href="">在线文档</a></li>
  13.                         <li><a href="">讨论平台</a></li>
  14.                         <li><a href="">关于本人</a></li>
  15.                         <li><a href="">keepgoing</a></li>
  16.                     </ul>
  17.                     <div class="form">
  18.                         <a href="">登录</a>
  19.                         <a href="" class="form-bg">注册</a>
  20.                     </div>
  21.                 </div>
  22.             </div>
  23.         </div>
  24.     </header>
  26.     <div class="container">
  27.         <div class="row">
  28.             <div class="col-6 col-lg-9 col-sx-12">
  29.                 <div class="card">
  30.                     <div class="card-header">
  31.                         <h3>newest</h3>
  32.                     </div>
  33.                     <div class="card-body">
  34.                         <ul class="list-group">
  35.                             <li>
  36.                                 <a href="#">test1</a>
  37.                                 <span>2021-05-27</span>
  38.                             </li>
  39.                             <li>
  40.                                 <a href="#">test1</a>
  41.                                 <span>2021-05-27</span>
  42.                             </li>
  43.                             <li>
  44.                                 <a href="#">test1</a>
  45.                                 <span>2021-05-27</span>
  46.                             </li>
  47.                             <li>
  48.                                 <a href="#">test1</a>
  49.                                 <span>2021-05-27</span>
  50.                             </li>
  51.                         </ul>
  52.                     </div>
  53.                     <div class="card-footer">
  54.                         <div class="page">
  55.                             <a href=""><i class="fa fa-angle-double-left" aria-hidden="true"></i></a>
  56.                             <a href="">1</a>
  57.                             <a href="">2</a>
  58.                             <a href="" class="current">3</a>
  59.                             <a href="">4</a>
  60.                             <a href="">5</a>
  61.                             <a href=""><i class="fa fa-angle-double-right" aria-hidden="true"></i></a>
  62.                         </div>
  63.                     </div>
  64.                 </div>
  65.             </div>
  66.             <div class="col-6 col-lg-3 col-sx-12">
  67.                 <div class="card">
  68.                     <div class="card-header">
  69.                         <h3><i class="fa fa-home" aria-hidden="true"></i>社区</h3>                        
  70.                     </div>
  71.                 </div>
  72.             </div>
  73.         </div>
  74.     </div>
  75. </body>

效果

就是这里顶出来的空白
image.png

REM单位操作尺寸响应处理

关于REM

在common.less中给:root的字体设置过了15px(:root可以理解为HTML)，那么此时 1rem就是15px
此时如果你想在别的尺寸调整字体大小，例如：你想调整小尺寸时字体大小。
可以直接在small.less中设置一个:root👇覆盖掉common.less中的即可。

代码

  1. :root{
  2.     font-size:20px;
  3. }