[分享]css个人小网站的源代码

CSS是网页设计中的重要组成部分。通过CSS，我们可以为网站添加样式和美观的效果。下面是我个人小网站的CSS源代码：/ 全局样式 / body { margin: 0; padding: 0; fon...

CSS是网页设计中的重要组成部分。通过CSS，我们可以为网站添加样式和美观的效果。下面是我个人小网站的CSS源代码：

/* 全局样式 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  background-color: #333;
  color: #fff;
  padding: 10px;
  display: flex;
  justify-content: space-between;
}

.navbar .logo {
  font-size: 24px;
  font-weight: bold;
  letter-spacing: 2px;
}

.navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
}

.navbar ul li {
  margin: 0 15px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}

/* 首页样式 */
.main {
  width: 80%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.main .card {
  width: 30%;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.main .card img {
  width: 100%;
  height: auto;
}

.main .card h3 {
  margin-top: 20px;
  font-size: 20px;
}

.main .card p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.5;
}

/* 页脚样式 */
.footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
} 

在全局样式中，设置了整个网页的背景色、字体等；在导航栏样式中，设置了导航栏的背景色、字体颜色等；在首页样式中，设置了展示卡片的宽度、背景色、阴影等；在页脚样式中，设置了页脚的背景色、字体颜色、居中等样式。通过CSS，我成功地为我的小网站添加了美观的样式和效果。