首页html和css静态网页制作附代码

html和css静态网页制作附代码

时间: 2023-05-27 17:07:02 浏览: 110

<!DOCTYPE html> <html> <head> <title>静态网页制作</title> <style type="text/css"> body { font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 10px; text-align: center; } nav { background-color: #ccc; padding: 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } nav li { float: left; } nav li a { display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } nav li a:hover { background-color: #333; color: #fff; } section { padding: 10px; } footer { background-color: #333; color: #fff; padding: 10px; 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> <li><a href="#">联系我们</a></li> </ul> </nav> <section> <h2>欢迎来到我们的网站</h2> <p>这是一个演示静态网页制作的网站，使用了HTML和CSS技术。</p> <p>在这里，您可以了解我们的产品和服务，以及获取更多关于我们公司的信息。</p> </section> <footer> <p>版权所有 © 2021 静态网页制作</p> </footer> </body> </html>