用css设计布局新来博客 也适合企业模板设计

ys2519

对于网页的布局剖析思考的线索也总算有了一定的理解。

　　近来时期我一直在学习CSS网页布局预设，学习过程中也练习做了几个例子。能力做出想要的网页效果。今日这篇文章我们就以新浪微博的界面布局为例子做一个CSS网页布局制造的思考的线索。

　　新浪微宽广家都晓得，应当也有不少朋友跟我同样在运用新浪微博。

　　做CSS网页布局首先要有一个清楚的思考的线索，其次才是高明的技术，只有思考的线索准确了，动身点对了。

　　本文不讲技术，只讲一个CSS网页布局的制造思考的线索。首先先看一下子，新浪微博页面的群体布局效果。




然后我们进行初步的分解分析。从整体布局来看，我们很容易就能划分出微博的三个大体的主要区域分别是“header”头部区域，“content”内容部分，“footer”页脚部分。如下图：


从上图也可以看出，新浪微博的界面布局也是很中规中矩的，没有特别多的花样。从“content”内容部分我们还能很明确的看出新浪微博采用的是网页布局中很常用的两栏布局方式，分别是左边的内容区域“left”和边栏信息区域“right”。

从大体上看，新浪微博的布局方式也就是这样的了，很简洁。当然如果要做出新浪微博整体布局的效果我们还得继续往下分析每一大体区域内的细分区域。

以footer为例，看下图



从图上我们看出，在footer页脚部分也划分了两个大的区域分别是上面的“link”连接部分和下面的“copyright”版权信息部分。在”link”连接部分又分成了5份不同的连接模块。

通过我们对新浪微博布局的划分，现在应该已经有了一个很清晰的制作思路。然后我们先编写出模块布局的div代码。我这里就简单写一下。


<div id=”container”>
<div id=”header”>
<div **************></div>
<div **************></div>
…………………
</div>
<div id=”content”>
<div id=”left”>
<div **************></div>
<div **************></div>
………………..
</div>
<div id=”right”>
<div **************></div>
<div **************></div>
…………………..
</div>
</div>
<div id=”footer”>
<div id=”link”>
<div **************></div>
<div **************></div>
…………………..
</div>
<div id=”copyright”></div>
</div>
</div>

以上是整个新浪微博页面布局的的部分div代码，我只写出了大概的框架，其他的还需看官自行添加。

写出整个布局结构后，剩下的就是开始添加CSS样式代码了。CSS样式也就看个人的喜好和自己的设计灵感太添加了，这里就不做过多的讲解。

总结：这种用css布局也适合企业网站DIY模板的排版和布局。

白村人

进来看看谢谢分享啊