今天用vue 3写了个数码展示 demo：

这个布局，其实很简单

分三个部分，一、导航栏

1. /* 固定导航栏 */
   
2. .navbar {
   
3.     background: white;
   
4.     position: fixed;
   
5.     top: 0;
   
6.     left: 0;
   
7.     right: 0;
   
8.     z-index: 1000;
   
9.     border-bottom: 1px solid #eee;
   
10. }
    
11. 
    
12. .navbar .container {
    
13.     display: flex;
    
14.     justify-content: space-between;
    
15.     align-items: center;
    
16.     height: 60px;
    
17. }

复制代码

没啥技术可言，重要的就是这句：justify-content: space-between;

就是分为两边，在图中你也看到了，一个名字在左边，三个链接在右边


重点来了，就是下面的两栏，是怎么分配的

1. .main-content {
   
2.     display: grid;           /* 将容器设置为网格布局 */
   
3.     grid-template-columns: 250px 1fr;  /* 定义两列布局 */
   
4.     gap: 30px;              /* 设置网格间距 */
   
5.     margin-top: 80px;       /* 顶部外边距 */
   
6. }
   

复制代码

有耐心看完，这个项目完事！提前祝大家五一快乐！

写了一个很pretty card webpage

妙就秒在，一个card就是一个webpage

经过润色，就形成了下面这个页面，还是很哇塞