来一发Li的横向分列自顺应宽度成绩
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。尽人皆知，FF和OPERA即别的遵守CSS2尺度的扫瞄器因为版本的精益求精，早就撑持:
display:table
dispaly:table-cell
dispaly:table-row
dispaly:table-row-group
dispaly:table-column
dispaly:table-column-group
等属性。
(最少是FF1.0,OPERA7就可以撑持了，之前的就不太分明了)那还夷由甚么?入手下手下手吧(为了演示加了一些padding和border):
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>Normal</title><styletype="text/css"><!--*{margin:0px;padding:0px;}#d{display:table;margin:0auto;background:#0cf;padding:10px;width:80%;border:1pxsolid#f00;}#dul{display:table-row-group;}#dli{display:table-cell;list-style:none;border:1pxsolid#333;background:red;text-align:center;}--></style></head><body><divid="d"><ul><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li></ul></div></body></html>
运转代码复制代码另存代码保藏本页
IE不撑持该效果，FF和OPERA下看看。
下面的示例分离界说了
#d{
display:table;
}
#dul{
display:table-row-group;
}
#dli{
display:table-cell;
}那末它们在CSS2的款式里体现就分离相称于表格的
<tabel>
<tr>
<td>标签，如许下面第一个示例里的5个<li>就天然的被均分横向分列在#b和#bul里，统统都很一般，表格都是这么注释的。但是，仔细的伴侣又会想到另外一个成绩，当#d的宽度不克不及被所包括的#dli的节点数整除，#dli的宽度又是怎样均分#d的宽度呢？它在扫瞄器下宽度尺寸又是怎样体现的呢？为了申明成绩，从头界说一个不被#dli的节点数整除的#d的宽度，这里恣意给个799px，在FF/opera下测试看看:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>Normal</title><styletype="text/css"><!--*{margin:0px;padding:0px;}#d{display:table;margin:0auto;background:#0cf;padding:10px;width:799px;border:1pxsolid#f00;}#dul{display:table-row-group;}#dli{display:table-cell;list-style:none;border:1pxsolid#333;background:red;text-align:center;}--></style></head><body><divid="d"><ul><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li></ul></div><scripttype="text/javascript">vard=document.getElementById("d");varc=d.getElementsByTagName("li");varl=c.length;for(vari=0;i<l;i++)alert(c.offsetWidth)</script></body></html>
运转代码复制代码另存代码保藏本页
这个在IE下就不必测试了，我也没加非IE的判断，偷了个懒。
既然FF和OPERA都基于上述道理来注释这类相似表格的款式，IE又不撑持，何不为其设定一个不异的注释机制呢？
我们先来看看IE下我们所能自然的：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>Normal</title><styletype="text/css"><!--*{margin:0px;padding:0px;}body{text-align:center;}#d{display:table;margin:0auto;background:#0cf;padding:10px;width:799px;border:1pxsolid#f00;}#dul{display:table-row-group;}#dli{display:table-cell;list-style:none;_float:left;width:158px;border:1pxsolid#333;background:red;text-align:center;}--></style></head><body><divid="d"><ul><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li><listyle="width:157px">aaa</li></ul></div></body></html>
运转代码复制代码另存代码保藏本页
这里界说了#dli向左浮动，也分离界说了它们的宽度（注：这里由于设定了其border为1px，宽度就是158px了）。为了避免FF/OPERA辨认浮动，用了_float:left;
OK――这回能够在IE下测试了――相称完善！固然FF/OPERA下固然也一样到此，假如你以为成绩办理了，而且你平常也是这么做的――那末你如今能够封闭这个话题了，该忙甚么就忙甚么吧！
但是，成绩是当我们的设定#d的宽度为798px呢？――那再给倒数第二个#dli加个款式来设定宽度width:157px不就得了？那假如再从头设定#d的宽度为797px、796px……呢？（大概你计划完成一个页面后不再会动这些宽度尺寸了）但再贫苦点的是假如#dli的节点数必要调剂了――体现为我们在一样平常的网站开辟和保护中常常会增添或削减这类导航列表栏目，是不是还要从头盘算和分离设定这些#dli的宽度呢？
这不算很贫苦，我的数学还不至于那末低劣――大概你会说。
但真正贫苦的是：当我们在做一个按百分比来举行页面及横导游航的计划时，这些#dli的宽度又该怎样设定呢？仍是实例为王，上面只是对下面的示例做个小小的修改，还好是5个#dli节点，恰好每一个宽度是20％：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>Normal</title><styletype="text/css"><!--*{margin:0px;padding:0px;}body{text-align:center;}#d{display:table;margin:0auto;background:#0cf;padding:10px;width:80%;border:1pxsolid#f00;}#dul{display:table-row-group;}#dli{display:table-cell;list-style:none;_float:left;width:20%;border:1pxsolid#333;background:red;text-align:center;}--></style></head><body><divid="d"><ul><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li><li>aaa</li></ul></div></body></html>
运转代码复制代码另存代码保藏本页
测试仿佛也很不错，仿佛没甚么不快意的中央（大概在有些呆板上会折行）。再调剂一下分辩率看看――仍是挺好的啊（大概在有些呆板上会折行）！那末你在尝尝减少IE窗口（不是最小化就任务栏），假如仍是一般的话（信任有些伴侣的导航效果已入手下手呈现折行了）――我会有举措让你懊丧的把你的鼠标放在减少后的IE窗口的右侧框上，横向渐渐渐渐拖动缩放IE的窗口――不必多说，良多伴侣一定早已分明这傍边的缘由，这里乱幌轮饕钦攵砸恍┎惶靼椎男氯耍先司秃雎哉舛伟杉虻ニ狄幌拢
上例中设定的#d的百分比宽度为80%，那末这个宽度天然会跟着IE窗口巨细的改动而改动，假如调剂后的IE窗口为999，那末这时候这个#d的实践宽度为792，这个宽度天然不克不及被#dli的节点数整除，也就是20%宽度不为整数（扫瞄器显现的最小单元是1象素，不克不及再分了，多是四舍五进），很天然就会呈现#dli的宽度和年夜于#d的实践宽度而招致折行征象了。
天哪！差点忘了，下面#dli界说了border为1px，则#dli的宽度总和为100%+10px了，赶忙往失落再尝尝――这回仿佛能够了，再也没有呈现下面的征象，IE仿佛没有对#dli的实践宽度举行四舍五进算法。岂非这里就不克不及再分外设定#dli的border和padding了吗？
这还不算，最糟的是：
假如#dli的节点数为3/7/9/11……等等基本不克不及均分#d宽度的值，你又得分离设定每一个#dli的百分比，使它们的总和即是100%了。并且仍旧不克不及再分外设定#dli的border和padding
别的：在#d的宽度为流动尺寸下，设定的#dli为百分比时，偶然也会呈现一些你不想瞥见的成绩，信任良多伴侣也碰到过。不懂得的能够本人尝尝。
</p>
DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码CSS是CascadingstyleSheets的简称，中文译作“层叠样式表单”。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。 可以使用 CSS 检查工具进行设计。
页:
[1]