首页免费html网页设计代码期末作业

免费html网页设计代码期末作业

时间: 2024-12-26 13:27:00 浏览: 16

### 免费 HTML 网页设计示例代码对于学生来说，在完成静态HTML网页单页制作时，可以参考一些公开可用的设计模板来构建个人主页。下面提供一段简单的HTML代码，适用于创建一个简洁的学生个人主页。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的个人主页</title> <style> body { font-family: Arial, sans-serif; } header { background-color: #f8f9fa; padding: 20px; text-align: center; } nav ul { list-style-type: none; padding: 0; } nav li { display: inline-block; margin-right: 10px; } section { padding: 20px; } footer { background-color: #f8f9fa; text-align: center; padding: 10px; position: fixed; bottom: 0; width: 100%; } </style> </head> <body> <header> <h1>欢迎来到我的世界</h1> <p>这里是关于我的一切。</p> </header> <nav> <ul> <li><a href="#about">自我介绍</a></li> <li><a href="#projects">项目展示</a></li> <li><a href="#contact">联系我</a></li> </ul> </nav> <section id="about"> <h2>自我介绍</h2> <p>大家好！我是XXX，一名热爱编程的大三本科生...</p> </section> <section id="projects"> <h2>项目展示</h2> <p>在这里可以看到我参与的一些有趣的小项目：</p> <ul> <li>项目一描述...</li> <li>项目二描述...</li> </ul> </section> <section id="contact"> <h2>联系我</h2> <p>Email: example@example.com<br/> GitHub: https://github.com/username</p> </section> <footer> <p>© 版权声明 | 设计者：XXX</p> </footer> </body> </html> ``` 这段代码展示了如何利用基本的HTML标签和CSS样式定义来搭建一个简单而美观的学生个人网站结构[^1]。

阅读全文