首页用div+css网页设计制造一个个人博客的简单代码

用div+css网页设计制造一个个人博客的简单代码

时间: 2023-12-22 09:04:09 浏览: 23

以下是一个简单的个人博客网页设计的代码： HTML部分： ``` <!DOCTYPE html> <html> <head> <title>个人博客</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>个人博客</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于我</a></li> <li><a href="#">博客</a></li> <li><a href="#">联系我</a></li> </ul> </nav> </header> <main> <section> <h2>最新博客</h2> <article> <h3>博客标题</h3> <p>博客内容...</p> </article> <article> <h3>博客标题</h3> <p>博客内容...</p> </article> </section> <aside> <h2>关于我</h2> <p>这是一段关于我的介绍...</p> </aside> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` CSS部分： ``` body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #333; color: #fff; padding: 20px; } header h1 { margin: 0; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav li a { color: #fff; text-decoration: none; } main { display: flex; margin: 20px; } section { flex: 2; margin-right: 20px; } section h2 { margin-top: 0; } article { margin-bottom: 20px; } article h3 { margin-top: 0; } aside { flex: 1; background-color: #f2f2f2; padding: 20px; } footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } ``` 你可以将以上代码保存为HTML和CSS文件，然后在浏览器中打开HTML文件查看效果。