在网页设计和开发中，CSS（层叠样式表）是控制页面布局与外观的重要工具。熟练掌握一些常用的CSS样式代码，不仅能提高工作效率，还能让网页更加美观和易维护。以下是整理的一些实用CSS代码片段，供开发者参考。
1. 基本文本样式
```css
p {
font-family: Arial, sans-serif; / 设置字体 /
font-size: 16px; / 字体大小 /
color: 333; / 文字颜色 /
line-height: 1.5; / 行高 /
}
```
2. 按钮样式
```css
button {
padding: 10px 20px; / 内边距 /
background-color: 007BFF; / 背景颜色 /
color: white; / 文字颜色 /
border: none; / 去掉边框 /
border-radius: 5px; / 圆角 /
cursor: pointer; / 鼠标悬停时显示为手型 /
}
button:hover {
background-color: 0056b3; / 鼠标悬停时改变背景颜色 /
}
```
3. 图片居中并添加圆角
```css
img {
display: block; / 将图片变为块级元素 /
margin: 0 auto; / 水平居中 /
border-radius: 10px; / 添加圆角 /
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); / 添加阴影效果 /
}
```
4. 导航栏样式
```css
nav ul {
list-style-type: none; / 去掉列表符号 /
padding: 0;
margin: 0;
background-color: 333;
}
nav ul li {
display: inline-block; / 横向排列 /
margin-right: 20px;
}
nav ul li a {
text-decoration: none; / 去掉下划线 /
color: white;
padding: 10px 15px;
display: block;
}
nav ul li a:hover {
background-color: 555; / 鼠标悬停时改变背景颜色 /
}
```
5. 表单样式
```css
input[type="text"], input[type="email"] {
width: 100%; / 宽度占满父容器 /
padding: 10px;
margin-bottom: 10px;
border: 1px solid ccc;
border-radius: 4px;
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: 28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: 218838;
}
```
6. 响应式布局
```css
.container {
max-width: 1200px; / 最大宽度 /
margin: 0 auto; / 水平居中 /
padding: 0 20px; / 左右内边距 /
}
@media (max-width: 768px) {
.container {
padding: 0 10px; / 小屏幕时减少内边距 /
}
}
```
7. 卡片样式
```css
.card {
width: 300px;
margin: 20px auto;
padding: 20px;
background-color: fff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
border-radius: 8px;
}
.card h2 {
margin: 0 0 10px;
color: 333;
}
.card p {
color: 666;
}
```
以上是一些常用的CSS代码片段，涵盖了文本、按钮、图片、导航栏、表单以及响应式布局等多个方面。通过灵活运用这些代码，可以快速搭建出功能完善且美观的网页。希望这些内容能对你的开发工作有所帮助！
