首页网页设计期末作业简单html+css

网页设计期末作业简单html+css

时间: 2024-01-02 13:23:01 浏览: 134

以下是一个简单的网页设计期末作业的示例，使用了HTML和CSS来实现页面布局和样式： ```html <!DOCTYPE html> <html> <head> <title>网页设计期末作业</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #666; color: #fff; padding: 10px; text-align: center; } nav a { color: #fff; text-decoration: none; margin: 0 10px; } main { padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <header> <h1>网页设计期末作业</h1> </header> <nav> <a href="index.html">首页</a> <a href="gallery.html">相册</a> <a href="blog.html">日志</a> <a href="guestbook.html">留言板</a> </nav> <main> <h2>欢迎来到我的网页设计期末作业</h2> <p>这是一个简单的网页设计作业，使用HTML和CSS来实现页面布局和样式。</p> <img src="author.jpg" alt="作者照片"> <p>作者：Your Name</p> <p>班级：Your Class</p> <p>联系方式：Your QQ or Email</p> </main> <footer> <p>版权所有 © 2021 Your Name</p> </footer> </body> </html> ``` 这个示例网页包括了一个顶部的标题栏（header），一个导航栏（nav），一个主要内容区域（main），和一个底部的页脚（footer）。导航栏包含了四个超链接，可以跳转到不同的子页面。主要内容区域包括了一些文字介绍和作者的照片和基本信息。你可以根据自己的需求和要求进行修改和扩展，例如添加相册页面、日志页面和留言板页面，并在导航栏中添加相应的超链接。

阅读全文