-
DIV布局三注意
2009-08-11 22:18:59
随着互联网的发展，web2.0思想的漫延，业界对网页的设计（布局）需求越来越苛刻。网页的布局一般有两种方案：
1、表格布局（传统方案）
2、DIV布局（优化方案）
以下事件，不得不让我们去重视DIV布局的应用。
A、DreamWeaver8的可视化设计，实际上就是DIV+CSS布局方式。
（我们用DW对文字左对齐且加粗，DW会加上DIV标签，并用CSS来实现加粗，而不是用font标签）
B、微软最新开发IDE vs2005，默认的布局也是DIV+CSS布局方案，但它的DataList和GridView仍是用表格来实现了。
C、国外近70%以上的网站采用div布局开发，90%以上的新网站均是DIV布局。
D、国内越来越多的网站、软件均采用DIV布局来规划页面。
E、国内各大门户，如163、凤凰网、闪吧、闪客帝国等均是DIV布局。
DIV布局如此重要，为何在国内行动略慢呢？
原因1：DIV布局，以手写代码为主，主要是CSS，这样增加了美工从事DIV的难度。
原因2：DIV布局，本身属生前台的工作，程序员往往不与理采。
原因3：DIV布局，需要良好的html、css2.0基础。
原因4：DIV布局，IE、火狐对DIV盒子思想的执行标准不同，也增加了DIV的难度。
好，本文主要针对，你已经有了DIV布局的基础，使你的设计，如何能兼容主流浏览器，一般的教程上，书上，所载的DIV，仅仅是针对IE的，照上面去做，无疑是浪费时间、复而迷惑。
注意，以上三大事项，你的DIV布局，基本可以兼容IE和火狐。这里有一个很重要的原则，IE对DIV的解释比较松散一些，火狐比较严格一些，所以你写的DIV布局，也要严格一些。
就说这么多了，DIV布局，主要是css2.0“用来用去”，其思想是用div标签来作容器，用ul li来代码行和列，其它的细节，待于你自己去实践。 -
彻底弄懂CSS盒子模式之五
2009-08-11 22:15:01
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]一、实例实现功能介绍
本实例为一个栏目链接列表，鼠标移动到链接所在行，链接文本颜色会改变，同时会在链接右下侧显示一个与链接相干的信息面板，信息面板中 左边有一幅图片，图片右侧又有三项说明，它们分别是“歌名”、“歌手”、“介绍”。这个栏目被重定位到其它地方，效果、位置不会发生改变，全程只用 CSS+DIV实现，无任何脚本。
实例效果截图二、结构和样式代码
1．结构
<h3>最新单曲</h3>
<ul><li><a href="#">01 爱的文身 黄圣依<div><img src="http://imgcache.qq.com/music/photo/singer/54/
singerpic_5554_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>爱的文身</dd>
<dd><span>歌手:</span>黄圣依</dd>
<dd><span>介绍:</span>黄圣依唱片主打歌的确是她个人的内心写照，《爱的文身》由香港音乐大师金培达作曲，制作人陈少琪亲自填词。</dd>
</dl></div></a></li><li><a href="#">02 累了 阿信<div><img src="http://imgcache.qq.com/music/photo/singer/47/
singerpic_6547_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>累了</dd>
<dd><span>歌手:</span>阿信</dd>
<dd><span>介绍:</span>青春校园偶像剧----【熱情仲夏】片尾曲</dd>
</dl></div></a></li><li><a href="#">03 漫漫 慢慢 阿朵<div><img src="http://imgcache.qq.com/music/photo/singer/61/
singerpic_6361_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>漫漫 慢慢</dd>
<dd><span>歌手:</span>阿朵</dd>
<dd><span>介绍:</span>阿朵抢听版最新单曲《漫漫 慢慢》让你认识阿朵柔情的一面，展现阿朵百变的风格。</dd>
</dl></div></a></li><li><a href="#">04 我怀念的 孙燕姿<div><img src="http://imgcache.qq.com/music/photo/singer/9/
singerpic_109_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>我怀念的</dd>
<dd><span>歌手:</span>孙燕姿</dd>
<dd><span>介绍:</span>令人感同身受的抒情歌，在故事性的架构中，有着平凡但又能扣人心弦的情感，是一首高度共鸣的抒情歌。</dd>
</dl></div></a></li><li><a href="#">05 听,花期越来越近 后弦<div><img src="http://imgcache.qq.com/music/photo/singer/33/
singerpic_4733_0.jpg" alt="" />
<dl>
<dd><span>歌名:</span>花期越来越近</dd>
<dd><span>歌手:</span>后弦</dd>
<dd><span>介绍:</span>后弦参与《花开的声音》这个舞台剧里的一部分，邀请了后弦去演唱这首歌，此歌就是为舞台剧《花开的声音》而创作。</dd>
</dl></div></a></li></ul>
2．样式
*{
margin:0px;
padding:0px;
}
body {
margin:10px;
font-size: 13px;
}
a:link {
color: #666;
text-decoration: none;/*去除链接下划线*/
}
a:visited {
color: #666;
text-decoration: none;
}
a:hover {
color: #F90;
}
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;
}
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style.:none;/*去除列表样式，这对于标准浏览器很重要*/
}
a {
position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}
a div {
display: none;/*初始化信息面板不显示*/
}
a:hover {background:#fff;}/*IE7以下版本A状态伪类bug*/
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
left:150px;/*这是相对父级A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
width:80px;
height:80px;
border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
left:5px;
}
dl {
width: 160px;
float:right;
color: #999;
line-height:20px;
}
dl dd span {
font-weight: bold;
color: #639;
}三、分析实现方法
1．从上面的截图可以看到有一标题，标题下面是一个列表，所以很容易想到用<h>标签和无序列 表<ul><li>来做结构，标题是一块有背景的矩形块，文字白色，文字在矩形块中居中对齐，所以给<h>标签加个 宽度控制，最后为了让文本看起来在垂直方向上居中，再加个上边填充，所以用到下面样式：
h3 {
color: #FFF;
background-color: #F90;
width: 100px;
padding-top:3px;
text-align:center;
}2．下面是一个<ul>区块，我让它有一个上线框，这样与标题吻合在一起就做出了标题效果，而<ul>里面的<li>要有一条下划线，以形成一种分行效果，于是用到下边框，这里用到下面样式：
ul {
width: 300px;
border-top: 1px solid #F60;/*使其上边有一线条，与标题h3吻合*/
}
ul li {
padding:5px;
border-bottom: 1px solid #CCC;
list-style.:none;/*去除列表样式，这对于标准浏览器很重要*/
}3．列表中的链接文字点击效果就很简单了，大家自己看代码就行了，注意一点就是用到了下列一条样式：
a {
position: relative;/*设置其定位方法为相对定位，等一下内部信息面板就可以相对它定位*/
display:block;/*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/
}4．组织信息面板布局（实现的显示与隐藏效果放在后面再说）。信息面板为一个有浅蓝色背景和较深蓝色边框，并且有5px填充的盒子，盒子左边安排一 幅图片，图片大小用CSS控制，图片右边为一个有清晰数据结构列表，为了不出现与前边父级<li>的重复使用（不然等一下CSS样式控制会较 麻烦，因为内部的<li>会继承父级的样式，除非你又要新定义一则样式来逐一清除父级带给它的样式），所以我用 到<dl><dd>结构，只设定<dl>一个宽度，高度不设定，让其高度随说明文字增多而增高，同时不用绝对定位， 以便让它可以把父级撑高，然后并让它浮动到右边。而信息面板中的图片则用绝对定位方法把它定位在信息面板左上角，用5px偏移做到与父级5px填充一致， 这样看起来会自然点。当然也许你认为还有很多简单的方法可以实现，比如：让图片左浮动，而且再让<dl>浮动就行了，此方法测试表明在IE中 能正常显示，在FF中会有问题，因为我本意要让右边说明文字从上到下直列下来，当文字高过图片时，不能出现文字环绕图片的情况，恰好这种情况出现在FF中 （因为<dl>是在正常文本流中，而左侧图片又用了左浮动，所以问题出现），所以再想到让<dl>右浮动，但此时图片在正常文本 流中又不能放到左上方了，既然浮动会影响到<dl>内的文本流，那么就用绝对定位让其脱离正常文本流，但是问题又来了，这时它无法做到让父级 高度自适应。所以最后想到图片是固定在信息面板的左上角的，就把它绝对定位，再让<dl>浮动到右边去，结果发现这个方法还行，用到下面样 式：
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
left:150px;/*这是相对父级A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}
a img {
width:80px;
height:80px;
border:none;/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/
display:block;
position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/
top:5px;/*这里的5px是与信息面板大盒子的填充一样的*/
left:5px;
}
dl {
width: 160px;
float:right;
color: #999;
line-height:20px;
}
dl dd span {
font-weight: bold;
color: #639;
}5．实现隐藏与显示效果。这个隐藏显示效果是由鼠标触发的，所以要自然想到链接A（因为现在我们是用CSS实现，你不要想到用 javascript），并且要把信息面板安排在<a></a>内，因为到时就可以用CSS类型选择符配合样式的a:hover 伪类控制其显示和隐藏了。另外一个很重要的问题是IE7以下版本有个A状态伪类BUG，这个BUG使你本来看似没有问题的CSS设置在IE中之前被隐藏的 面板无法显示出来，这里用到一个常用的方法，加一条样式：a:hover {background:#fff;}以消除存在问题。
（1）让信息面板初始状态隐藏，用到样式：
a div {
display: none;/*初始化信息面板不显示*/
}（2）显示面板，用到样式：
a:hover div {
position: absolute;
padding:5px;
display:block;
width: 245px;/*只给出宽度，高让它随内容多少自动调整*/
left:150px;/*这是相对父级A的定位*/
top: 20px;
border: 1px solid rgb(91,185,233);
background-color: rgb(228,246,255);
z-index:999;/*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/
}四、收尾工作
最后整合一下样式和结构代码就完成了此实例的制作。最后再作一下设计思路扩展指引：像此类隐藏显示的CSS控制设计还可以用到边界的方法，即初始状 态用一个很大的margin负值把对象移出可视区域，鼠标响应时再重新定位对象回到正常该出现的位置。另外相信你看完本教程后，自己喜欢的漂亮链接提示面 板自己可以做出来了。
-
彻底弄懂CSS盒子模式之四
2009-08-11 22:09:38
-
彻底弄懂CSS盒子模式三(浮动的表演和清除的自述)
2009-08-11 22:06:26
-
彻底弄懂CSS盒子模式之二
2009-08-11 21:58:59
作者：唐国辉
实现原理动画演示：http://www.blueidea.com/articleimg/2007/03/4563/cssNav.swf
先看实现原理动画演示：
运行代码框
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]现在再看结果图：
这个导航栏中的链接用到了背景图片的切换效果，鼠标移到链接上导航栏背景图片和文字颜色都会跟着改变，整个导航用到下列4幅图片素材：
即链接不同状态的两张背景图片，每条导航左边的“勾月”图形，最外边大盒子1像素高的背景图片。
看了动画演示和结果图，也了解了用到那些素材，现在就请你带着一股好奇和我一起来完成这个导航栏吧，当做完这个导航栏之后你会发现原来DIV排版那么简单。愿你更有信心学好DIV排版！
先来分析一下这个导航栏要用到多少个盒子，在分析之前我们还是要形成一种思想：尽量减少和优化XHTML代码，让他们基本上都有语义。这个导航栏最 少的盒子实现是：最外边一个大盒子(ul)，这个盒子与1像素高的背景图片等宽，里面又有五个小盒子(li)分别装着每一个导航栏，这个盒子与“勾月”图 形等高，导航栏这个盒子里面又装着一个稍小的盒子(a)，这个盒子又装着一个黄色的修饰盒子(a的左边框，这里勉强理解为盒子，因为它不像一般的边框那么 细，在网页中看起来像个盒子)和一个有文字的链接盒子(a的内容)。
网页结构代码：
<ul id="nav">
<li>
<a href="#">彻底弄懂CSS盒子模式1</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式2</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式3</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式4</a>
</li>
<li>
<a href="#">彻底弄懂CSS盒子模式5</a>
</li>
</ul>1．现在正式开始做，做之前初始化一下各签标的边界和填充，这里用样式：
* {
margin: 0px;
padding: 0px;
}2．组装最外边的大盒子ul，宽200px,高为自动auto或者干脆不要，背景图片为bj.jpg，背景纵向重复，用<ul id=”nav”>方式引用样式，用到样式：
#nav {
background: url(bj.jpg) repeat-y;
width: 200px;
overflow: hidden;
}3．组装每条导航的盒子li，这个盒子与“勾月”图形等高，并把“勾月”图形以背景形式放在这个盒子的左边，并用15px的填充把盒子内容区块推向 正中合适位置（当然你也可以考虑给子级a指定边界属性来实现），并让这个盒子靠左边对齐（因为这个盒子的宽度比外边的大盒子小，如果相等则可以不用考虑对 齐方式），这里用到样式float的属性，本人没有写入样式中则取其默认值，样式代码如下：
#nav li {
background: url(lan.gif) no-repeat left center ;
height: 35px;
width: 190px;
padding-top:15px;
}
4． 组装链接盒子a，这里用到样式： display: block;让链接以块状方式呈现，并为链接安排背景图片，为了安全起见设置背景不重复，垂直居中（如果浏览器出错解释错误，而你的背景又不是纯色的，那 么盒子过大导致的背景重复将会影响网页美观），链接文字样式去除下划线，整个盒子右对齐，样式如下：#nav a {
5．组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可，样式代码如下：
background: url(lanbj2.gif) no-repeat left center;
text-decoration: none;
height: 20px;
width: 155px;
display: block;
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 9pt;
line-height: 20px;
color: #630;
}#nav a {
border-left:10px solid #f90;
}6．最后简单为鼠标移到链接上时，链接风格的改变指定一个样式：
#nav a:hover {
background-image: url(lanbj3.gif);
color: #FFFFFF;
}至此完成样式代码编写，上面已给出内容部分的结构代码，把它们结合到网页中就算是完成本次导航栏的制作。再次感谢本专栏斑竹blankzheng指点优化。
源文件打包下载 xhtml.rar
-
彻底弄懂CSS盒子模式一(DIV布局快速入门)
2009-08-11 21:54:44
-
css中的margin/padding/border属性图释
2009-08-11 21:29:02
这篇文章是转载的，对于理解css中的margin/padding/border这些概念很有帮助
CSS 中有个重要的概念，就是盒子模式 (Box model)。
胡戈的"一个馒头引发的血案"中有个圆圈套圆圈娱乐城，而这个盒子模式套用这句话来说，就是方块套方块。
先看看下面这个图，黑框包围的一个方块，就是一个盒子 (Box)。
盒子里由外至里依次是：
- margin 边距
- border 边框
- padding 间隙 (也有人称做补丁)
- content (内容，比如文本，图片等)
CSS 边距属性 (margin) 是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
CSS 边框属性 (border) 用来设定一个元素的边线。
CSS 间隙属性 (padding) 是用来设置元素内容到元素边框的距离。
CSS 背景属性指的是 content 和 padding 区域。
CSS 属性中的 width 和 height 指的是 content 区域的宽和高。
附：Internet Explorer 6 中的 CSS 增强功能
http://www.microsoft.com/china/MSDN/library/NetComm/webteam08062001.mspx?mfr=true
Internet Explorer 6 与更早版本间 width 和 height 属性计算方式的区别的图示说明
W3C组织建议把所有网页上的对像都放在一个盒(box)中，设 计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距 (padding)、边界(border)和边距(margin)。 对于初学者，经常会搞不清楚margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，希望便于你的理解和记忆。
- margin：层的边框以外留的空白
- background-color：背景颜色
- background-image：背景图片
- padding：层的边框到层的内容之间的空白
- border：边框
- content：内容
边框(border)边距(margin)和间隙(padding)属性的区别
边框属性(border)用来设定一个元素的边线。
边距属性(margin)是用来设置一个元素所占空间的边缘到相邻元素之间的距离。
间隙属性(padding)是用来设置元素内容到元素边界的距离。
这三个属性都属于CSS中box类型的属性。
下面这个示意图，很形象地体现了三者之间的区别。
margin语法：
margin : auto | length
说明：
检索或设置对象四边的外延边距。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上－下，第二个用于左－右。
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
Mozilla建议的CSS书写顺序/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
/* mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/
