首页假如你是一名大三学生，需要制作一个关于风景的网站首页，并给出代码

假如你是一名大三学生，需要制作一个关于风景的网站首页，并给出代码

时间: 2023-12-06 07:43:16 浏览: 87

好的，以下是一个简单的风景网站首页的代码： ```html <!DOCTYPE html> <html> <head> <title>风景网站首页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #fff; border-bottom: 1px solid #ccc; padding: 10px 20px; } h1 { margin: 0; } nav { background-color: #f2f2f2; padding: 10px 20px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #333; text-decoration: none; } nav a:hover { color: #000; } section { background-image: url('https://images.unsplash.com/photo-1565606429360-44b5a29d1c8c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80'); background-size: cover; height: 500px; position: relative; } section:before { background-color: rgba(0, 0, 0, 0.3); content: ''; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; } section h2 { color: #fff; font-size: 48px; margin: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 100%; text-align: center; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>风景网站</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">风景欣赏</a></li> <li><a href="#">旅游攻略</a></li> <li><a href="#">关于我们</a></li> </ul> </nav> <section> <h2>发现世界上最美的地方</h2> </section> <footer> © 2021 风景网站 </footer> </body> </html> ``` 你可以将这段代码保存为一个 HTML 文件并在浏览器中打开查看效果。这个网站首页包括了一个顶部的标题，一个导航栏，一个带有背景图片和标题的主要内容区域，以及一个页脚。你可以根据需要修改代码和样式来定制自己的网站首页。

阅读全文