今天为大家介绍一下float属性在ecshop模板制作中起到的作用.

float的意思是 悬浮,用的最多的是 float:left 和 float:right,float:left的意思是左悬浮,那么right就是右悬浮。在ecshop模板制作中float属性起到了举足轻重的作 用,接下来大家看看ecshop默认模板中float属性的典型用法.

打开themes/default/style.css 有这样的内容

1. .AreaL{width:200px; float:left; margin-right:10px;} 
2. .AreaR{width:750px; float:left;} 

AreaL是左侧区域,而AreaR是右侧区域,一个网页分左右两栏,在div css中的布局就称为左右结构,那么要实现左右两栏是布局同一水平面的,只能用到float属性,如果没有加float属性,这两个模块将会产生错行也就是不在同一屏幕,产生错行的还有一个原因是width属性的宽度太大,比如两个模块的width宽度之和大于最外层div宽度的时候,也会产生错行.

那么这里AreaR为什么也是float:left 而不是float:right呢,其实无论怎么写都是可以的,这里已经定义了width宽度,而且是正好和左侧的模块宽度加起来为最外层宽度之和,那么无 论是left还是right都会显示一样的效果,很多ecshop模板,基本都是用到左右双栏布局,很少有三栏(左中右),因为三栏的话每个栏目的width数值只能保持很小,这样就不能展示很多内容,而京东商城模板因为是自适应宽度的关系,所以可以在宽屏状态下显示三栏也很大气.

下面引用一下css手册中float属性的说明:

语法:float：none | left | right

默认值:none

取值:

none:设置对象不浮动

left:设置对象浮在左边

right:设置对象浮在右边

Tags: float属性 ECSHOP模板

分享到：