今天来学习CSS网页结构进门教程11：带以后标识的标签式横导游航图片丑化版 ...
最近在做一个魔术网的div+css切割，昨晚发现了长期以来一直无记录下来的问题！关于兼容IE跟FF的float属性。[*]
[*]
本站2010年9月新增《十天学会web尺度（div+css）》系列教程，接待进修！
固然完成了标签式导航，可是广场状的导航仿佛其实不可以适应如今的计划潮水，实在导航不但可使用css的色彩来界说，一样能够接纳经心计划的图片或别的元从来构建导航，在这里我们将入手下手改良导航的计划，使它成为加倍杰出的标签效果。
我们将思索往失落单一的方块状背景元素，利用带色采的圆角标签来完成我们的计划。不外从这个改善中可以体味到css计划的另外一个上风，就是能够不必要修正布局代码，只必要修正款式，即可以完成改善，以是这里能够间接看看css代码的计划：
<style>
body{background-color:#000000;}
#nav{height:30px;list-style:none;}
#navli{float:left;}
#navlia{color:#fff;text-decoration:none;padding-top:4px;display:block;width:118px;line-height:22px;height:24px;text-align:center;background:url(/uploadfile/200806/17/4C162031907.gif);margin-left:5px;font-size:14px;font-weight:bold;}
#navlia:hover{background:url(/uploadfile/200806/17/4C162031907.gif)left-42px;;color:#ffffff;}
#navlia#current{background:url(/uploadfile/200806/17/4C162031907.gif)left-84px;color:#fff;}
</style>
从以上代码能够看出，我们往失落了背景致的设定，给页面的body标签加上了玄色的背景，a工具被我们安排了从头制造的gif图片，包括一般、鼠标移上、以后页三种交互形态。可是你们会现，这三种形态的图片在一张上。为何呢？这里接纳软件里的一种计划体例，一方面利用图片办理，另外一方面在网页下载的时分只用下载一个图片就好了。而把这个图片设置为背景图片时只必要用css把持图片的地位就能够了，看来css功效真是太壮大了。
仅仅经由过程修正css代码，就改换了导航的表面，试想一下在年夜型网站的使用傍边，假如我们对某一个通用模块不太中意，也不用再往修正一切的页面了，只能修改款式就完成了。css真正让您的计划变得轻松起来！
2009-4-21注：很多伴侣关于背景图片的定位简单含混，这里再具体申明一下，url后的两个参数，第一个为摆布间隔，第二个为高低间隔，这点与padding和margin分歧。第一个参数能够设置为left,center,right，第二个参数可设置为top,center,bottom，分离暗示靠左、居中、靠右，顶部、居中和底部。也能够设置为详细数值，分离暗示在X轴和Y轴上挪动几px。假如不设置这两项的话，默许是lefttop。请看下图，默许背景图片以lefttop入手下手以四方一连情势放开的，重色部分暗示原始图，淡色暗示一连部分。三个背景图片给它定名为1、2、3，要定位到2的左上角，能够从坐标的中央向下-42px，也能够是84px的地位。要定位到3的左上角，能够从坐标中央向下-84px，也能够是42px。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><style>body{background-color:#000000;}#nav{height:30px;list-style:none;}#navli{float:left;}#navlia{color:#fff;text-decoration:none;padding-top:4px;display:block;width:118px;line-height:22px;height:24px;text-align:center;background:url(/uploadfile/200806/17/66191858519.gif);margin-left:5px;font-size:14px;font-weight:bold;}#navlia:hover{background:url(/uploadfile/200806/17/66191858519.gif)left-42px;color:#ffffff;}#navlia#current{background:url(/uploadfile/200806/17/66191858519.gif)left-84px;color:#fff;}</style></head><body><ulid="nav"><li><ahref="/index.asp">主页</a></li><li><aid="current"href="/Sort/List_4.html">DIV+CSS教程</a></li><li><ahref="/Sort/List_5.html">经常使用代码</a></li><li><ahref="/Sort/List_6.html">水晶图标</a></li><li><ahref="/Sort/List_7.html">幻灯图片</a></li><li><ahref="/Sort/List_10.html">软件下载</a></li><li><ahref="/css2/">CSS2.0有用手册</a></li></ul></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
切入正题，其实DIV+CSS正确的说法应该是XHTML+CSS，说成DIV的原因只是让它能更明确地和TABLE布局方法区分开来，并不是说一个页面里没有TABLE，而是在什么地方使用TABLE，你要认识到TABLE是表格，是存放数据用的，而不是用来布局的。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。
页:
[1]