个人博客网站布局

个人博客网站布局

Blog是Web Log 的简称,即网志,也叫博客。是博客的作者与读者以日志形式进行交互的平台。

想在自己的服务器上建立 博客服务系统,可以选择Radio Userland 、 Manila 和 Movable Type 。还有免费的.TEXT 和dasBlog 。

在Blog网站上,注重自我观点的表达。我们可以看到个性极强而又富有尝试精神的设计,如色彩搭配。
例如:网站的主色调是深绿色,配以少量的黄色。绿色在黄色和蓝色之间,属于中庸的颜色,是和平色,显示出追求自然美、宁静、宽容的个性。

博客网站主页布局设计

网页的结构属于三行两列式布局,顶行用于显示网站的Banner,底部行用于显示网站的主要内容。
网页设计要求,将网站从上至下分为3个区域 #header 、#page 和#footer。在#page是网站主要内容的容器,在#page 中将页面分为左右两部分,分别放置在 #content 和 #sidebar 俩个Div 对象中。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的个人博客主页布局设计,希望能够帮到你: ``` <!DOCTYPE html> <html> <head> <title>个人博客</title> <style> /* 全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 16px; line-height: 1.5; color: #333; } /* 头部样式 */ header { display: flex; justify-content: space-between; align-items: center; padding: 20px; background-color: #f7f7f7; } header h1 { font-size: 32px; font-weight: bold; color: #333; } header nav { display: flex; justify-content: space-between; align-items: center; } header nav a { display: inline-block; margin-left: 20px; color: #333; text-decoration: none; transition: all 0.3s ease-in-out; } header nav a:hover { color: #f00; } /* 主体内容样式 */ main { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 20px; margin-top: 20px; } .post { flex-basis: calc(33.33% - 20px); margin-bottom: 20px; padding: 20px; background-color: #f7f7f7; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .post h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 10px; } .post p { font-size: 16px; line-height: 1.5; color: #666; margin-bottom: 10px; } .post a { display: inline-block; color: #f00; text-decoration: none; transition: all 0.3s ease-in-out; } .post a:hover { color: #333; } /* 底部样式 */ footer { text-align: center; padding: 20px; background-color: #f7f7f7; } footer p { font-size: 14px; color: #999; } </style> </head> <body> <!-- 头部 --> <header> <h1>个人博客</h1> <nav> <a href="#">首页</a> <a href="#">关于我</a> <a href="#">联系我</a> </nav> </header> <!-- 主体内容 --> <main> <div class="post"> <h2>文章标题1</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> <div class="post"> <h2>文章标题2</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> <div class="post"> <h2>文章标题3</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> <div class="post"> <h2>文章标题4</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> <div class="post"> <h2>文章标题5</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> <div class="post"> <h2>文章标题6</h2> <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p> <a href="#">阅读更多</a> </div> </main> <!-- 底部 --> <footer> <p>版权所有 © 2021 个人博客</p> </footer> </body> </html> ``` 该布局采用了简单的HTML和CSS代码,包括了头部、主体内容和底部三个部分。其中,头部包含了网站标题和导航栏,主体内容部分采用了flexbox布局实现了文章列表展示,底部则包含了版权信息。你可以根据自己的需要进行修改和美化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值