zoukankan      html  css  js  c++  java
  • css的布局与版心布局

    css版心布局

    1、css中的布局有:

    常见的布局方式:固定布局、流式布局、弹性布局、浮动布局、定位布局、margin和padding

    2、多种等高布局

    a. 假等高列:使用背景图片,在列的父元素上使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像

    b. 给容器div使用单独的背景色(固定布局)(流体布局):用元素中的最大高度撑大其他的容器高度

    c. 创建带边框的两列等高布局:用border-left来做,只能使用两列。

    d. 使用正padding和负margin对冲实现多列布局方法:在所有列中使用正的上、下padding和负的上、下margin,并在所有列外面加上一个容器,设置overflow:hiden把溢出背景切掉

    e. 使用边框和定位模拟列等高:但不能使用在多列

    f. 模仿表格布局等高列效果:兼容性不好,在ie6-7无法正常运行

    3、版心布局

    1. 版心定义:网页主体内容所在的区域
    2. 布局流程: 由外到内,由大到小
      1. 确定页面的版心(可视区域)
      2. 分析页面中的行模块,以及行模块中的列模块
      3. 制作HTML结构
      4. css初始化,然后通过盒子模型的原理,通过div+css布局来控制网页的各个模块。
    3. 布局分类
      1. 一列宽度且居中
      2. 两列左窄右宽
      3. 通栏平均分布型
  • 相关阅读:
    第一周实习工作总结
    service---七月十九号实验
    安卓常用链接
    Activity + 基础UI
    七月十四日安卓学习笔记
    安卓组件学习笔记
    剑指:数组中出现次数超过一半的数字
    剑指:二叉搜索树与双向链表
    剑指:二叉树中和为某一值的路径
    剑指:二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/wenaq/p/13513004.html
Copyright © 2011-2022 走看看