css页面制作代码

CSS 页面制作基础代码

以下是一些常用的 CSS 页面制作代码示例，涵盖布局、样式和响应式设计等核心功能。

基本布局代码

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 页面容器 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

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

.navbar a {
  color: white;
  text-decoration: none;
  margin: 0 10px;
}

网格布局代码

/* 网格系统 */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grid-item {
  background-color: #f4f4f4;
  padding: 20px;
  border-radius: 5px;
}

/* 响应式网格 */
@media (max-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

按钮样式代码

/* 基础按钮样式 */
.btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.3s;
}

/* 按钮变体 */
.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-secondary {
  background-color: #6c757d;
  color: white;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

表单样式代码

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-control {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

动画效果代码

/* 淡入动画 */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 悬停缩放效果 */
.zoom-effect {
  transition: transform 0.3s;
}

.zoom-effect:hover {
  transform: scale(1.05);
}

响应式设计代码

/* 媒体查询示例 */
.header {
  font-size: 2rem;
  padding: 20px;
}

@media (max-width: 768px) {
  .header {
    font-size: 1.5rem;
    padding: 15px;
  }
}

@media (max-width: 480px) {
  .header {
    font-size: 1.2rem;
    padding: 10px;
  }
}

Flexbox 布局代码

/* Flexbox 容器 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1 0 200px;
  margin: 10px;
  background-color: #eee;
  padding: 15px;
}

这些代码示例涵盖了 CSS 页面制作中的常见需求，可以根据具体项目进行调整和扩展。