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. 通栏平均分布型
  • 相关阅读:
    [][]
    Spark笔记04
    Spark笔记03
    Spark笔记02
    Spark笔记01
    【熟能生巧】使用Screw快速生成数据库文档
    记一次关于jdbcTemplate.queryForList快速Debug及感悟
    【从零单排】Exception实战总结1
    【从零单排】Java性能排查实战模拟
    【从零单排】关于泛型Generic的一些思考
  • 原文地址:https://www.cnblogs.com/wenaq/p/13513004.html
Copyright © 2011-2022 走看看