期中任务：设计完成一个完整的网页（包括以下几个基本部分：头部【导航、搜索、轮播】、主体（侧边栏、主体内容）、尾部（版权）），页面美观，图文并茂，链接到位。具体要求如下：
1、页面使用到
flex弹性布局和Grid网格布局
2、包含圆角、添加阴影、渐变、变形、过渡等设计效果（至少三处）
3、包含动画效果的设计（至少两处）不使用JavaScript代码和响应式动画，用初学者易懂的方式美化以下代码效果<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>绿色世界
- 环保与可持续发展</title>
<style>
/* 基础样式重置 */
* {
margin: 0;
padding: 0;
box
-sizing: border
-box;
list
-style: none;
text
-decoration: none;
}
body {
font
-family: 'Arial', sans
-serif;
line
-height: 1.6;
color: #333;
background
-color: #f9f9f9;
scroll
-behavior: smooth;
}
/* 头部样式 */
.header {
background: linear
-gradient(135deg, #2ecc71, #27ae60);
box
-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.top
-bar {
max
-width: 1200px;
margin: 0 auto;
padding: 15px 20px;
display:
flex;
justify
-content: space
-between;
align
-items: center;
}
.logo {
display:
flex;
align
-items: center;
gap: 10px;
color: white;
font
-size: 24px;
font
-weight: bold;
}
.logo
-icon {
font
-size: 30px;
transition: transform 0.3s ease;
}
.logo:hover .logo
-icon {
transform: rotate(15deg) scale(1.2);
}
.search
-box {
display:
flex;
flex: 0 0 300px;
}
.search
-box input {
flex: 1;
padding: 10px 15px;
border: none;
border
-radius: 20px 0 0 20px;
outline: none;
transition: all 0.3s ease;
}
.search
-box input:focus {
box
-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}
.search
-box button {
padding: 10px 15px;
background
-color: #2c3e50;
color: white;
border: none;
border
-radius: 0 20px 20px 0;
cursor: pointer;
transition: background
-color 0.3s ease;
}
.search
-box button:hover {
background
-color: #34495e;
}
/* 导航样式 */
.nav
-box {
background
-color: rgba(255, 255, 255, 0.9);
box
-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.nav
-box ul {
max
-width: 1200px;
margin: 0 auto;
display:
flex;
justify
-content: center;
}
.nav
-box li {
position: relative;
}
.nav
-box a {
display: block;
padding: 15px 25px;
color: #333;
font
-weight: 500;
transition: all 0.3s ease;
}
.nav
-box a:hover, .nav
-box a.current {
color: #27ae60;
background
-color: rgba(46, 204, 113, 0.1);
}
.nav
-box a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 3px;
background
-color: #27ae60;
transition: width 0.3s ease;
}
.nav
-box a:hover::after, .nav
-box a.current::after {
width: 100%;
}
/* 轮播图样式 */
.carousel {
position: relative;
max
-width: 1200px;
margin: 0 auto;
overflow: hidden;
border
-radius: 0 0 10px 10px;
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
height: 450px;
}
.slides {
display:
flex;
width: 300%;
height: 100%;
animation: slide 5s infinite ;
}
.slide {
width: 33.333%;
height: 100%;
flex-shrink: 0;
}
.slide img {
width: 100%;
height: 100%;
object
-fit: cover;
}
/* 轮播图动画 */
@keyframes slide {
0%, 25% { transform: translateX(0); }
33%, 58% { transform: translateX(
-33.333%); }
66%, 91% { transform: translateX(
-66.666%); }
100% { transform: translateX(0); }
}
/* 轮播图指示点 */
.points {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(
-50%);
display:
flex;
gap: 10px;
}
.points label {
display: block;
width: 12px;
height: 12px;
border
-radius: 50%;
background
-color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.3s ease;
}
/* 轮播图控制按钮 */
.carousel
-controls {
position: absolute;
top: 50%;
width: 100%;
display:
flex;
justify
-content: space
-between;
transform: translateY(
-50%);
padding: 0 20px;
}
.carousel
-btn {
width: 50px;
height: 50px;
background
-color: rgba(0, 0, 0, 0.3);
color: white;
border: none;
border
-radius: 50%;
font
-size: 20px;
cursor: pointer;
transition: all 0.3s ease;
display:
flex;
align
-items: center;
justify
-content: center;
}
.carousel
-btn:hover {
background
-color: rgba(0, 0, 0, 0.5);
transform: scale(1.1);
}
/* 主体内容样式 */
.container {
max
-width: 1200px;
margin: 30px auto;
display: grid;
grid
-template
-columns: 300px 1fr;
gap: 30px;
padding: 0 20px;
}
/* 侧边栏样式 */
.sidebar {
background
-color: white;
border
-radius: 10px;
box
-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.sidebar
-title {
background: linear
-gradient(to right, #27ae60, #2ecc71);
color: white;
padding: 15px 20px;
font
-size: 18px;
font
-weight: bold;
}
.sidebar
-menu {
padding: 10px 0;
}
.sidebar
-menu li {
border
-bottom: 1px solid #f1f1f1;
}
.sidebar
-menu a {
display: block;
padding: 12px 20px;
color: #333;
transition: all 0.3s ease;
}
.sidebar
-menu a:hover {
background
-color: rgba(46, 204, 113, 0.1);
color: #27ae60;
padding
-left: 25px;
}
.sidebar
-banner {
margin
-top: 20px;
position: relative;
}
.sidebar
-banner img {
width: 100%;
height: 200px;
object
-fit: cover;
}
.banner
-text {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear
-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 15px;
}
/* 主内容区样式 */
.main
-content {
display:
flex;
flex-direction: column;
gap: 30px;
}
.server
-intr {
background
-color: white;
border
-radius: 10px;
box
-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
padding: 20px;
}
.intr
-title {
font
-size: 22px;
color: #27ae60;
margin
-bottom: 20px;
padding
-bottom: 10px;
border
-bottom: 2px solid #f1f1f1;
}
.intr
-title a {
color: #27ae60;
display:
flex;
align
-items: center;
gap: 10px;
}
.intr
-title a::after {
content: '→';
transition: transform 0.3s ease;
}
.intr
-title a:hover::after {
transform: translateX(5px);
}
/* 服务分类切换
- 纯CSS实现 */
.server
-sort {
display:
flex;
margin
-bottom: 20px;
border
-bottom: 1px solid #f1f1f1;
}
.server
-sort label {
margin
-right: 20px;
cursor: pointer;
}
.server
-sort span {
display: block;
padding: 10px 15px;
border
-bottom: 3px solid transparent;
transition: all 0.3s ease;
font
-weight: 500;
}
/* 隐藏单选按钮 */
.sort
-radio {
display: none;
}
/* 默认选中第一个分类 */
#sort
-1:checked ~ .sort
-content .list
-1,
#sort
-2:checked ~ .sort
-content .list
-2,
#sort
-3:checked ~ .sort
-content .list
-3 {
display: grid;
}
/* 激活状态样式 */
#sort
-1:checked ~ .server
-sort label[for="sort
-1"] span,
#sort
-2:checked ~ .server
-sort label[for="sort
-2"] span,
#sort
-3:checked ~ .server
-sort label[for="sort
-3"] span {
color: #27ae60;
border
-bottom
-color: #27ae60;
}
.sort
-content {
overflow: hidden;
}
.list {
display: none;
grid
-template
-columns: repeat(auto
-fill, minmax(200px, 1fr));
gap: 20px;
transition: all 0.5s ease;
}
.img
-text {
border
-radius: 8px;
overflow: hidden;
box
-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.img
-text:hover {
transform: translateY(
-5px);
box
-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.img
-text img {
width: 100%;
height: 150px;
object
-fit: cover;
transition: transform 0.5s ease;
}
.img
-text:hover img {
transform: scale(1.05);
}
.img
-text span {
display: block;
text
-align: center;
padding: 10px;
background
-color: #f8f8f8;
}
/* 新闻部分 */
.news
-section {
background
-color: white;
border
-radius: 10px;
box
-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
padding: 20px;
}
.news
-grid {
display: grid;
grid
-template
-columns: 2fr 1fr;
gap: 20px;
}
.featured
-news {
border
-radius: 8px;
overflow: hidden;
position: relative;
height: 300px;
}
.featured
-news img {
width: 100%;
height: 100%;
object
-fit: cover;
}
.news
-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear
-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 20px;
}
.news
-title {
font
-size: 18px;
margin
-bottom: 10px;
}
.news
-date {
font
-size: 14px;
opacity: 0.8;
}
.news
-list {
display:
flex;
flex-direction: column;
gap: 15px;
}
.news
-item {
display:
flex;
gap: 15px;
padding
-bottom: 15px;
border
-bottom: 1px solid #f1f1f1;
transition: transform 0.3s ease;
}
.news
-item:last
-child {
border
-bottom: none;
}
.news
-item:hover {
transform: translateX(5px);
}
.news
-item img {
width: 100px;
height: 70px;
object
-fit: cover;
border
-radius: 5px;
}
.news
-content {
flex: 1;
}
.news
-content a {
color: #333;
font
-weight: 500;
transition: color 0.3s ease;
}
.news
-content a:hover {
color: #27ae60;
}
/* 页脚样式 */
.footer {
background
-color: #2c3e50;
color: white;
margin
-top: 50px;
}
.footer
-content {
max
-width: 1200px;
margin: 0 auto;
padding: 40px 20px 20px;
display: grid;
grid
-template
-columns: repeat(auto
-fit, minmax(250px, 1fr));
gap: 30px;
}
.footer
-column h3 {
font
-size: 18px;
margin
-bottom: 20px;
padding
-bottom: 10px;
border
-bottom: 2px solid #27ae60;
}
.footer
-links li {
margin
-bottom: 10px;
}
.footer
-links a {
color: #ddd;
transition: color 0.3s ease;
}
.footer
-links a:hover {
color: #2ecc71;
}
.copyright {
text
-align: center;
padding: 20px;
background
-color: #243342;
margin
-top: 20px;
font
-size: 14px;
opacity: 0.8;
}
/* 动画效果类 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade
-in {
opacity: 0;
animation: fadeIn 0.8s ease forwards;
}
.delay
-1 {
animation
-delay: 0.2s;
}
.delay
-2 {
animation
-delay: 0.4s;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.pulse {
animation: pulse 3s infinite ease
-in
-out;
}
/* 响应式设计 */
@media (max
-width: 900px) {
.container {
grid
-template
-columns: 1fr;
}
.news
-grid {
grid
-template
-columns: 1fr;
}
.search
-box {
flex: 0 0 200px;
}
}
@media (max
-width: 600px) {
.top
-bar {
flex-direction: column;
gap: 15px;
}
.search
-box {
width: 100%;
flex: none;
}
.nav
-box ul {
flex-wrap: wrap;
}
.nav
-box a {
padding: 10px 15px;
font
-size: 14px;
}
.carousel {
height: 300px;
}
.list {
grid
-template
-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<!
-- 头部
-->
<header class="header">
<div class="top
-bar">
<div class="logo">
<span class="logo
-icon">🌱</span>
<span>绿色世界</span>
</div>
<div class="search
-box">
<input type="text" placeholder="搜索环保资讯...">
<button>搜索</button>
</div>
</div>
<div class="nav
-box">
<ul>
<li><a class="current" href="index.html">首页</a></li>
<li><a href="#">空气净化</a></li>
<li><a href="#">园林景观</a></li>
<li><a href="#">服务简要</a></li>
<li><a href="#">动态新闻</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!
-- 轮播图
- 纯CSS实现
-->
<div class="carousel">
<div class="slides">
<div class="slide">
<img src="https://picsum.photos/id/10/1200/450" alt="绿色自然景观">
</div>
<div class="slide">
<img src="https://picsum.photos/id/29/1200/450" alt="环保行动">
</div>
<div class="slide">
<img src="https://picsum.photos/id/15/1200/450" alt="生态保护">
</div>
</div>
<div class="points">
<label for="slide
-1"></label>
<label for="slide
-2"></label>
<label for="slide
-3"></label>
</div>
<div class="carousel
-controls">
<button class="carousel
-btn prev
-btn">←</button>
<button class="carousel
-btn next
-btn">→</button>
</div>
</div>
</header>
<!
-- 主体内容
-->
<div class="container">
<!
-- 侧边栏
-->
<aside class="sidebar fade
-in">
<div class="sidebar
-title">快速导航</div>
<ul class="sidebar
-menu">
<li><a href="#">关于我们</a></li>
<li><a href="#">环保项目</a></li>
<li><a href="#">志愿者招募</a></li>
<li><a href="#">环保知识</a></li>
<li><a href="#">政策法规</a></li>
<li><a href="#">
常见问题</a></li>
</ul>
<div class="sidebar
-banner pulse">
<img src="https://picsum.photos/id/119/300/200" alt="环保活动">
<div class="banner
-text">
<strong>地球日活动</strong>
<p>4月22日 一起参与</p>
</div>
</div>
</aside>
<!
-- 主内容区
-->
<main class="main
-content">
<!
-- 服务介绍
- 纯CSS实现分类切换
-->
<section class="server
-intr fade
-in delay
-1">
<div class="intr
-title">
<a href="#">服务介绍</a>
</div>
<input type="radio" name="sort" id="sort
-1" class="sort
-radio" checked>
<input type="radio" name="sort" id="sort
-2" class="sort
-radio">
<input type="radio" name="sort" id="sort
-3" class="sort
-radio">
<div class="server
-sort">
<label for="sort
-1"><span>垃圾分类</span></label>
<label for="sort
-2"><span>植树造林</span></label>
<label for="sort
-3"><span>污水处理</span></label>
</div>
<div class="sort
-content">
<ul class="list list
-1">
<li class="img
-text">
<p><img src="https://picsum.photos/id/96/300/200" alt="废弃轮胎"></p>
<span>废弃轮胎</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/21/300/200" alt="废弃电池"></p>
<span>废弃电池</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/28/300/200" alt="废铝回收"></p>
<span>废铝回收</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/42/300/200" alt="垃圾回收"></p>
<span>垃圾回收</span>
</li>
</ul>
<ul class="list list
-2">
<li class="img
-text">
<p><img src="https://picsum.photos/id/137/300/200" alt="户外植树"></p>
<span>户外植树</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/145/300/200" alt="绿化城市"></p>
<span>绿化城市</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/146/300/200" alt="小区添树"></p>
<span>小区添树</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/152/300/200" alt="开垦荒区"></p>
<span>开垦荒区</span>
</li>
</ul>
<ul class="list list
-3">
<li class="img
-text">
<p><img src="https://picsum.photos/id/135/300/200" alt="农林废水"></p>
<span>农林废水</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/136/300/200" alt="工厂污水"></p>
<span>工厂污水</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/138/300/200" alt="金属污水"></p>
<span>金属污水</span>
</li>
<li class="img
-text">
<p><img src="https://picsum.photos/id/139/300/200" alt="化工污水"></p>
<span>化工污水</span>
</li>
</ul>
</div>
</section>
<!
-- 新闻动态
-->
<section class="news
-section fade
-in delay
-2">
<div class="intr
-title">
<a href="#">最新动态</a>
</div>
<div class="news
-grid">
<div class="featured
-news">
<img src="https://picsum.photos/id/110/800/500" alt="环保新闻">
<div class="news
-overlay">
<div class="news
-title">全球环保峰会在巴黎成功举办，各国承诺减排</div>
<div class="news
-date">2023
-06
-15</div>
</div>
</div>
<div class="news
-list">
<div class="news
-item">
<img src="https://picsum.photos/id/111/200/150" alt="新闻图片">
<div class="news
-content">
<a href="#">城市垃圾分类覆盖率达到85%，成效显著</a>
<div class="news
-date">2023
-06
-10</div>
</div>
</div>
<div class="news
-item">
<img src="https://picsum.photos/id/112/200/150" alt="新闻图片">
<div class="news
-content">
<a href="#">新能源汽车销量同比增长30%，绿色出行成趋势</a>
<div class="news
-date">2023
-06
-05</div>
</div>
</div>
<div class="news
-item">
<img src="https://picsum.photos/id/113/200/150" alt="新闻图片">
<div class="news
-content">
<a href="#">全国开展植树造林活动，累计植树超千万棵</a>
<div class="news
-date">2023
-06
-01</div>
</div>
</div>
<div class="news
-item">
<img src="https://picsum.photos/id/114/200/150" alt="新闻图片">
<div class="news
-content">
<a href="#">塑料污染治理新规出台，将限制一次性塑料制品</a>
<div class="news
-date">2023
-05
-28</div>
</div>
</div>
</div>
</div>
</section>
</main>
</div>
<!
-- 页脚
-->
<footer class="footer">
<div class="footer
-content">
<div class="footer
-column">
<h3>关于我们</h3>
<ul class="footer
-links">
<li><a href="#">机构简介</a></li>
<li><a href="#">组织架构</a></li>
<li><a href="#">发展历程</a></li>
<li><a href="#">荣誉资质</a></li>
</ul>
</div>
<div class="footer
-column">
<h3>环保服务</h3>
<ul class="footer
-links">
<li><a href="#">垃圾分类指导</a></li>
<li><a href="#">空气治理方案</a></li>
<li><a href="#">绿化工程服务</a></li>
<li><a href="#">环保咨询服务</a></li>
</ul>
</div>
<div class="footer
-column">
<h3>联系我们</h3>
<ul class="footer
-links">
<li><a href="#">联系方式</a></li>
<li><a href="#">在线留言</a></li>
<li><a href="#">意见反馈</a></li>
<li><a href="#">投诉建议</a></li>
</ul>
</div>
</div>
<div class="copyright">
© 2025 绿色世界环保网站 版权所有 | 致力于环境保护与可持续发展
</div>
</footer>
</body>
</html>
扫一扫
8394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
