在网页设计与开发中，CSS（层叠样式表）是不可或缺的一部分，它帮助我们控制页面的外观和布局。以下是一些常用的CSS样式代码片段，可以帮助开发者快速实现常见的效果，同时保持代码简洁且易于维护。
1. 清除默认边距和填充
```css
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
```
这段代码可以清除所有元素的默认边距和填充，确保页面布局更加一致。
2. 设置全局字体
```css
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: 333;
}
```
通过设置全局字体，可以让整个网站的文本风格保持统一。
3. 居中对齐元素
```css
.center {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
```
此代码可以将任何内容水平和垂直居中，适用于需要动态调整屏幕大小的情况。
4. 圆角边框
```css
.rounded {
border-radius: 8px;
}
```
为元素添加圆角边框，让界面看起来更柔和。
5. 阴影效果
```css
.shadow {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
```
为按钮或卡片添加阴影效果，增加层次感。
6. 响应式字体大小
```css
.responsive-text {
font-size: calc(1rem + 1vw);
}
```
根据视口宽度动态调整字体大小，提升用户体验。
7. 消除超链接下划线
```css
a {
text-decoration: none;
color: 007BFF;
}
```
移除超链接的下划线，并设置颜色以增强视觉效果。
8. 卡片式布局
```css
.card {
background-color: fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
```
创建一个简单的卡片式布局，带有悬停效果。
9. 固定顶部导航栏
```css
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: 333;
color: fff;
z-index: 1000;
}
```
固定顶部导航栏，方便用户随时访问主要功能。
10. 全屏背景图片
```css
.fullscreen-bg {
background: url('background.jpg') no-repeat center center/cover;
height: 100vh;
width: 100%;
}
```
使用背景图片覆盖整个屏幕，增强视觉冲击力。
这些代码片段涵盖了从基础到高级的CSS应用，希望能为你的项目提供实用的帮助！
