zoukankan      html  css  js  c++  java
  • Div CSS网页布局:用class组合实现

      用标准件的方式来组装网页DIV布局。我把class分为2种:布局class;风格class。

      布局class是骨架,风格class是衣服。

      举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。鞍山治疗皮肤病最好的医院www.pfk0412.com

      1、首先会定义一个class,比如:.layout,主要用来控制页面整个的大小

      .layout{98%;margin:0 auto;text-align:left;}

      2、然后会定义3个基本布局Class(l,m,r)

      .l{float:left}

      .m{auto}

      .r{float:right}

      我把2栏布局也归类于3栏布局,因为3栏布局中,左右栏的宽度分别为0的时候,3栏就变成了2栏.

      我们写基本布局代码的时候,最好还是写成3栏格式.

      3、对应布局Class,定义需要的风格Class,比如宽度,高度,背景颜色等等这些都属于风格元素

      .class_l{background:#ff0;margin-right: -150px;150px;}

      .class_m{background:#f00;margin:0 140px 0 150px;}

      .class_r{background:#00f;margin-left: -140px;140px;}

      布局class只有一套,风格class可以定义很多。比如,要中栏里面在做一个小的2栏布局,就可以再定义一个风格class。鞍山治疗牛皮癣好的医院www.pfk0412.com

      .mid_l{background:#ff0;margin-right: -100px;100px;}

      .mid_m{background:#f00;margin:0 0 0 100px;}

      4、将布局class和风格class结合起来,在代码这样引用:

      将2个class都引用,中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用,假如需要再非凡定义,你可以给这个div取一个id来定义。

      其他的一些常用的风格class也可以写成通用的,比如隐含可以定义为

      .hide{display:none} 然后需要的时候,class="xxx hide"来引用。

  • 相关阅读:
    小程序购物车页面样式
    用css让div高度自动撑满屏幕
    客户端封装浏览器
    vuex模块的普通用法
    vue图片预览
    Django中Cookie和Session配置和操作
    jira的插件开发流程实践
    python3.7安装模块MySQLdb报错error: Microsoft Visual C++ 14.0 is required.
    Hadoop2.9下运行JAR包时System.out.println的输出日志
    MapReduce程序——WordCount(Windows_Eclipse + Ubuntu14.04_Hadoop2.9.0)
  • 原文地址:https://www.cnblogs.com/asds/p/7839022.html
Copyright © 2011-2022 走看看