带有木质纹理的创意广告牌设计

介绍

在这个项目中，你将学习如何创建一个富有创意的广告牌设计，融合“奇幻谷”的历史与“梦幻湾”的繁荣。你将学习如何用木质纹理背景和倾斜的顶部标志为广告牌设计风格，为路人创造引人入胜的艺术体验。

👀 预览

🎯 任务

在这个项目中，你将学习：

• 如何设置广告牌元素的边框半径和背景图像
• 如何使顶部角落变圆并倾斜顶部标志元素

🏆 成果

完成这个项目后，你将能够：

• 使用诸如 border-radius 和 transform 等 CSS 属性来创建独特的设计元素
• 融入背景图像以提升网页设计的整体美感
• 组合设计元素以创建一个连贯且视觉上吸引人的布局

设置项目结构

首先，打开实验环境，其目录结构如下：

├── css
│   └── style.css
├── images
│   └── woodiness.jpg
└── index.html

其中：

• index.html 是主页。
• images 是用于存储项目图像的文件夹。
• css/style.css 是你需要补充代码的 CSS 文件。

点击 WebIDE 右下角的 Go Live 按钮来运行项目。

接下来，打开虚拟机顶部的“Web 8080”，并手动刷新页面，即可在浏览器中看到以下效果：

设置广告牌背景

在这一步中，你将学习如何设置广告牌元素的背景并使其边角变圆。

1. 打开 css/style.css 文件。

2. 找到 .billboard 类。

3. 添加以下代码来设置边框半径和背景图像：

   border-radius: 10px;
   background-image: url(../images/woodiness.jpg);
   

   • border-radius 属性将 .billboard 元素的边框半径设置为 10 像素，从而创建圆角。
   • background-image 属性将 .billboard 元素的背景图像设置为位于 images 文件夹中的 woodiness.jpg。

倾斜顶部标志

在这一步中，你将学习如何使顶部标志元素的顶角变圆并使其倾斜。

1. 在 css/style.css 文件中找到 .top-sign 类。

2. 添加以下代码以使顶角变圆并倾斜该元素：

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   transform: skewX(-20deg);
   

   • border-top-left-radius 和 border-top-right-radius 属性将 .top-sign 元素的左上角和右上角设置为具有 15 像素的半径，从而创建圆角。
   • transform: skewX(-20deg) 属性使 .top-sign 元素在 x 轴上倾斜 -20 度。

完成这三个步骤后，广告牌应具有圆形的木质纹理背景，并且顶部标志应倾斜且顶角为圆形，如完成效果图像所示。

总结

恭喜你！你已经完成了这个项目。你可以在 LabEx 中练习更多实验来提升你的技能。