用Cursor生成一个企业官网前端页面（生成腾讯、阿里官网静态页面）
用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>
写出来的页面如下所示：
相关文章：
用Cursor生成一个企业官网前端页面（生成腾讯、阿里官网静态页面）
用Cursor生成一个企业官网前端页面 第一版： <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...
北京市房屋建筑物轮廓shp数据arcgis高度字段内容下载分析
标题中的“北京市房屋建筑物轮廓shp数据arcgis高度字段”涉及到的是地理信息系统（GIS）中的数据格式和属性字段。在GIS领域，SHP（Shapefile）是一种常见的矢量数据格式，用于存储地理空间特征，如点、…...
深度学习常见术语解释
正例与负例： 在分类任务中，通常将目标类别称为正例（positive），非目标类别称为负例（negative）。 True Positives（TP）： 被正确地划分为正例的个数，…...
《内网穿透：网络拓展与安全防护的平衡艺术》
一、引言：开启内网穿透的大门 在当今数字化浪潮席卷全球的时代，网络已成为人们生活和工作中不可或缺的一部分。我们日常使用的网络，如同一个庞大而复杂的生态系统，其中内网和外网犹如两个相互关联却又有所区别的世界。 想象一下…...
文件读取和输入输出
文件指针 在C语言中，文件操作是通过文件指针来进行的。文件指针是一个指向 FILE 结构的指针，用于标识和操作一个文件。 FILE *fp; 常用的文件操作函数 fopen：打开文件。fclose：关闭文件。fread：从文件中读取数据。…...
【Linux系列】查看服务器是否使用了 SSD 的多种方法
💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…...
基础入门-传输加密数据格式编码算法密文存储代码混淆逆向保护安全影响
知识点： 1、传输格式&传输数据-类型&编码&算法 2、密码存储&代码混淆-不可逆&非对称性 一、演示案例-传输格式&传输数据-类型&编码&算法 传输格式 JSON XML WebSockets HTML 二进制 自定义 WebSockets：聊天交互较常…...
通过idea创建的springmvc工程需要的配置
在创建的spring mvc工程中，使用idea开发之前需要配置文件包括porm.xml、web.xml、springmvc.xml 1、porm.xml 工程以来的spring库，主要包括spring-aop、spring-web、spring-webmvc，示例配置如下： <project xmlns"http:/…...
PyTest自学-认识PyTest
1 PyTest自学-认识PyTest 1.1 PyTest可以用来做什么？ PyTest是一个自动化测试框架，支持单元测试和功能测试，有丰富的插件，如，pytest-selemium, pytest-html等。 1.2 安装pytest 使用pip install -U pytest。 1.3 py…...
JavaScript系列（31）--装饰器详解
JavaScript装饰器详解 🎨 今天，让我们深入探讨JavaScript的装饰器（Decorators）。装饰器是一种用于修改类和类成员的强大语言特性，它让我们能够以声明式的方式增强类的功能。 装饰器基础概念 🌟 …...
培养未来：2024年少儿编程教育的实践与思考
目录 引言 ： 正文： 一、Scratch教学的深化 二、代码编程的多样化 三、赛教融合驱动 四、社区互动与共同成长 结语 ： 引言 ： 在快速发展的科技时代，编程教育作为培养未来技术人才的重要环节，不断经历…...
ComfyUI-PromptOptimizer：文生图提示优化节点
ComfyUI-PromptOptimizer 是 ComfyUI 的一个自定义节点，旨在优化文本转图像模型的提示。它将用户输入的提示转换为更详细、更多样化、更生动的描述，使其更适合生成高质量的图像。无需本地模型。 1、功能 提示优化：优化用户输入的提示以生成…...
用户中心项目教程（三）---再谈nvm,nodejs和神器Geek
目录 1.昨日回顾 2.nodejs&&nvm使用 2.1问题抛出 2.2解决方案 3.geek的使用 3.1页面展示 3.2下载链接 3.3如何使用 4.按照官方文档操作 4.1官方文档 4.2我的演示 4.3可能出现的问题 1.昨日回顾 我依稀记得昨天的时候关于这个umi3相关的兼容性问题导致的这个…...
CSS布局新视角：BFC（块级格式化上下文）的作用与优势
在CSS布局的世界中，BFC（Block Formatting Context，块级格式化上下文）是一个既重要又神秘的概念。它不仅是解决复杂布局问题的关键工具，也是提升页面性能和用户体验的重要手段。本文将从新视角出发，深入探讨…...
智能化植物病害检测：使用深度学习与图像识别技术的应用
植物病害一直是农业生产中亟待解决的问题，它不仅会影响作物的产量和质量，还可能威胁到生态环境的稳定。随着人工智能（AI）技术的快速发展，尤其是深度学习和图像识别技术的应用，智能化植物病害检测已经成为一…...
Spring Boot Actuator 详细介绍
Spring Boot Actuator 详细介绍 1. 简介 Spring Boot Actuator 是 Spring Boot 提供的一个用于监控和管理应用程序的强大功能模块。它可以帮助我们了解应用程序的运行状况、指标收集、环境信息、日志级别管理等。 2. 添加依赖 2.1 在 pom.xml 中添加以下依赖： …...
微软确认Win10停更不碍Microsoft 365使用！未来是否更新成谜
快科技1月17日消息，微软澄清了关于Windows 10停止支持后Microsoft 365办公套件使用情况的误解。 前两天微软更新支持文档，表示2025年10月14日Windows 10停止支持之后，Microsoft 365应用程序将不再支持Windows 10设备，引发用户担忧…...
uniapp 微信小程序 editor 富文本编辑器
<view class"inp boxsizing"><view class"contentBox"><!-- 富文本编辑器 --><view classwrapper><view classtoolbar tap"format"><view :class"formats.bold ? ql-active : " class"iconfon…...
数据结构学习笔记——排序
排序 1. 排序相关概念 稳定性：关键字相同的数据记录，排序后相对顺序仍保持不变 例如，两个25，在排序完后，有*的25仍在后方，说明该排序算法是稳定的 内部排序：数据元素全部放在内存中的排序 外…...
CSS 样式 margin:0 auto； 详细解读
一、基本语法 margin 属性是用于设置元素的外边距，它可以接受一个、两个、三个或四个值。 margin:0 auto 是一种简洁的写法，其中包含了两个值。 二、值的含义 第一个值 0 表示元素的上下外边距为 0。这意味着该元素的顶部和底部与相邻元素或父元素之间…...
leetcode24-两两交换链表中的节点
leetcode 24 思路 本题仍然引入虚拟头节点来实现会更加简单，因为不用单独考虑对于头节点进行交换的场景对于边界条件考虑更少，交换的步骤按照下图中的步骤来 首先将dummy->22->11->3 但是在第一步的时候，dummy->2，…...
)
项目开发实践——基于SpringBoot+Vue3实现的在线考试系统(六)
文章目录 一、考试管理模块实现1、添加考试功能实现1.1 页面设计1.2 前端功能实现1.3 后端功能实现1.4 效果展示2、考试管理功能实现2.1 页面设计2.2 前端功能实现2.3 后端功能实现2.3.1 后端查询接口实现2.3.2 后端编辑接口实现2.3.3 后端删除接口实现2.4 效果展示二、代码下载…...
flutter的web页面
有几个服务器 有几个后台 直接通过web端进去虽然说很方便，但… 于是把web页面镶嵌到应用里面去， 这样就换了个方式打开web页面了 比如这里有有个列表 这里是写死了，活的列表可以通过io去获取 import package:flutter/material.dart; imp…...
YOLOv10改进，YOLOv10检测头融合RFAConv卷积，添加小目标检测层（四头检测）+CA注意机制，全网首发
摘要 空间注意力已广泛应用于提升卷积神经网络（CNN）的性能，但它存在一定的局限性。作者提出了一个新的视角，认为空间注意力机制本质上解决了卷积核参数共享的问题。然而，空间注意力生成的注意力图信息对于大尺寸卷积核来说是不足够的。因此，提出了一种新型的注意力机制—…...
使用vue-next-admin框架后台修改动态路由
vue-next-admin框架是一个基于 Vue 3 和 Vite 构建的后台管理系统框架。它采用了最新的前端技术栈，旨在提供一个高效、灵活、现代化的管理后台解决方案。该框架主要用于构建功能丰富且易于定制的管理后台应用，适合各种中大型项目。 其主要特点包括&am…...
Windows蓝牙驱动开发-经典蓝牙音频
本文介绍 Windows 中的蓝牙经典音频功能。 蓝牙经典音频支持通过高级音频分发配置文件(A2DP)和单声道播放和通过免手配置文件(HFP)进行立体声音频播放。 Windows 支持各种音频编解码器和采样率，具体取决于 Windows 版本、耳机的功能以及音频设备的播放或捕获功能的当…...
力扣动态规划-3【算法学习day.97】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向（例如想要掌握基础用法，该刷哪些题？建议灵神的题单和代码随想录）和记录自己的学习过程，我的解析也不会做的非常详细，只会提供思路和一些关…...
如何将本地电脑上的文件夹设置为和服务器的共享文件夹
将本地电脑上的文件夹设为与服务器共享的文件夹，通常是在本地开启文件共享，并配置相应的权限，使服务器可以访问该文件夹。以下以 Windows 系统为例说明具体操作步骤： 一、在本地电脑上设置共享文件夹 选择文件夹 找到需要共享的文…...
自己搭建远程桌面服务器-RustDesk（小白版）
1.RustDesk简介 此软件主要功能为远程各种设备（其中包括Windows、macOS、Linux、iOS、Android、Web等） 支持文件传输（可直接拷贝远程电脑的文件，类似向日葵的远程文件） 支持内网穿透（支持端口映射&#…...
一文读懂服务器的HBA卡
什么是 HBA 卡 HBA 卡，全称主机总线适配器（Host Bus Adapter） ，是服务器与存储装置间的关键纽带，承担着输入 / 输出（I/O）处理及物理连接的重任。作为一种电路板或集成电路适配器，HBA…...
Android SystemUI——CarSystemBar车载状态栏（九）
上一篇文章我们介绍了车载开发中的 CarSystemUI，而车载开发中的状态栏也被 CarSystemBar 所取代，这里我们就来看看一下车载系统中的状态栏——CarSystemBar。 一、车载状态栏创建 1、CarSystemBar 源码位置：/packages/apps/Car/SystemUI/src/com/android/systemui/car/sy…...
干货答疑分享记录：as导入问题，LSP含义，分屏进入SplashScreen
背景： vip学员群经常会有学员遇到一些常见的android framework开发问题，近期收集整理一些疑问，主要有以下3个： 1、android studio对源码进行导入时候，老是无法跳转到系统source code 2、学员在群里询问dumpOtherPro…...
WPS数据分析000001
目录 一、表格的新建、保存、协作和分享 新建 保存 协作 二、认识WPS表格界面 三、认识WPS表格选项卡 开始选项卡 插入选项卡 页面布局选项卡 公式选项卡 数据选项卡 审阅选项卡 视图选项卡 会员专享选项卡 一、表格的新建、保存、协作和分享 新建 ctrlN------…...
单独编译QT子模块
单独编译QT子模块 系统 win qt-everywhere-src-5.12.12 下载源码： https://download.qt.io/archive/qt/5.12/5.12.12/single/ 参考： https://doc.qt.io/qt-5/windows-building.html 安装依赖 https://doc.qt.io/qt-5/windows-requirements.html Per…...
Ubuntu20.4和docker终端指令、安装Go环境、安装搜狗输入法、安装WPS2019：保姆级图文详解
目录 前言1、docker、node、curl版本查看终端命令1.1、查看docker版本1.2、查看node.js版本1.3、查看curl版本1.4、Ubuntu安装curl1.5、Ubuntu终端保存命令 2、安装docker-compose、Go语言2.1、安装docker-compose2.2、go语言安装步骤2.3、git版本查看 3、Ubuntu20.4安装搜狗输…...
)
HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (五、电影详情页的设计实现)
在上一篇文章中，完成了电影列表页的开发。接下来，将进入电影详情页的设计实现阶段。这个页面将展示电影的详细信息，包括电影海报、评分、简介以及相关影人等。将使用 HarmonyOS 提供的常用组件，并结合第三方库 nutpi/axios 来实现…...
电子杂志制作平台哪个好
作为一个热爱分享的人，我试过了好几个平台，终于找到了几款比较好用得电子杂志制作平台，都是操作界面很简洁，上手非常快的工具。 FLBOOK:这是一款在线制作H5电子画册软件，提供了各种类型的模板，可支持添加…...
1.写在前面
按照惯例，第一篇文章是要先介绍下专栏的风格、思路，以免需求不一致的同学误入，耽误大家时间。 本教程将系统的讲解若依前、后端的全部功能点，适合有面试需求的小伙伴，或者想提升自己能力的同学。本教程是免费教程。对源…...
JavaWeb 前端基础 html + CSS 快速入门 | 018
今日推荐语 指望别人的救赎，势必走向毁灭——波伏娃 日期 学习内容 打卡编号2025年01月17日JavaWeb 前端基础 html CSS018 前言 哈喽，我是菜鸟阿康。 今天 正式进入JavaWeb 的学习，简单学习 html CSS 这2各前端基础部分&am…...
redis做为缓存，mysql的数据如何与redis进行同步呢?
Redis作为缓存与MySQL之间的数据同步问题，特别是涉及到双写一致性（即缓存与数据库的写操作要保持一致）时，通常有两种常见的解决方案。它们分别适用于不同的一致性要求和延迟容忍度。以下是两种常见的解决方案的详细解释࿱…...
TCP 重传演进：TCP RACK Timer 能替代 RTO 吗
本文的建议适用于想改变 TCP 行为的新协议设计，还是那句话，不要抄 TCP 做 yet another TCP。 RTO 一直是 TCP 传输过程所要尽量避免的，因为它会将状态带入 Loss 进而 Go-Back-N，这是一个昂贵的操作。But 在 Fast-Retransmit 被引…...
React Native的现状与未来：从发展到展望
每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...
替换数字
目录 题目 思路 代码 题目 给定一个字符串 s，它包含小写字母和数字字符，请编写一个函数，将字符串中的字母字符保持不变，而将每个数字字符替换为number。 例如，对于输入字符串 "a1b2c3"，函数应…...
[cg] UE5 调试技巧
UE 中 rhi命令的提交是在render 线程，而graphics api 真正的执行是在rhi 线程， 今天想看下rhi的底层调用，但由于是通过task执行的，无法获取到render thread传入的地方，调试起来不太方便。 可通过开启下面的命令来调试 …...
Git相关命令
一：基础认识 1.Git 三种状态 Working Directory ：本地工作目录，工作区Staging Area：添加文件，用于commit前，暂存区.git directory(Repository)：本地仓库，存储commit数据࿰…...
uni-simple-router史上最全使用方法教程
在 uni-app 项目中，随着应用的复杂度增加，传统的路由管理方式可能无法满足需求，尤其是在多页面和权限控制等场景下。这时，使用像 uni-simple-router 这样的路由管理库可以简化开发流程👍，如权限控制、路由守…...
【ArcGIS微课1000例】0140：总览（鹰眼）、放大镜、查看器的用法
文章目录 一、总览工具二、放大镜工具三、查看器工具ArcGIS中提供了三种局部查看的工具： 总览（鹰眼）、放大镜、查看器，如下图所示，本文讲述这三种工具的使用方法。 一、总览工具 为了便于效果查看与比对，本实验采用全球影像数据（位于配套实验数据包中的0140.rar中），加…...
【Linux】【Vim】vim编辑器的用法
一、vim简介 Vim是一款功能强大且高度可定制的文本编辑器，广泛应用于Linux 和 Unix系统中。 它不仅继承了vi编辑器的所有特性，还增加了许多新的功能，如语法高亮、代码折叠、多级撤销等。 Vim有三种主要的工作模式： 命令模式&am…...
RabbitMQ实现延迟消息发送——实战篇
在项目中，我们经常需要使用消息队列来实现延迟任务，本篇文章就向各位介绍使用RabbitMQ如何实现延迟消息发送，由于是实战篇，所以不会讲太多理论的知识，还不太理解的可以先看看MQ的延迟消息的一个实现原理再来看这篇文章…...
《leetcode-runner》【图解】【源码】如何手搓一个debug调试器——架构
前文： 《leetcode-runner》如何手搓一个debug调试器——引言 文章目录 设计引入为什么这么设计存在难点1. 环境准备2. 调试程序 仓库地址：leetcode-runner 本文主要聚焦leetcode-runner对于debug功能的整体设计，并讲述设计原因以及存在的难点…...