首页用HTML、CSS和JS简单设计一个网页。

用HTML、CSS和JS简单设计一个网页。

时间: 2024-04-30 17:21:59 浏览: 55

好的，这是一个简单的网页设计示例： ```html <!DOCTYPE html> <html> <head> <title>My Webpage</title> <style> body { font-family: Arial, sans-serif; background-color #e6e6e6; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; color:fff; padding: 10px; text-align: center; margin-bottom: 20px; } nav a { color: #fff; text-decoration: none; padding: 10px; } nav a:hover { background-color: #999; } section { background-color: #fff; padding: 20px; margin: 0 auto; width: 80%; min-height: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.3); } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>My Webpage</h1> </header> <nav> <a href="#">Home</a> <a href="#">About</a> <a href="#">Contact</a> </nav> <section> <h2>Welcome to my webpage!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, neque at feugiat ultrices, sapien ipsum efficitur sem, sed tincidunt metus nunc eu ex. Duis vehicula sapien a quam laoreet, eget faucibus turpis venenatis. Sed fringilla, libero quis auctor vestibulum, nisi sapien vehicula lacus, sit amet rhoncus lectus justo ut arcu. Donec non nulla lacus. Praesent vel risus condimentum, vulputate elit et, pharetra lectus. Suspendisse potenti.</p> </section> <footer> <p>© 2021 My Webpage</p> </footer> </body> </html> ``` 这个示例包含一个页眉、导航栏、正文和页脚。CSS用于控制网页的布局和样式，JS可以用来添加交互性。

阅读全文