css样式进阶 |html 第一个i 标签 背景图片css

/*1. 使用 CSS 变量*/
:root {
--primary-color: #007bff;
}
button {
background-color: var(--primary-color);
}
/*2. 使用 calc() 函数*/
div {
width: calc(50% - 10px);
}
/*3. 使用 nth-child 选择器*/
li:nth-child(odd) {
background-color: #f5f5f5;
}
/*4. 使用 transform 属性*/
button:hover {
transform: scale(1.2);
}
/*5. 使用伪元素*/
a:before {
content: "\f105";
font-family: "FontAwesome";
margin-right: 5px;
}
/*6. 使用 @media 查询*/
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
}
/*7. 使用 transition 属性*/
button {
transition: all 0.3s ease;
}
/*8. 使用 z-index 属性*/
.header {
z-index: 999;
}

以上这些技巧只是 CSS 样式进阶中的一小部分。通过使用这些技巧，您可以创建出更加美观、动态的网站和应用程序。祝您好运！