项目实训：创建一张贺卡以及一只盒子——WEB开发系列27

一条晒干的咸魚

已于 2024-09-02 14:34:41 修改

阅读量538

点赞数 17

分类专栏： WEB前端文章标签：前端 css html web前端 web

于 2024-09-02 14:34:00 首次发布

本文链接：https://blog.csdn.net/LEECOO666/article/details/141819187

版权

WEB前端专栏收录该内容

27 篇文章 0 订阅

订阅专栏

以下是两道关于基础 CSS 盒模型和其他盒子相关特性的练习题，适合测试对这些概念的掌握程度，通过实际的设计任务来深入理解这些概念。

练习题 1: 设计一张中秋节海报贺卡

任务描述

制作一张精美的中秋节海报贺卡，用于庆祝这个传统节日。你的目标是应用 CSS 盒模型的各种属性来创建一个视觉上吸引人的海报，包括边距（margin）、边框（border）、内边距（padding）和内容区域（content）。海报的设计应包括节日的相关图像和祝福文字。

设计要求

海报的基本结构:

使用一个容器元素来包裹整个海报。
海报内应包含一个节日图像和一段祝福文字。

CSS 样式要求:

为海报容器设置宽度和高度，确保它在不同屏幕尺寸下的展示效果良好。
给海报容器添加一个边框和内边距，使其内容更加突出。
为海报容器设置一个适当的边距，以便它在页面上居中显示。
使用 CSS 属性使图像和文字的布局既美观又有节日气氛，例如调整图像的大小、字体的颜色和背景。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>中秋节海报贺卡</title>
<style>
  .poster {
    width: 300px;
    height: 400px;
    margin: 20px auto;
    padding: 20px;
    border: 5px solid #f5a623;
    background-color: #fff8e1;
    text-align: center;
    border-radius: 10px;
  }
  .poster img {
    width: 100%;
    height: auto;
    border-bottom: 2px solid #f5a623;
  }
  .poster h1 {
    margin-top: 10px;
    font-size: 24px;
    color: #f5a623;
  }
  .poster p {
    font-size: 18px;
    color: #333;
  }
</style>
</head>
<body>
  <div class="poster">
    <img src="mooncake.jpg" alt="Mooncake">
    <h1>中秋快乐!</h1>
    <p>愿你的生活像圆月一样美满。</p>
  </div>
</body>
</html>

解释

.poster 类应用了 margin、padding 和 border 来调整海报的位置、内边距和边框。背景颜色和边框颜色也为海报增添了节日气氛。
.poster img 类设置了图像的宽度，使其适应容器的宽度，并添加了底边框来分隔图像和文字。
.poster h1 和 .poster p 类设置了标题和文字的字体颜色和大小，使其与海报的整体风格相协调。

练习题 2: 样式化一个盒子

任务描述

创建一个样式化的盒子，用于展示如何运用 CSS 盒模型的不同属性来设计和布局元素。这个盒子将包含一个标题、描述和一个按钮。你的任务是使用 CSS 盒模型的属性来美化这个盒子，确保它在网页上呈现出良好的视觉效果。

设计要求

盒子的基本结构:

使用一个容器元素来包裹整个盒子。
盒子内应包含一个标题、一段描述文字和一个按钮。

CSS 样式要求:

设置盒子的宽度、高度和边距，以确保它在页面上居中显示。
添加内边距和边框来增强盒子的外观。
为标题、描述和按钮设置适当的样式，例如字体、颜色和背景色。
确保按钮在盒子内居中显示，并设置悬停效果以提升用户体验。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式化盒子</title>
<style>
  .box {
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    border: 2px solid #f90;
    background-color: #000000;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgb(255, 179, 0);
    text-align: center;
  }
  .box h2 {
    margin-top: 0;
    font-size: 22px;
    color: #f90;
  }
  .box p {
    font-size: 16px;
    color: #ff9d00;
  }
  .box button {
    padding: 10px 20px;
    font-size: 16px;
    color: #ffffff;
    background-color: #f90;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
  }
  .box button:hover {
    background-color: #f90;
  }
</style>
</head>
<body>
  <div class="box">
    <h2>欢迎来到Porn</h2>
    <p>我们提供优质的影片，以满足您的需求。请立即注册并体验我们的服务。</p>
    <button>立即注册</button>
  </div>
</body>
</html>

解释

.box 类设置了盒子的 width、margin、padding 和 border。使用 box-shadow 属性为盒子添加了阴影效果，使其看起来更加立体。
.box h2 和 .box p 类设置了标题和描述的字体颜色和大小，确保文本与盒子的整体风格相协调。
.box button 类样式化了按钮，包括背景颜色、内边距和边角的圆角效果。悬停效果则增强了按钮的互动性，使用户体验更佳。