zoukankan      html  css  js  c++  java
  • CSS学习六:布局剖析

    1. CSS+DIV布局方案剖析

    1.1. CSS排版观念

    1. 比较新的版本方式,一般是将页面经过DIV进行分块,然后对各个块进行CSS定位。然后再在各个块中增加相应的内容。通过CSS排版,更新特别容易,甚至是页面的拓扑结构,都可以通过CSS属性来重新定位。

    2. 将页面用DIV分块,首先要求对整体的框架有个定义,包括整个页面有哪些模块,各个模块的父子关系等。一般排版是都在外面加一个父DIV, 这样便于控制整个布局,对于每个DIV,还可以再加入块元素和行内元素。

    3. 在设计网页时,首先应该先明确页面的框架,并且在HTML中建好框架,然后再考虑排版和各个细节。

    1.2. 设计块的位置

    1. 确定页面版型,包括Logo,状态信息,导航信息,用户信息,版权信息,内容区等。

    2. CSS定位

    整理好页面的框架后便可以利用CSS对各个块进行定位,首先实现页面的整体规划,然后往各个模块中添加内容,一般首先对body标记和container标记添加内容。

    CSS时定位的时候,非常容易实现两个块的调动,主要设置float就可以了。

    如果links的内容比content长,IE中footer就会贴在content下面,与links重合。这样的问题出现后,一般是将二者的float都设置为left,然后调整他们之间的距离。如果links在content的左方,就调整为右浮动。

    1.3. 固定宽带居中板式

    1. 方法1

    设置固定宽度,将margin设置为0 auto,意味着块的上下为0,左右自动调整。

    2. 方法2

    使用left属性将块的左边框移动到页面的50%地方,然后再用margin-left将页面拉回固定宽度的一半距离。

    1.4. 左中右板式

    1. 一般来说,左栏和右栏固定,中间栏自动扩展。Left和right都采取绝对定位,因为不需要为middle设置实际宽度,因此他的实际宽度是100%,会占据整个页面。因此需要设置middle的margin-left和marin-right分别为左右框的宽度。这样可以解决中间栏的随意变更。

    1.5. 块的背景色

    1. 背景色不会自动的完全覆盖,需要特殊处理

    2. 通用的解决办法是:

    将body的颜色设置的和右侧的颜色一致,然后制作一个和左边一样的宽度和颜色的图片,然后作为container的背景色,在y轴重复。

    3. 利用父块的背景色和背景图片来修改子块的方法在CSS排版中还有很多。

    案例:电子相册

    1.6. 表格与CSS排版的区别

    表格的优势

    1. 制作容易

    2. 不存在背景色问题

    3. 块与块之间的排版很清楚。

    表格的缺点:

    1. 很难升级

    2. 轻松实现动态界面,可以调整各个块的位置。

    3. 表格必须全部下载才能显示。而div可以分别的下载。

    4. 数据与样式耦合在一起

    案例:http://115.com/file/cl1khi5m#

  • 相关阅读:
    gc buffer busy/gcs log flush sync与log file sync
    给Oracle年轻的初学者的几点建议
    Android 编程下帧动画在 Activity 启动时自动运行的几种方式
    Android 编程下 Touch 事件的分发和消费机制
    Java 编程下 static 关键字
    Java 编程下 final 关键字
    Android 编程下模拟 HOME 键效果
    Why Are Thread.stop, Thread.suspend, Thread.resume and Runtime.runFinalizersOnExit Deprecated ?
    Extjs4 大型项目目录结构重构
    [转]SQLServer 2008 允许远程连接的配置方法
  • 原文地址:https://www.cnblogs.com/kevinhigher/p/2211065.html
Copyright © 2011-2022 走看看