用Cursor生成一个企业官网前端页面
第一版：
<!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;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background-color: #333;
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}
/* 首页banner */
.hero {
height: 100vh;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('https://picsum.photos/1920/1080');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
}
.hero-content h1 {
font-size: 3.5rem;
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.5rem;
margin-bottom: 2rem;
}
.btn {
padding: 1rem 2rem;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
/* 关于我们 */
.about {
padding: 5rem 2rem;
text-align: center;
background-color: #f8f9fa;
}
.about h2 {
margin-bottom: 2rem;
}
/* 服务项目 */
.services {
padding: 5rem 2rem;
text-align: center;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.service-item {
padding: 2rem;
background-color: #f8f9fa;
border-radius: 10px;
}
/* 联系我们 */
.contact {
padding: 5rem 2rem;
background-color: #333;
color: white;
text-align: center;
}
.contact-info {
margin-top: 2rem;
}
/* 页脚 */
footer {
background-color: #222;
color: white;
text-align: center;
padding: 1rem;
}
/* 响应式设计 */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
text-align: center;
}
.navbar li {
margin: 10px 0;
}
.hero-content h1 {
font-size: 2.5rem;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务项目</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
<!-- 首页banner -->
<section id="home" class="hero">
<div class="hero-content">
<h1>欢迎来到我们的公司</h1>
<p>专注于提供优质的产品和服务</p>
<a href="#contact" class="btn">联系我们</a>
</div>
</section>
<!-- 关于我们 -->
<section id="about" class="about">
<h2>关于我们</h2>
<p>我们是一家致力于创新和卓越的企业，拥有专业的团队和丰富的行业经验。我们始终坚持以客户为中心，提供最优质的服务和解决方案。</p>
</section>
<!-- 服务项目 -->
<section id="services" class="services">
<h2>服务项目</h2>
<div class="services-grid">
<div class="service-item">
<h3>服务项目一</h3>
<p>提供专业的解决方案和服务支持</p>
</div>
<div class="service-item">
<h3>服务项目二</h3>
<p>为客户创造更多的价值</p>
</div>
<div class="service-item">
<h3>服务项目三</h3>
<p>确保服务质量和客户满意度</p>
</div>
</div>
</section>
<!-- 联系我们 -->
<section id="contact" class="contact">
<h2>联系我们</h2>
<div class="contact-info">
<p>地址：某某市某某区某某街道123号</p>
<p>电话：123-456-7890</p>
<p>邮箱：info@company.com</p>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>© 2024 公司名称. 保留所有权利.</p>
</footer>
</body>
</html>
包含如下元素
- 导航栏
- 1920*1080规格的图片
- 点击导航栏的文字可以索引到对应模块UI去
但缺乏首页轮播图、并且关于我们样式不是很好看，继续让cursor调整一下。
第二版：
<!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;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background-color: #333;
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
color: white;
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s;
}
.navbar a:hover {
color: #007bff;
}
/* 轮播图样式 */
.slider-container {
width: 100%;
height: 500px;
position: relative;
overflow: hidden;
margin-top: 60px;
}
.slider {
width: 400%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 25%;
height: 100%;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-nav {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.slider-nav-item {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s;
}
.slider-nav-item.active {
background: white;
}
/* 服务项目样式 */
.services {
padding: 5rem 2rem;
text-align: center;
background-color: #fff;
}
.services h2 {
font-size: 2.5rem;
margin-bottom: 3rem;
color: #333;
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.service-item {
padding: 2rem;
background-color: #f8f9fa;
border-radius: 10px;
transition: transform 0.3s, box-shadow 0.3s;
}
.service-item:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.service-item h3 {
color: #333;
margin-bottom: 1rem;
}
/* 关于我们和联系我们的样式 */
.info-section {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
padding: 5rem 2rem;
background-color: #f8f9fa;
max-width: 1200px;
margin: 0 auto;
}
.info-card {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s;
}
.info-card:hover {
transform: translateY(-5px);
}
.info-card h2 {
margin-bottom: 1.5rem;
color: #333;
font-size: 2rem;
}
.contact-info {
margin-top: 1.5rem;
}
.contact-info p {
margin: 0.5rem 0;
color: #666;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 2rem;
margin-top: 2rem;
}
/* 按钮样式 */
.btn {
display: inline-block;
padding: 1rem 2rem;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0056b3;
}
/* 响应式设计 */
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
text-align: center;
}
.navbar li {
margin: 10px 0;
}
.info-section {
grid-template-columns: 1fr;
padding: 2rem 1rem;
}
.services {
padding: 2rem 1rem;
}
.slider-container {
height: 300px;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务项目</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
<!-- 轮播图 -->
<div class="slider-container" id="home">
<div class="slider">
<div class="slide">
<img src="https://picsum.photos/1920/500?random=1" alt="幻灯片1">
</div>
<div class="slide">
<img src="https://picsum.photos/1920/500?random=2" alt="幻灯片2">
</div>
<div class="slide">
<img src="https://picsum.photos/1920/500?random=3" alt="幻灯片3">
</div>
<div class="slide">
<img src="https://picsum.photos/1920/500?random=4" alt="幻灯片4">
</div>
</div>
<div class="slider-nav">
<div class="slider-nav-item active"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
</div>
</div>
<!-- 服务项目 -->
<section id="services" class="services">
<h2>服务项目</h2>
<div class="services-grid">
<div class="service-item">
<h3>服务项目一</h3>
<p>提供专业的解决方案和服务支持，确保客户获得最佳体验和价值。我们的团队将为您提供全方位的技术支持和咨询服务。</p>
</div>
<div class="service-item">
<h3>服务项目二</h3>
<p>为客户创造更多的价值，通过创新的解决方案帮助企业提升效率，降低成本。我们致力于为客户提供最优质的服务。</p>
</div>
<div class="service-item">
<h3>服务项目三</h3>
<p>确保服务质量和客户满意度，提供个性化的解决方案，满足不同客户的需求。我们将始终把客户的利益放在首位。</p>
</div>
</div>
</section>
<!-- 关于我们和联系我们 -->
<section class="info-section">
<div id="about" class="info-card">
<h2>关于我们</h2>
<p>我们是一家致力于创新和卓越的企业，拥有专业的团队和丰富的行业经验。自成立以来，我们始终坚持以客户为中心，提供最优质的服务和解决方案。</p>
<p style="margin-top: 1rem">我们的团队由经验丰富的专业人士组成，他们在各自的领域都有着深厚的专业知识和实践经验。我们相信，只有通过不断的创新和改进，才能为客户提供更好的服务。</p>
</div>
<div id="contact" class="info-card">
<h2>联系我们</h2>
<div class="contact-info">
<p>地址：某某市某某区某某街道123号</p>
<p>电话：123-456-7890</p>
<p>邮箱：info@company.com</p>
<p>工作时间：周一至周五 9:00-18:00</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<p>© 2024 公司名称. 保留所有权利.</p>
</footer>
<!-- 轮播图脚本 -->
<script>
const slider = document.querySelector('.slider');
const navItems = document.querySelectorAll('.slider-nav-item');
let currentSlide = 0;
function goToSlide(index) {
currentSlide = index;
slider.style.transform = `translateX(-${index * 25}%)`;
navItems.forEach((item, i) => {
item.classList.toggle('active', i === index);
});
}
// 点击导航切换幻灯片
navItems.forEach((item, index) => {
item.addEventListener('click', () => goToSlide(index));
});
// 自动轮播
setInterval(() => {
currentSlide = (currentSlide + 1) % 4;
goToSlide(currentSlide);
}, 5000);
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
在第一版的基础上，额外调整了：
- 轮播图
- 将关于我们和联系我们放到了一起
第三版：
<!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;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background-color: rgba(255, 255, 255, 0.98);
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
color: #333;
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s;
}
.navbar a:hover {
color: #007bff;
}
/* 轮播图样式 */
.slider-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slider {
width: 400%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 25%;
height: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-content {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
color: white;
max-width: 600px;
}
.slide-content h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.slide-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.slider-nav {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.slider-nav-item {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s;
}
.slider-nav-item.active {
background: white;
}
/* 新闻资讯样式 */
.news-section {
padding: 5rem 2rem;
background-color: #f8f9fa;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.news-item {
background: white;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s;
}
.news-item:hover {
transform: translateY(-5px);
}
.news-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.news-content {
padding: 1.5rem;
}
.news-content h3 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.news-content p {
color: #666;
margin-bottom: 1rem;
}
.news-date {
color: #999;
font-size: 0.9rem;
}
/* 业务板块样式 */
.business-section {
padding: 5rem 2rem;
background-color: white;
}
.business-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.business-item {
text-align: center;
padding: 2rem;
border-radius: 10px;
transition: all 0.3s;
cursor: pointer;
}
.business-item:hover {
background-color: #f8f9fa;
transform: translateY(-5px);
}
.business-item img {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.business-item h3 {
margin-bottom: 1rem;
color: #333;
}
.business-item p {
color: #666;
font-size: 0.9rem;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
padding: 4rem 2rem;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.footer-column h3 {
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.8rem;
}
.footer-column a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: white;
}
.copyright {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #999;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.news-grid, .business-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
text-align: center;
}
.navbar li {
margin: 10px 0;
}
.slide-content h2 {
font-size: 2rem;
}
.news-grid, .business-grid {
grid-template-columns: 1fr;
}
.slider-container {
height: 70vh;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻资讯</a></li>
<li><a href="#business">业务板块</a></li>
<li><a href="#about">关于我们</a></li>
</ul>
</nav>
<!-- 轮播图 -->
<div class="slider-container" id="home">
<div class="slider">
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=1" alt="幻灯片1">
<div class="slide-content">
<h2>创新科技，引领未来</h2>
<p>致力于为客户提供最优质的解决方案，推动产业数字化升级</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=2" alt="幻灯片2">
<div class="slide-content">
<h2>连接无限可能</h2>
<p>构建开放生态，携手合作伙伴共创价值</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=3" alt="幻灯片3">
<div class="slide-content">
<h2>科技向善</h2>
<p>用科技助力社会发展，让生活更美好</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=4" alt="幻灯片4">
<div class="slide-content">
<h2>全球化视野</h2>
<p>布局全球市场，服务全球客户</p>
</div>
</div>
</div>
<div class="slider-nav">
<div class="slider-nav-item active"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
</div>
</div>
<!-- 新闻资讯 -->
<section id="news" class="news-section">
<div class="section-title">
<h2>新闻资讯</h2>
</div>
<div class="news-grid">
<div class="news-item">
<img src="https://picsum.photos/400/200?random=5" alt="新闻1">
<div class="news-content">
<h3>公司荣获2024年度创新企业奖</h3>
<p>凭借在技术创新领域的突出贡献，公司获得行业权威奖项认可...</p>
<div class="news-date">2024-01-15</div>
</div>
</div>
<div class="news-item">
<img src="https://picsum.photos/400/200?random=6" alt="新闻2">
<div class="news-content">
<h3>成功举办2024技术开放日</h3>
<p>展示最新技术成果，与合作伙伴共同探讨行业发展趋势...</p>
<div class="news-date">2024-01-10</div>
</div>
</div>
<div class="news-item">
<img src="https://picsum.photos/400/200?random=7" alt="新闻3">
<div class="news-content">
<h3>发布全新企业战略规划</h3>
<p>明确未来五年发展方向，加大技术研发投入...</p>
<div class="news-date">2024-01-05</div>
</div>
</div>
</div>
</section>
<!-- 业务板块 -->
<section id="business" class="business-section">
<div class="section-title">
<h2>业务板块</h2>
</div>
<div class="business-grid">
<div class="business-item">
<img src="https://picsum.photos/80/80?random=8" alt="业务1">
<h3>人工智能</h3>
<p>提供智能算法和解决方案</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=9" alt="业务2">
<h3>云计算</h3>
<p>全球领先的云服务平台</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=10" alt="业务3">
<h3>数字金融</h3>
<p>创新金融科技服务</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=11" alt="业务4">
<h3>智慧出行</h3>
<p>打造智能交通生态</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="footer-content">
<div class="footer-column">
<h3>关于我们</h3>
<ul>
<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>
<li><a href="#">公司动态</a></li>
<li><a href="#">媒体报道</a></li>
<li><a href="#">社会责任</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系我们</h3>
<ul>
<li><a href="#">商务合作</a></li>
<li><a href="#">招商加盟</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div class="footer-column">
<h3>关注我们</h3>
<ul>
<li><a href="#">微信公众号</a></li>
<li><a href="#">官方微博</a></li>
<li><a href="#">企业邮箱</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2024 公司名称. 保留所有权利.</p>
</div>
</footer>
<!-- 轮播图脚本 -->
<script>
const slider = document.querySelector('.slider');
const navItems = document.querySelectorAll('.slider-nav-item');
let currentSlide = 0;
function goToSlide(index) {
currentSlide = index;
slider.style.transform = `translateX(-${index * 25}%)`;
navItems.forEach((item, i) => {
item.classList.toggle('active', i === index);
});
}
// 点击导航切换幻灯片
navItems.forEach((item, index) => {
item.addEventListener('click', () => goToSlide(index));
});
// 自动轮播
setInterval(() => {
currentSlide = (currentSlide + 1) % 4;
goToSlide(currentSlide);
}, 5000);
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
在第二版的基础上，额外改动了：
- 关于我们模块比较符合通用企业的布局和文字描述了
- 调整了一个业务板块
但是存在问题：点击关于我们，无法直接自动导航索引去底部栏。
再让Cursor调整让点击导航栏的关于我们，可以直接
第四版：
<!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;
}
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
}
/* 导航栏样式 */
.navbar {
background-color: rgba(255, 255, 255, 0.98);
padding: 1rem;
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
color: #333;
text-decoration: none;
font-size: 1.1rem;
transition: color 0.3s;
}
.navbar a:hover {
color: #007bff;
}
/* 轮播图样式 */
.slider-container {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.slider {
width: 400%;
height: 100%;
display: flex;
transition: transform 0.5s ease-in-out;
}
.slide {
width: 25%;
height: 100%;
position: relative;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}
.slide-content {
position: absolute;
top: 50%;
left: 10%;
transform: translateY(-50%);
color: white;
max-width: 600px;
}
.slide-content h2 {
font-size: 3rem;
margin-bottom: 1rem;
}
.slide-content p {
font-size: 1.2rem;
margin-bottom: 2rem;
}
.slider-nav {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.slider-nav-item {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s;
}
.slider-nav-item.active {
background: white;
}
/* 新闻资讯样式 */
.news-section {
padding: 5rem 2rem;
background-color: #f8f9fa;
}
.section-title {
text-align: center;
margin-bottom: 3rem;
}
.section-title h2 {
font-size: 2.5rem;
color: #333;
margin-bottom: 1rem;
}
.news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.news-item {
background: white;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s;
}
.news-item:hover {
transform: translateY(-5px);
}
.news-item img {
width: 100%;
height: 200px;
object-fit: cover;
}
.news-content {
padding: 1.5rem;
}
.news-content h3 {
margin-bottom: 1rem;
font-size: 1.2rem;
}
.news-content p {
color: #666;
margin-bottom: 1rem;
}
.news-date {
color: #999;
font-size: 0.9rem;
}
/* 业务板块样式 */
.business-section {
padding: 5rem 2rem;
background-color: white;
}
.business-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.business-item {
text-align: center;
padding: 2rem;
border-radius: 10px;
transition: all 0.3s;
cursor: pointer;
}
.business-item:hover {
background-color: #f8f9fa;
transform: translateY(-5px);
}
.business-item img {
width: 80px;
height: 80px;
margin-bottom: 1rem;
}
.business-item h3 {
margin-bottom: 1rem;
color: #333;
}
.business-item p {
color: #666;
font-size: 0.9rem;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
padding: 4rem 2rem;
scroll-margin-top: 70px; /* 添加滚动偏移量,确保导航栏不遮挡内容 */
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.footer-column h3 {
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.8rem;
}
.footer-column a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer-column a:hover {
color: white;
}
.copyright {
text-align: center;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #999;
}
/* 响应式设计 */
@media (max-width: 1024px) {
.news-grid, .business-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.navbar ul {
flex-direction: column;
text-align: center;
}
.navbar li {
margin: 10px 0;
}
.slide-content h2 {
font-size: 2rem;
}
.news-grid, .business-grid {
grid-template-columns: 1fr;
}
.slider-container {
height: 70vh;
}
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#news">新闻资讯</a></li>
<li><a href="#business">业务板块</a></li>
<li><a href="#footer">关于我们</a></li>
</ul>
</nav>
<!-- 轮播图 -->
<div class="slider-container" id="home">
<div class="slider">
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=1" alt="幻灯片1">
<div class="slide-content">
<h2>创新科技，引领未来</h2>
<p>致力于为客户提供最优质的解决方案，推动产业数字化升级</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=2" alt="幻灯片2">
<div class="slide-content">
<h2>连接无限可能</h2>
<p>构建开放生态，携手合作伙伴共创价值</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=3" alt="幻灯片3">
<div class="slide-content">
<h2>科技向善</h2>
<p>用科技助力社会发展，让生活更美好</p>
</div>
</div>
<div class="slide">
<img src="https://picsum.photos/1920/1080?random=4" alt="幻灯片4">
<div class="slide-content">
<h2>全球化视野</h2>
<p>布局全球市场，服务全球客户</p>
</div>
</div>
</div>
<div class="slider-nav">
<div class="slider-nav-item active"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
<div class="slider-nav-item"></div>
</div>
</div>
<!-- 新闻资讯 -->
<section id="news" class="news-section">
<div class="section-title">
<h2>新闻资讯</h2>
</div>
<div class="news-grid">
<div class="news-item">
<img src="https://picsum.photos/400/200?random=5" alt="新闻1">
<div class="news-content">
<h3>公司荣获2024年度创新企业奖</h3>
<p>凭借在技术创新领域的突出贡献，公司获得行业权威奖项认可...</p>
<div class="news-date">2024-01-15</div>
</div>
</div>
<div class="news-item">
<img src="https://picsum.photos/400/200?random=6" alt="新闻2">
<div class="news-content">
<h3>成功举办2024技术开放日</h3>
<p>展示最新技术成果，与合作伙伴共同探讨行业发展趋势...</p>
<div class="news-date">2024-01-10</div>
</div>
</div>
<div class="news-item">
<img src="https://picsum.photos/400/200?random=7" alt="新闻3">
<div class="news-content">
<h3>发布全新企业战略规划</h3>
<p>明确未来五年发展方向，加大技术研发投入...</p>
<div class="news-date">2024-01-05</div>
</div>
</div>
</div>
</section>
<!-- 业务板块 -->
<section id="business" class="business-section">
<div class="section-title">
<h2>业务板块</h2>
</div>
<div class="business-grid">
<div class="business-item">
<img src="https://picsum.photos/80/80?random=8" alt="业务1">
<h3>人工智能</h3>
<p>提供智能算法和解决方案</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=9" alt="业务2">
<h3>云计算</h3>
<p>全球领先的云服务平台</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=10" alt="业务3">
<h3>数字金融</h3>
<p>创新金融科技服务</p>
</div>
<div class="business-item">
<img src="https://picsum.photos/80/80?random=11" alt="业务4">
<h3>智慧出行</h3>
<p>打造智能交通生态</p>
</div>
</div>
</section>
<!-- 页脚 -->
<footer id="footer">
<div class="footer-content">
<div class="footer-column">
<h3>关于我们</h3>
<ul>
<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>
<li><a href="#">公司动态</a></li>
<li><a href="#">媒体报道</a></li>
<li><a href="#">社会责任</a></li>
</ul>
</div>
<div class="footer-column">
<h3>联系我们</h3>
<ul>
<li><a href="#">商务合作</a></li>
<li><a href="#">招商加盟</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<div class="footer-column">
<h3>关注我们</h3>
<ul>
<li><a href="#">微信公众号</a></li>
<li><a href="#">官方微博</a></li>
<li><a href="#">企业邮箱</a></li>
</ul>
</div>
</div>
<div class="copyright">
<p>© 2024 公司名称. 保留所有权利.</p>
</div>
</footer>
<!-- 轮播图脚本 -->
<script>
const slider = document.querySelector('.slider');
const navItems = document.querySelectorAll('.slider-nav-item');
let currentSlide = 0;
function goToSlide(index) {
currentSlide = index;
slider.style.transform = `translateX(-${index * 25}%)`;
navItems.forEach((item, i) => {
item.classList.toggle('active', i === index);
});
}
// 点击导航切换幻灯片
navItems.forEach((item, index) => {
item.addEventListener('click', () => goToSlide(index));
});
// 自动轮播
setInterval(() => {
currentSlide = (currentSlide + 1) % 4;
goToSlide(currentSlide);
}, 5000);
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>
第五版：仿照https://www.alibabagroup.com/ 阿里官网生成一个静态网页，代码如下所示
<!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="style.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
}
.container {
max-width: 1440px;
margin: 0 auto;
padding: 0 40px;
}
/* 导航栏样式 */
.navbar {
background: #fff;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo img {
height: 32px;
}
.nav-links {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
}
.nav-links li {
margin-left: 32px;
}
.nav-links a {
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active {
color: #FF6A00;
}
.language-switch {
display: flex;
align-items: center;
}
.language-switch .divider {
margin: 0 8px;
color: #ddd;
}
.search-icon svg {
width: 20px;
height: 20px;
fill: #666;
cursor: pointer;
transition: fill 0.2s;
}
.search-icon:hover svg {
fill: #FF6A00;
}
footer {
background-color: #f7f7f7;
padding: 60px 0 40px;
color: #666;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-logo img {
height: 24px;
margin-bottom: 20px;
}
.footer-about p {
font-size: 14px;
line-height: 1.8;
margin-bottom: 20px;
max-width: 400px;
}
.footer-links h3,
.footer-contact h3,
.footer-social h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
color: #333;
}
.footer-links ul {
list-style: none;
}
.footer-links ul li {
margin-bottom: 12px;
}
.footer-links ul li a {
color: #666;
text-decoration: none;
font-size: 14px;
transition: color 0.2s;
}
.footer-links ul li a:hover {
color: #FF6A00;
}
.footer-contact p {
font-size: 14px;
margin-bottom: 12px;
}
.social-links {
display: flex;
gap: 16px;
}
.social-links a img {
width: 24px;
height: 24px;
transition: opacity 0.2s;
}
.social-links a:hover img {
opacity: 0.8;
}
.footer-bottom {
border-top: 1px solid #e5e5e5;
padding-top: 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.copyright {
font-size: 13px;
color: #999;
}
.footer-bottom-links {
display: flex;
gap: 24px;
}
.footer-bottom-links a {
color: #666;
text-decoration: none;
font-size: 13px;
transition: color 0.2s;
}
.footer-bottom-links a:hover {
color: #FF6A00;
}
/* Banner section styles */
.banner {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('banner-bg.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display: flex;
align-items: center;
color: white;
margin-top: 80px; /* 为固定导航栏留出空间 */
}
.banner h1 {
font-size: 48px;
font-weight: 600;
margin-bottom: 24px;
}
.banner p {
font-size: 24px;
margin-bottom: 32px;
max-width: 600px;
}
.cta-button {
display: inline-block;
padding: 16px 40px;
background-color: #FF6A00;
color: white;
text-decoration: none;
border-radius: 4px;
font-weight: 500;
transition: background-color 0.3s;
}
.cta-button:hover {
background-color: #E65000;
}
/* Section styles */
section {
padding: 100px 0;
}
section h2 {
font-size: 36px;
text-align: center;
margin-bottom: 60px;
position: relative;
}
section h2:after {
content: '';
display: block;
width: 60px;
height: 3px;
background: #FF6A00;
margin: 20px auto 0;
}
/* About section */
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}
.about-text p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 24px;
}
.about-image img {
width: 100%;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
/* Business section */
.business-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.business-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.business-card:hover {
transform: translateY(-10px);
}
.business-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.business-card h3 {
padding: 20px 20px 10px;
font-size: 20px;
}
.business-card p {
padding: 0 20px 20px;
color: #666;
}
/* Sustainability section */
.sustainability-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.sustainability-card {
background: white;
padding: 40px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transition: transform 0.3s;
}
.sustainability-card:hover {
transform: translateY(-10px);
}
.sustainability-card h3 {
color: #FF6A00;
margin-bottom: 16px;
}
/* News section */
.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.news-card {
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.news-card img {
width: 100%;
height: 240px;
object-fit: cover;
}
.news-card h3 {
padding: 20px 20px 10px;
font-size: 20px;
}
.news-card p {
padding: 0 20px;
color: #666;
margin-bottom: 20px;
}
.read-more {
display: inline-block;
padding: 0 20px 20px;
color: #FF6A00;
text-decoration: none;
font-weight: 500;
}
/* Careers section */
.careers-section {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('careers-bg.jpg');
background-size: cover;
background-position: center;
color: white;
text-align: center;
}
.careers-content {
max-width: 600px;
margin: 0 auto;
}
.careers-content p {
font-size: 20px;
margin-bottom: 32px;
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="logo">
<img src="https://vv1.cfcdn.pics/8dd8b5d51fca1501b0cd5c6ea481e683.png" alt="阿里巴巴集团logo">
</div>
<ul class="nav-links">
<li><a href="#home" class="active">首页</a></li>
<li><a href="#about">关于阿里巴巴</a></li>
<li><a href="#business">业务版图</a></li>
<li><a href="#sustainability">可持续发展</a></li>
<li><a href="#investor">投资者关系</a></li>
<li><a href="#media">媒体中心</a></li>
<li><a href="#careers">加入我们</a></li>
<li class="language-switch">
<a href="#" class="active">中文</a>
<span class="divider">|</span>
<a href="#">EN</a>
</li>
<li class="search-icon">
<svg viewBox="0 0 24 24">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
</li>
</ul>
</div>
</nav>
<!-- 首页横幅 -->
<section id="home" class="banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&h=1080'); background-size: cover; background-position: center;">
<div class="container">
<h1>让天下没有难做的生意</h1>
<p>服务全球20亿消费者，帮助1000万企业实现数字化转型</p>
<a href="#business" class="cta-button">了解更多</a>
</div>
</section>
<!-- 关于阿里巴巴 -->
<section id="about" class="about-section">
<div class="container">
<h2>关于阿里巴巴</h2>
<div class="about-content">
<div class="about-text">
<p>阿里巴巴集团的使命是让天下没有难做的生意。我们旨在构建未来的商业基础设施，我们的愿景是让客户相会、工作和生活在阿里巴巴，持续发展最少102年。</p>
<p>作为一家以使命驱动的公司，阿里巴巴集团通过创新的技术和服务，为全球消费者和企业创造价值。</p>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1577760258779-e787a1733016?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80" alt="阿里巴巴园区">
</div>
</div>
</div>
</section>
<!-- 我们的业务 -->
<section id="business" class="business-section">
<div class="container">
<h2>我们的业务</h2>
<div class="business-grid">
<div class="business-card">
<img src="https://b0.bdstatic.com/cc8e4e41f0189b8caa618ab4adcd2a85.jpg@h_1280" alt="淘宝">
<h3>淘宝天猫</h3>
<p>中国领先的电商平台</p>
</div>
<div class="business-card">
<img src="https://img1.baidu.com/it/u=1459264756,3043818066&fm=253&fmt=auto&app=120&f=PNG?w=649&h=500" alt="阿里云">
<h3>阿里云</h3>
<p>全球领先的云计算服务提供商</p>
</div>
<div class="business-card">
<img src="https://www.juguan365.com/uploads/20230912/01dfda6ea337f3c3bb695671032bfdc4.png" alt="蚂蚁集团">
<h3>蚂蚁集团</h3>
<p>创新的数字支付和金融服务</p>
</div>
</div>
</div>
</section>
<!-- 可持续发展 -->
<section id="sustainability" class="sustainability-section">
<div class="container">
<h2>可持续发展</h2>
<div class="sustainability-content">
<div class="sustainability-card">
<h3>环境保护</h3>
<p>致力于碳中和目标，推动绿色计算</p>
</div>
<div class="sustainability-card">
<h3>乡村振兴</h3>
<p>数字技术赋能，助力乡村发展</p>
</div>
<div class="sustainability-card">
<h3>公益慈善</h3>
<p>践行企业社会责任，推动公益事业发展</p>
</div>
</div>
</div>
</section>
<!-- 新闻动态 -->
<section id="news" class="news-section">
<div class="container">
<h2>新闻动态</h2>
<div class="news-grid">
<div class="news-card">
<img src="https://inews.gtimg.com/newsapp_bt/0/15354874358/1000" alt="财报新闻">
<h3>阿里巴巴发布2024财年第三季度财报</h3>
<p>营收持续增长，数字化转型成效显著</p>
<a href="#" class="read-more">查看详情</a>
</div>
<div class="news-card">
<img src="https://p4.itc.cn/images01/20231108/0b5c2fc623354acba3964cdf3ab16c09.jpeg" alt="技术创新">
<h3>阿里云发布最新AI大模型</h3>
<p>推动产业智能化升级</p>
<a href="#" class="read-more">查看详情</a>
</div>
</div>
</div>
</section>
<!-- 加入我们 -->
<section id="careers" class="careers-section">
<div class="container">
<h2>加入我们</h2>
<div class="careers-content">
<p>在阿里巴巴，你将与优秀的人一起工作，创造改变世界的技术和产品</p>
<a href="#" class="cta-button">查看职位</a>
</div>
</div>
</section>
<!-- 页脚 -->
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-about">
<div class="footer-logo">
<img src="https://vv1.cfcdn.pics/8dd8b5d51fca1501b0cd5c6ea481e683.png" alt="阿里巴巴集团logo">
</div>
<p>阿里巴巴集团的使命是让天下没有难做的生意。我们旨在构建未来的商业基础设施。</p>
</div>
<div class="footer-links">
<h3>关于我们</h3>
<ul>
<li><a href="#about">公司简介</a></li>
<li><a href="#business">业务版图</a></li>
<li><a href="#management">管理团队</a></li>
<li><a href="#culture">企业文化</a></li>
<li><a href="#history">发展历程</a></li>
</ul>
</div>
<div class="footer-links">
<h3>投资者关系</h3>
<ul>
<li><a href="#financial">财务报告</a></li>
<li><a href="#announcements">公司公告</a></li>
<li><a href="#presentations">演示材料</a></li>
<li><a href="#governance">公司治理</a></li>
<li><a href="#stock">股票信息</a></li>
</ul>
</div>
<div class="footer-contact">
<h3>联系我们</h3>
<p>媒体垂询：media@alibaba-inc.com</p>
<p>投资者关系：investor@alibaba-inc.com</p>
<div class="social-links">
<a href="#"><img src="https://weibo.com/favicon.ico" alt="微博"></a>
<a href="#"><img src="https://res.wx.qq.com/a/wx_fed/assets/res/NTI4MWU5.ico" alt="微信"></a>
</div>
</div>
</div>
<div class="footer-bottom">
<div class="copyright">
<p>© 1999-2024 阿里巴巴集团 版权所有</p>
</div>
<div class="footer-bottom-links">
<a href="#">法律声明</a>
<a href="#">隐私权政策</a>
<a href="#">Cookie政策</a>
<a href="#">服务条款</a>
</div>
</div>
</div>
</footer>
</body>
</html>
写出来的页面如下所示：
