首页 爱情文章 亲情文章 友情文章 生活随笔 校园文章 经典文章 人生哲理 励志文章 搞笑文章 心情日记
  • 爱情文章
  • 亲情文章
  • 友情文章
  • 生活随笔
  • 校园文章
  • 经典文章
  • 人生哲理
  • 励志文章
  • 搞笑文章
  • 心情日记
  • 英语文章
  • 范文大全
  • 作文大全
  • 新闻阅读
    •
    当前位置: 山茶花美文网 > 范文大全 > 正文

    奇门布局实例 [新浪微博CSS布局实例分析]

    时间：2018-08-11来源：山茶花美文网 本文已影响 人 山茶花美文网手机站

    最近一段时间我一直在学习CSS网页布局设计，学习过程中也练习做了几个例子。对于网页的布局分析思路也算是有了一定的了解。

    本文不讲技术，只讲一个CSS网页布局的制作思路。

    做CSS网页布局首先要有一个清晰的思路，其次才是高超的技术，只有思路正确了，出发点对了。才能做出想要的网页效果。

    新浪微博大家都知道，应该也有不少朋友跟我一样在使用新浪微博。今天这篇文章我们就以新浪微博的界面布局为例子做一个CSS网页布局制作的思路。

    首先先看一下，新浪微博页面的整体布局效果。

    新浪微博CSS布局实例分析1

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

    新浪微博CSS布局实例分析2

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

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

    以footer为例，看下图

    新浪微博CSS布局实例分析3

    从图上我们看出，在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>

     

    • 奇门布局实例 [新浪微博CSS布局实例分析] 相关文章:
    • 爱情文章
    • 亲情文章
    • 友情文章
    • 随笔
    • 哲理
    • 励志
    • 范文大全

    最新文章

    热点文章

    推荐访问

    军训远足心得体会 军训爬山心得体会 大学军训徒步拉练感想 军训徒步作文 军训徒步10公里感想 军训徒步心得体会 5分钟演讲中秋节节日 中秋一分钟演讲 中秋节演讲稿4分钟 中秋节演讲稿一分钟 中秋节演讲稿五分钟 3-5分钟 中秋节短篇演讲稿 中秋节演讲稿两分钟 中秋节的演讲稿3分钟 关于中秋节的演讲稿三分钟 孩子体验军训的心得 参加孩子军训活动的感受与收获 家长对孩子军训后的收获和感悟 小孩军训的收获与感悟 学生军训的收获与感悟 孩子军训成长过程家长感悟 孩子军训感悟 孩子军训心得体会 孩子军训的收获与感悟 兵役前训练心得体会 部队当兵的心得 新兵役前教育训练心得体会 预备役军训心得体会 新兵军训感悟

    本文奇门布局实例 [新浪微博CSS布局实例分析] 由山茶花美文网整理提供，版权归原作者、原出处所有。

    Copyright © 山茶花美文网 All Rights Reserved.