当前位置：首页 > CSS

css制作案例

2026-03-11 21:05:37CSS

CSS制作案例

CSS（层叠样式表）是网页设计中不可或缺的一部分，用于控制网页的布局和外观。以下是一些常见的CSS制作案例，涵盖不同应用场景和技巧。

响应式导航栏

使用CSS和HTML创建一个响应式导航栏，适合移动设备和桌面浏览器。

<nav class="navbar">
  <div class="navbar-brand">Logo</div>
  <ul class="navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="hamburger">☰</div>
</nav>

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #333;
  color: white;
}

.navbar-nav {
  display: flex;
  list-style: none;
}

.navbar-nav li {
  margin-left: 1rem;
}

.navbar-nav a {
  color: white;
  text-decoration: none;
}

.hamburger {
  display: none;
  cursor: pointer;
}

@media (max-width: 768px) {
  .navbar-nav {
    display: none;
  }
  .hamburger {
    display: block;
  }
}

卡片布局

创建一个卡片布局，展示图片和文本内容。

<div class="card">
  <img src="image.jpg" alt="Sample Image">
  <div class="card-content">
    <h3>Card Title</h3>
    <p>This is a sample card description.</p>
    <button>Read More</button>
  </div>
</div>

.card {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

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

.card-content {
  padding: 1rem;
}

.card-content h3 {
  margin: 0 0 0.5rem 0;
}

.card-content p {
  margin: 0 0 1rem 0;
  color: #666;
}

.card-content button {
  padding: 0.5rem 1rem;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

动画效果

使用CSS动画创建一个简单的加载动画。

<div class="loader"></div>

.loader {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

网格布局

使用CSS Grid创建一个简单的网格布局。

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem;
}

.grid-item {
  background-color: #f4f4f4;
  padding: 2rem;
  text-align: center;
  border-radius: 4px;
}

悬停效果

为按钮添加悬停效果。

css制作案例

<button class="hover-button">Hover Me</button>

.hover-button {
  padding: 0.75rem 1.5rem;
  background-color: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.hover-button:hover {
  background-color: #218838;
}

这些案例展示了CSS在不同场景下的应用，可以根据需求进行调整和扩展。