热搜: fiddler git ip 代理
历史搜索

CSS 主流布局案例合集1(代码)

菜鸟2024-05-05 09:30:02
1、可折叠效果布局(手风琴)

应用场景和技术要点

点击新闻标题时,会以下拉展开形式显示更多的内容,同时左侧的小图标会旋转方向。这里只提供 CSS 布局部分。

CSS 主流布局案例合集1(代码) 1

  .accordion {
    border: 1px solid #ddd; /*边框 1px  实线  黑色半透明*/
    border-bottom-color: transparent; /*底边框色透明,不可见*/
    border-radius: 4px; /*圆角*/
  }
  .accordion-item {
    border-bottom: 1px solid #ddd;
  }
  .accordion-header {
    display: flex; /*弹性布局*/
    align-items: center; /* 垂直居中放置内容 */
    padding: 10px;
    cursor: pointer;
  }
  .accordion-icon {
    margin-right: 12px; /*小图标与标题右边间距*/
    color: #ddd; /*图标颜色*/
    flex-shrink: 0; /*不缩放*/
    font-size: 20px; /*控制图标大小*/
  }
  /*选中后,显示的图标*/
  .accordion-icon__selected {
    transform: rotate(90deg);
  }
  /*新闻标题*/
  .accordion-title {
    /* flex:1 相当于以下代码的简写flex-grow: 1;flex-shrink: 1;flex-basis: 0; */
    flex: 1;
    font-size: 16px;
  }
  .accordion-content {
    display: none;
    padding: 10px;
    font-size: 14px;
  }
  .accordion-content__selected {
    /* 选中后,显示内容 */
    display: block;
  }      
                  
                
        ........                    
    
                  
                .....                    ............

2、不同方向箭头

应用场景和技术要点

利用 border 边框属性和 rotate 旋转来制作不同方向箭头

CSS 主流布局案例合集1(代码) 2

  .button-arrow {
    padding: 10px;
    height: 12px;
    width: 12px;
    border: 1px solid #ddd;
    display: inline-block;
  }
  .button-arrow__down::before,
  .button-arrow__left::before,
  .button-arrow__right::before,
  .button-arrow__up::before {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
  }
  .button-arrow__up::before {
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    transform: translateY(25%) rotate(45deg);
  }
  .button-arrow__right::before {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(-25%) rotate(45deg);
  }

  .button-arrow__down::before {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
  }
  .button-arrow__left::before {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(25%) rotate(45deg);
  }

3、头像布局

应用场景和技术要点

头像布局的核心是,不管用户上传的图片是何尺寸的,最终图片都不会因为压缩或拉伸而变形

CSS 主流布局案例合集1(代码) 3

  .user-avatar {
    border-radius: 50%;
    height: 64px;
    width: 64px;
    border: 1px solid #ddd;
    padding: 5px;
  }
  .avatar-image {
    border-radius: 50%;
    height: 100%;
    width: 100%;
    object-fit: cover; /*按图片原有尺寸比例来裁剪*/
  }

4、头像列表

应用场景和技术要点

多个头像并排显示,并且叠在一起

CSS 主流布局案例合集1(代码) 4

  .avatars {
    display: flex; /*弹性布局,元素默认水平排列*/
  }
  .avatars-item {
    margin-left: -6px; /*后面的元素会向左移6px*/
  }
  .avatars-image {
    width: 40px;
    height: 40px;
    box-shadow: 0 0 0 4px #fff; /*白色的影阴*/
    border-radius: 9999px; /*圆半径足够大-形成正圆*/
  }
  .avatars-image img {
    border-radius: 9999px; /*圆的半径*/
    width: 100%;
    height: 100%;
    object-fit: cover; /*以图片原有尺寸来裁剪*/
  }

5、徽章效果

CSS 主流布局案例合集1(代码) 5

  .badge {
    height: 100px;
    width: 100px;
    /* 弹性布局,子项水平垂直居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ddd;
    color: #fff;
    border-radius: 9999px; /*圆半径*/
    font-size: 30px;
  }  1

单张卡片效果

盒子中的元素内容,默认从上往下依次排列

CSS 主流布局案例合集1(代码) 6

  .card {
    display: flex;
    flex-direction: column; /*主轴设为垂直方向,从上往下排列*/
    border: 1px solid #ddd;
    padding: 5px;
  }
  .card-cover {
    height: 150px;
    width: 100%;
    background-color: #ddd;
  }
  .card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover; /*图片按原有比例尺寸来裁剪*/
  }
  .card-content {
    flex: 1;
  }      
                  
    ....    ...

7、元素水平垂直居中

多行元素在当前盒子中整体水平垂直居中显示

CSS 主流布局案例合集1(代码) 7

  body,
  html {
    height: 100%;
  }
  .container {
    border: 1px solid #ddd;
    height: 100%;
    /*核心代码*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .container .img {
    width: 100px;
    height: 100px;
    background-color: #ddd;
    border-radius: 100%;
    overflow: hidden; /*超出部分显示隐藏*/
  }      ...    ....    ....

8、关闭按扭

CSS 主流布局案例合集1(代码) 8

  .close-button {
    height: 32px;
    width: 32px;
    position: relative; /*相对定位*/
    border: 1px solid #ddd; /*边框*/
    cursor: pointer; /*鼠标手指效果*/
  }
  .close-button::after,
  .close-button::before {
    content: "";
    position: absolute; /*绝对定位*/
    height: 1px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .close-button::before {
    left: 0px;
    top: 50%;
    transform: rotate(45deg); /*顺时针旋转45deg*/
  }
  .close-button::after {
    left: 0px;
    top: 50%;
    transform: rotate(-45deg); /*逆时针旋转45deg*/
  }


标签:前端开发