div+css布局实例淘宝分析(一) |
|
| 作者：中企在线 时间：2009-6-6 14:08:07 |
|
|
我们看看原始图片
通过观察,我们把它分为如下图所示块
具体的HTML,DIV+CSS排版样式为
我们一行一行分析,
1.全部的代码均在一个DIV容器(我暂时这样称呼)Head里面,我们来看看Head的写法
#Head{
text-align:center;
}
为什么Head前面有一个#号呢?
而有的却是在前面加一个．比如．Head,有时候写css的时候干脆什么也不加,比如td,body,他们有什么区别,具体怎么用,如果仔细你就会发现在HTML代码的DIV容器里面,有的是<divid=Head></div>而有的是这样<divclass=HackBox></div>
从id和class字面上的意思,我们也已经了解了,id具有唯一性,而class是一个类,适用于可多次重复使用的容器,而前面什么也不带的,便是CSS里默认的通用于HTML代码的描叙,即对HTML里的代码起全局作用,比如td,便是对HTML表格里面的全部列起作用,text-align:center是指在此容器里面的文字全部居中对齐,我们注意到,行后面还有一个分号;,
语法text-align:left|right|center|justify
取值说明：
left :默认值。左对齐
right :右对齐
center :居中对齐
justify :两端对齐
2.HeadTop
#Head#HeadTop{
position:relative;
width:760px;
margin:10pxauto10px;
text-align:left;
}
为什么#HeadTop前面会有一个#Head?
我们发现#headTop是嵌套在#Head里面的,为了Head里面的设置在HeadTop里面同样生效,将HeadTop放在了Head后面
position:static|absolute|fixed|relative
取值：
static :默认值。无特殊定位，对象遵循HTML定位规则
absolute :将对象从文档流中拖出，使用left，right，top，bottom等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据body对象。而其层叠通过z-index属性定义
fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
relative :对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
width:auto|length
auto :默认值。无特殊定位，根据HTML定位规则分配
length :由浮点数字和单位标识符组成的长度值|百分数。百分数是基于父对象的宽度。不可为负数。可以用相对长度象素单位px或者绝对长度in等做单位(1in=2.54cm=25.4mm=72pt=6pc)
margin:10pxauto10px;
检索或设置对象四边的外补丁
如果提供全部四个参数值，将按上－右－下－左(顺时针方向)的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
text-align:left;
我们看到Head里面已经有设置文字对齐是居中的了,而这里又定义文字居左,那么到底文字怎么对齐呢?如果有相冲突的定义,CSS将按最近的一个定义来执行,这跟HTML中的是一样的,比如<fontcolor=red><fontcolor=green>我到底是什么颜色?</font></font>
3.
#Head#Logo{
width:240px;
height:31px;
float:left;
margin-left:2px;
}
width(宽度),height(高度)都不说了
float:none|left|right
取值：
none :默认值。对象不飘浮
left :文本流向对象的右边
right :文本流向对象的左边
翻译为漂浮,left说明是从左开始排列
margin-left:2px;相当于maign:0px;0px;0px;2px
这里Logo容器说明的是,从左开始排列,宽度为240px,高度为31px,左补丁(左边空余)2px宽
4.HeadNavBar左边导航条
#Head#HeadNavBar{
float:right;
clear:right;
background:url(images/header_mm_bk.gif)lefttopno-repeat;
width:510px;
}
clear:right;清除右浮动,说明右边不能再有容器
clear:none|left|right|both
background:url(images/header_mm_bk.gif)lefttopno-repeat;
(意思是背景图片左,上对齐,不重复)
background:background-color||background-image||background-repeat||background-attachment||background-position
background-color:silver;背景色
background-image:url(http://www.dayanmei.com/images/space.gif);
当同时存在背景图片和背景色时背景色将被覆盖
background-repeat:repeat|no-repeat|repeat-x|repeat-y
取值：
repeat :默认值。背景图像在纵向和横向上平铺
no-repeat :背景图像不平铺
repeat-x :背景图像仅在横向上平铺
repeat-y :背景图像仅在纵向上平铺
background-attachment:scroll|fixed
取值：
scroll :默认值。背景图像是随对象内容滚动
fixed :背景图像固定
background-position:length||length
background-position:position||position
取值：
length :百分数|由浮点数字和单位标识符组成的长度值。
position :top|center|bottom|left|center|right
整句的意思是宽度为510px象素的容器从右往左排列
5.
#Headul{
list-style-type:none;
margin:0;
padding:0;
}
list-style-type:none;
list-style:list-style-image||list-style-position||list-style-type
list-style-image:url(url);可以将列表样式改变为图片
list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none
取值：可以将列表改变为其他样式
disc :CSS1 默认值。实心圆
circle :CSS1 空心圆
square :CSS1 实心方块
decimal :CSS1 阿拉伯数字
lower-roman :CSS1 小写罗马数字
upper-roman :CSS1 大写罗马数字
lower-alpha :CSS1 小写英文字母
upper-alpha :CSS1 大写英文字母
none :CSS1 不使用项目符号
6.
#Head#HeadNavBarli{
float:left;
height:31px;
background:url(images/header_mm_sep.gif)leftcenterno-repeat;
display:inline;
}
display:inline;内联对象的默认值。将对象强制作为内联对象呈递，从对象中删除行(显示在行内,超出的将不显示)
display:block|none|inline|inline-block
7.
#Head#HeadNavBarli.NoSep{
background:none;
margin-left:5px;
}
当列表区块内标志类为NoSep时,没有背景色background:url(images/header_mm_sep.gif)leftcenterno-repeat;,并且左补丁为5px
8.#MyTaoBao{
padding-left:14px!important;
margin-left:9px!important;
margin-left:4px;
background:transparenturl(images/header_mm_mytb_icon.gif)no-repeatleftcenter;
}
padding:lenth;内补丁,用法参考margin,
padding-left:14px;是指左边空余14px的值,这空余是用来放置居左中的背景图片的
!important;提升指定样式规则的应用优先权。
9.设置列表内的链接样式
#Head#HeadNavBarlia{
display:block;
padding:06px07px;
float:left;
height:31px;
line-height:31px;
color:#0f3a66;
| |
