效果
完整代码
<header> <div class="container"> <nav> <ul> <li><a href="#home">首页</a></li> <li> <a href="#about">关于</a> <ul> <li><a href="#team">我们的团队</a></li> <li><a href="#history">我们的历史</a></li> <li><a href="#values">我们的价值观</a></li> </ul> </li> <li> <a href="#services">服务</a> <ul> <li><a href="#web-development">网站开发</a></li> <li><a href="#app-development">应用开发</a></li> <li><a href="#marketing">数字营销</a></li> </ul> </li> <li><a href="#contact">联系我们</a></li> </ul> </nav> </div> </header> <section class="hero" id="home"> <div class="container"> <h1>欢迎来到我们的网站</h1> <p>这里是一个简洁现代的网页设计示例，我们致力于提供卓越的用户体验。</p> </div> </section> <main class="content container"> <div class="card" id="about"> <img src="about-image.jpg" alt="关于我们"> <h2>关于我们</h2> <p>我们是一家专注于提供高质量服务的公司，拥有超过十年的行业经验，致力于帮助客户实现业务增长。</p> <a href="#">了解更多</a> </div> <div class="card" id="services"> <img src="services-image.jpg" alt="我们的服务"> <h2>我们的服务</h2> <p>我们提供包括网站开发、移动应用开发、数字营销等在内的多种创新解决方案，以满足您的业务需求。</p> <a href="#">服务详情</a> </div> <div class="card" id="contact"> <img src="contact-image.jpg" alt="联系我们"> <h2>联系我们</h2> <p>如果您有任何问题或合作意向，请通过以下方式与我们取得联系。</p> <a href="#">联系方式</a> </div> </main> <footer> <div class="container"> <p>© 2024 现代网站设计。保留所有权利。</p> </div> </footer>
<style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } header { background-color: #f4f4f4; padding: 1rem 0; position: relative; } nav ul { list-style: none; display: flex; justify-content: space-between; } nav ul li { position: relative; } nav ul li a { text-decoration: none; color: #333; font-weight: bold; padding: 10px 15px; display: block; transition: color 0.3s ease-in-out, transform 0.3s ease-in-out; } nav ul li a:hover { color: #007bff; transform: scale(1.1); } nav ul li ul { display: none; position: absolute; top: 100%; left: 0; background-color: #f4f4f4; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); animation: fadeIn 0.3s ease-out; } nav ul li ul li { width: 150px; } nav ul li ul li a { padding: 10px; transition: background-color 0.3s ease-in-out; } nav ul li ul li a:hover { background-color: #007bff; color: #fff; } nav ul li:hover ul { display: block; } .hero { background-color: #e9e9e9; text-align: center; padding: 4rem 0; animation: fadeIn 2s ease-out; } .hero h1 { font-size: 2.5rem; margin-bottom: 1rem; animation: slideInFromLeft 1s ease-out; } .hero p { animation: slideInFromRight 1.5s ease-out; } .content { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 2rem 0; } .card { flex-basis: calc(33.333% - 20px); background-color: #fff; border: 1px solid #ddd; border-radius: 5px; padding: 1rem; margin-bottom: 2rem; animation: fadeInUp 1s ease-out; animation-fill-mode: backwards; animation-delay: 0.5s; transition: transform 0.3s ease-in-out; } .card:hover { transform: translateY(-10px); } .card img { max-width: 100%; height: auto; margin-bottom: 1rem; } .card h2 { margin-bottom: 0.5rem; } .card a { display: inline-block; margin-top: 1rem; padding: 0.5rem 1rem; background-color: #333; color: #fff; text-decoration: none; border-radius: 5px; transition: background-color 0.3s ease-in-out; } .card a:hover { background-color: #007bff; } footer { background-color: #333; color: #fff; text-align: center; padding: 1rem 0; transition: background-color 0.3s ease-in-out; } footer:hover { background-color: #007bff; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInFromLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInFromRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @media (max-width: 768px) { nav ul { flex-direction: column; } .card { flex-basis: 100%; animation: none; } } </style>
