注册本站  论坛  繁體中文

慧民电脑芯片级维修-电脑技巧
手机 | MP3 | MP4 | 显卡 | 主板 | 显示器 | 光存储 | 笔记本 | 网络设备 | 移动存储 | 数码相机
键鼠 | CPU | 音箱 | GPS | 电视 | 服务器 | 投影机 | 机箱电源 | 品牌电脑 | 办公打印 |
| 网站首页 | Cisco | Windows | Linux | Java | Dotnet | Oracle | 网页设计 | 平面设计 | 安全 | 软件应用 | 电脑维修 | 办公维修 |
您现在的位置: 电脑技巧 >> 网页设计 >> HTML >> 网页设计正文

用Class组合实现Div+CSS布局

文章来源:站长学院 作者:佚名 更新时间:2008-9-22 12:49:18 【 】 【加入收藏
  进入网络咨询平台

        现在编写xhtml,我们强烈不推荐此种方法,应该是id,class综合应用。此文章只是讲述一种思维,并非建站过程中的方法!

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

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

  举个例子:比如布局中的左栏。首先它的属性有:是左栏,宽度,背景颜色,字体颜色等。

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

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

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

  .l{float:left}

  .m{width:auto}

  .r{float:right}

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

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

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

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

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

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

  布局class只有一套,风格class可以定义很多。比如,要中栏里面在做一个小的2栏布局,就可以再定义一个风格class。

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

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

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

  <div class="l class_l"></div>

  <div class="l mid_l"></div>

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

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

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

  示例代码浏览:http://tech.ddvip.com/yssl/29811/29815_1.html

  • 上一篇网页设计:

  • 下一篇网页设计:
  • 最 新 热 门
     最简单的“开始”菜单效果
     geom加bitmapdata类打造超酷鼠标跟随效果
     AS3:图像裁剪
     Flash打造小球的弹性碰撞
     as3运用:点击图片取色
     as制作:可拖动单元格的菜单
     利用BitmapData类制作FLASH 3D相册
     使用Flash MX过程中的3个小技巧
     使用AS3自带函数进2/8/10/16/32进制互换
     flash制作字母变换效果
    最 新 推 荐
     13种常用按钮、文本框、表单等CSS样式
     CSS制作很漂亮的文字滑动效果
     用CSS改变的图片由模糊到清楚的导航
     用Class组合实现Div+CSS布局
     css布局实例:网页布局的方法
     CSS实战:美化段落文本之首字下沉
     几个经典的css技巧
     用CSS控制浏览器滚动条样式源代码
     最好的CSS资源
     危险,你敢点击吗?
    相 关 文 章

    Flash打造小球的弹性碰撞
    利用BitmapData类制作FLASH 3D相册
    使用Flash MX过程中的3个小技巧
    flash制作字母变换效果
    Flash鼠绘教程:打造窈窕淑女
    Flash创意特效:飞越星空
    Flash创意特效:清风不识字
    Flash制作一幅诗意的水墨卷轴展开的动画
    Flash鼠绘Q版的小女孩
    火柴棍人光剑短打Flash动画制作

    | 设为首页 | 加入收藏 | 联系站长 | 友情链接 | 版权申明 | 网站公告

     

    Copyright 2006-2008 pcjx.com All Rights Reserved
    电脑技巧 版权所有 粤ICP备06059145号 地图
    门市地址:广东省佛山市南海区黄岐黄海路133号
    本网站所有内容未经许可不得转载或做其他使用