1、可折叠效果布局（手风琴）
应用场景和技术要点
点击新闻标题时，会以下拉展开形式显示更多的内容，同时左侧的小图标会旋转方向。这里只提供 CSS 布局部分。
.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 旋转来制作不同方向箭头
.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、头像布局
应用场景和技术要点
头像布局的核心是，不管用户上传的图片是何尺寸的，最终图片都不会因为压缩或拉伸而变形
.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、头像列表
应用场景和技术要点
多个头像并排显示，并且叠在一起
.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、徽章效果
.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单张卡片效果
盒子中的元素内容，默认从上往下依次排列
.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、元素水平垂直居中
多行元素在当前盒子中整体水平垂直居中显示
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、关闭按扭
.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*/
}