<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简约图文 | 内容展示</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}
body {
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
padding: 60px 0 40px;
border-bottom: 1px solid #eaeaea;
margin-bottom: 40px;
}
h1 {
font-size: 2.8rem;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 15px;
color: #2c3e50;
}
.subtitle {
font-size: 1.2rem;
color: #7f8c8d;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.content-section {
display: flex;
flex-wrap: wrap;
margin-bottom: 60px;
gap: 40px;
align-items: center;
}
.text-content {
flex: 1;
min-width: 300px;
}
.image-content {
flex: 1;
min-width: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.image-content:hover {
transform: translateY(-5px);
}
.image-content img {
width: 100%;
height: auto;
display: block;
}
h2 {
font-size: 1.8rem;
font-weight: 400;
color: #34495e;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ecf0f1;
}
p {
margin-bottom: 20px;
font-size: 1.05rem;
color: #555;
}
.highlight {
background-color: #f8f9fa;
padding: 25px;
border-left: 4px solid #3498db;
margin: 25px 0;
border-radius: 0 5px 5px 0;
}
.image-caption {
font-size: 0.9rem;
color: #7f8c8d;
text-align: center;
padding: 15px;
background-color: #f8f9fa;
border-top: 1px solid #eee;
}
.alternate {
flex-direction: row-reverse;
}
footer {
text-align: center;
padding: 40px 0;
margin-top: 40px;
border-top: 1px solid #eaeaea;
color: #95a5a6;
font-size: 0.95rem;
}
@media (max-width: 768px) {
.content-section {
flex-direction: column;
}
.alternate {
flex-direction: column;
}
h1 {
font-size: 2.2rem;
}
header {
padding: 40px 0 30px;
}
}
/* 图片加载动画 */
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>简约图文展示</h1>
<p class="subtitle">专注于内容本质的设计，让文字与图像自然对话</p>
</header>
<main>
<section class="content-section fade-in">
<div class="text-content">
<h2>自然之美</h2>
<p>在大自然的怀抱中，我们总能找到内心的宁静与平和。无论是巍峨的山脉、广阔的海洋，还是微观世界的奇妙构造，自然始终以其独特的方式讲述着生命的故事。</p>
<p>每一次日出日落，每一片叶子的生长凋零，都是宇宙规律的精妙体现。我们身处的这个世界，充满了等待被发现的美。</p>
<div class="highlight">
<p>自然不仅给予我们生存所需的资源，更是灵感的源泉和心灵的慰藉。保护自然环境，就是保护我们共同的家园。</p>
</div>
</div>
<div class="image-content">
<img src="https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="自然风景：山脉与湖泊">
<div class="image-caption">宁静的山脉与湖泊，展现大自然的和谐之美</div>
</div>
</section>
<section class="content-section alternate fade-in">
<div class="text-content">
<h2>都市节奏</h2>
<p>城市是人类文明的结晶，高楼大厦、繁忙街道、璀璨灯光，构成了现代生活的交响乐。在城市中，不同的文化、思想和人群交汇融合，创造出无限可能。</p>
<p>从古老的历史建筑到现代的摩天大楼，城市的每个角落都承载着时光的印记和人类智慧的成果。</p>
<p>都市生活既有快节奏的挑战，也有丰富多彩的机遇。在这片钢筋水泥的森林中，我们不断探索自我与世界的联系。</p>
</div>
<div class="image-content">
<img src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="城市天际线">
<div class="image-caption">现代都市的天际线，人类文明的集中体现</div>
</div>
</section>
<section class="content-section fade-in">
<div class="text-content">
<h2>人文精神</h2>
<p>人文精神是人类社会的灵魂，它体现在艺术、哲学、文学和日常生活的方方面面。通过创造与表达，我们传递情感、分享思想、连接彼此。</p>
<p>每一件艺术品、每一部文学作品、每一个哲学思考，都是人类对存在意义的探索和回应。这些创造不仅丰富了我们的精神世界，也塑造了文明的面貌。</p>
<div class="highlight">
<p>在快速变化的时代，保持人文关怀和精神追求尤为重要。它让我们在技术洪流中不迷失方向，始终记得作为人的温度与深度。</p>
</div>
</div>
<div class="image-content">
<img src="https://images.unsplash.com/photo-1513475382585-d06e58bcb0e0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="艺术与人文">
<div class="image-caption">艺术创作是人类情感与思想的独特表达</div>
</div>
</section>
</main>
<footer>
<p>简约图文展示网页 | 设计理念：专注于内容本质，减少不必要的装饰</p>
<p>© 2023 简约设计 · 所有图片来自 Unsplash</p>
</footer>
</div>
<script>
// 图片加载动画效果
document.addEventListener('DOMContentLoaded', function() {
const sections = document.querySelectorAll('.content-section');
// 添加滚动动画效果
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver(function(entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
sections.forEach(section => {
observer.observe(section);
});
// 图片悬停效果增强
const images = document.querySelectorAll('.image-content');
images.forEach(image => {
image.addEventListener('mouseenter', function() {
this.style.boxShadow = '0 10px 25px rgba(0, 0, 0, 0.15)';
});
image.addEventListener('mouseleave', function() {
this.style.boxShadow = '0 5px 15px rgba(0, 0, 0, 0.08)';
});
});
});
</script>
</body>
</html>
简明图文网页
一次购买，永久免费
去创作
评论
{{item.path.join('.')}}
{{item.item.name}}