期中任务：设计完成一个完整的网页（包括以下几个基本部分：头部【导航、搜索、轮播】、主体（侧边栏、主体内容）、尾部（版权）），页面美观，图文并茂，链接到位。具体要求如下：
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>
探讨弹性盒子（Flexbox）布局与overflow属性之间的冲突，当两者同时应用时，overflow：hidden可能无法正常工作，揭示了这一常见布局问题及其潜在解决方案。
扫一扫
2977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
