首页用css设计个个人博客

用css设计个个人博客

时间: 2024-05-12 10:14:35 浏览: 42

好的，以下是一个简单的示例： HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人博客</title> <link rel="stylesheet" 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> </ul> </nav> </header> <main> <section> <h2>最新文章</h2> <ul> <li> <h3><a href="#">文章标题1</a></h3> <p>文章摘要...</p> </li> <li> <h3><a href="#">文章标题2</a></h3> <p>文章摘要...</p> </li> <li> <h3><a href="#">文章标题3</a></h3> <p>文章摘要...</p> </li> </ul> </section> <section> <h2>关于我</h2> <p>自我介绍...</p> </section> </main> <footer> <p>版权信息</p> </footer> </body> </html> ``` CSS代码： ```css /* 全局样式 */ body { font-family: Arial, sans-serif; margin: 0; padding: 0; } /* 头部样式 */ header { background-color: #333; color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 10px; } header h1 { margin: 0; } nav ul { list-style: none; display: flex; } nav li { margin-right: 20px; } nav a { color: #fff; text-decoration: none; } /* 主要内容样式 */ main { max-width: 800px; margin: 0 auto; padding: 20px; } section { margin-bottom: 40px; } section h2 { margin-top: 0; font-size: 24px; } section ul { list-style: none; margin: 0; padding: 0; } section li { margin-bottom: 20px; } section li h3 { margin: 0; font-size: 20px; } section li p { margin: 5px 0; } /* 页脚样式 */ footer { background-color: #eee; text-align: center; padding: 10px; } ``` 你可以根据自己的需求和喜好进行修改和定制。

阅读全文