效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式公司官网</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <style> body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; } .parallax { height: 100vh; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; color: white; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .section { padding: 50px 20px; text-align: center; } .section h2 { margin-bottom: 20px; } .section p { max-width: 800px; margin: 0 auto; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; padding: 20px; } .grid img { width: 100%; height: auto; } .footer { background: #333; color: white; text-align: center; padding: 20px; } </style> </head> <body> <div id="app"> <div class="parallax" :style="{ backgroundImage: 'url(' + sections[0].image + ')' }"> <h1>{{ companyName }}</h1> </div> <div v-for="(section, index) in sections" :key="index" class="section"> <h2>{{ section.title }}</h2> <p>{{ section.content }}</p> <div class="grid"> <img v-for="(img, i) in section.images" :key="i" :src="img" :alt="'Image ' + (i + 1)"> </div> </div> <div class="footer"> <p>© {{ companyName }} {{ new Date().getFullYear() }}</p> </div> </div> <script> new Vue({ el: '#app', data() { return { companyName: '响应式公司官网', sections: [ { title: '关于我们', content: '我们是一家致力于提供高质量服务的公司，专注于创新和技术。', image: 'https://via.placeholder.com/1200x800?text=关于我们', images: [ 'https://via.placeholder.com/200x150?text=图片1', 'https://via.placeholder.com/200x150?text=图片2', 'https://via.placeholder.com/200x150?text=图片3' ] }, { title: '我们的服务', content: '我们提供广泛的服务，包括Web开发、移动应用开发和云计算解决方案。', image: 'https://via.placeholder.com/1200x800?text=我们的服务', images: [ 'https://via.placeholder.com/200x150?text=图片4', 'https://via.placeholder.com/200x150?text=图片5', 'https://via.placeholder.com/200x150?text=图片6' ] }, { title: '我们的团队', content: '我们的团队由经验丰富的专业人士组成，致力于为客户提供最佳解决方案。', image: 'https://via.placeholder.com/1200x800?text=我们的团队', images: [ 'https://via.placeholder.com/200x150?text=图片7', 'https://via.placeholder.com/200x150?text=图片8', 'https://via.placeholder.com/200x150?text=图片9' ] } ] }; } }); </script> </body> </html>
