仓酷云

标题: DIV教程之第七天　横导游航菜单 [打印本页]

作者: 分手快乐 时间: 2015-1-16 10:33
标题: DIV教程之第七天　横导游航菜单
增加了开发风险，一个css文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。

明天我们入手下手进修《十天学会web尺度(div+css)》的html列表，包括以下内容和常识点：

横向列表菜单
用图片丑化的横导游航
cssSprites

1、横向列表菜单

前边进修过纵导游航菜单，又进修了float属性，那末要完成横导游航菜单是否是很复杂了，只必要把li横向分列便可完成了。把第四节的代码拿过去间接用，修正后的代码以下：
<!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"/><styletype="text/css">body{font-family:Verdana;font-size:12px;line-height:1.5;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{border:1pxsolid#CCC;height:26px;background:#eee;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;padding:0px8px;height:26px;line-height:26px;}</style></head><body><divid="menu"><ul><li><ahref="#">首页</a></li><li><ahref="#">网页版式结构</a></li><li><ahref="#">div+css教程</a></li><li><ahref="#">div+css实例</a></li><li><ahref="#">经常使用代码</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转

最次要就是用float让li向右浮动后，完成横向分列，详细步骤不再赘述。之前很多伴侣发问怎样让它程度居中，实在很复杂，起首导航的宽度是流动的，然后设置margin:0auto;便可完成了

为了用户体验加倍友爱，仍是把a转换成块级元素，也能够给a设置背景致或背景图片来加倍美妙了，别的再设置鼠标放上时的款式。

#menu{width:370px;margin:0auto;border:1pxsolid#CCC;height:26px;background:#eee;}
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{float:left;}
#menuullia{display:block;padding:0px8px;height:26px;line-height:26px;float:left;}
#menuullia:hover{background:#333;color:#fff;}

学到这里，经常使用的款式年夜部分都触及到了，大概很多你还记不住，但最少混个脸熟。为了进步效力，倡议人人仍是手写代码，假如你还不克不及手写代码，就参考上边的款式，本人在css编纂器里设置吧，不再大批截图了。
经由上边的修正，如今的用户查验是否是加倍友爱了呢。

这里的#menuullia原本是能够不加float:left的，但IE6下在li没有设置宽度，#menuullia设置display:block的情形下，将会显现庞杂，以是必要在a上增添float:left来修改。万恶的IE6，怎样就减少不失落呢
2、用图片丑化的横导游航

背景图片也是网页制造傍边最经常使用的款式之一，使用好背景图片，可使你的页面加倍杰出，加倍人道化和更快的加载速率。上面仍是用之前视频教程中的实例举行解说，大概间接往看视频教程http://www.ckuyun.com/div_css/895.shtml。显现效果以下：

用到三张图片，分离为以后形态，鼠标放上时款式，和默许款式用的图片：

上面修正css款式，只截图了一张，设置办法不异：

#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}
#menuul{list-style:none;margin:0px;padding:0px;}
#menuulli{float:left;margin-left:2px;}
#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;background:url(/upload/2010-08/17/091033_nav_bg2.gif)00no-repeat;font-size:14px;}
#menuullia:hover{background:url(/upload/2010-08/17/091033_nav_bg3.gif)00no-repeat;}
#menuullia#current{background:url(/upload/2010-08/17/091033_nav_bg.gif)00no-repeat;font-weight:bold;color:#fff;}

为了让用户晓得以后所处的页面，做了一个以后页面的形态，把ID增加到响应的a上。
<!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"/><styletype="text/css">body{font-family:Verdana;font-size:12px;line-height:1.5;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;margin-left:2px;}#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;background:url(/upload/2010-08/17/091033_nav_bg2.gif)00no-repeat;font-size:14px;}#menuullia:hover{background:url(/upload/2010-08/17/091033_nav_bg3.gif)00no-repeat;}#menuullia#current{background:url(/upload/2010-08/17/091033_nav_bg1.gif)00no-repeat;font-weight:bold;color:#fff;}</style></head><body><divid="menu"><ul><li><aid="current"href="#">首页</a></li><li><ahref="#">网页版式</a></li><li><ahref="#">web教程</a></li><li><ahref="#">web实例</a></li><li><ahref="#">经常使用代码</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
3、CSSSprites手艺

CSSSprites在国际良多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再使用CSS的背景图片定位到要显现的地位。如许做能够削减文件体积，削减对服务器的哀求次数，进步效力。
讲CSSSprites之前，先把背景图片给弄分明

#menuullia{background:#cccurl(images/nav_bg2.gif)00no-repeat;}

css背景属性缩写后如上所示，#ccc暗示背景致；url（）里是背景图片路径；接上去的两个数值参数分离是摆布和高低，第一个参数暗示距左几px，第二个参数暗示距上几，这和padding的简写体例是不一样，必定不要弄混。别的再夸大一点css中值为0能够不带单元，别的数值都必需带单元（line-height值为几倍时，zoom，z-index除外）；no-repeat暗示背景图片向哪一个偏向反复，此时为不反复。
还需申明一点的是定位图片地位的参数是以图片的左上角为原点的，了解了这些，CSSSprites手艺就基础上懂了，就是靠背景图片定位来完成的。把三张背景图片整合到一张上，以下图：

<!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"/><styletype="text/css">body{font-family:Verdana;font-size:12px;line-height:1.5;}a{color:#000;text-decoration:none;}a:hover{color:#F00;}#menu{width:500px;height:28px;margin:0auto;border-bottom:3pxsolid#E10001;}#menuul{list-style:none;margin:0px;padding:0px;}#menuulli{float:left;margin-left:2px;}#menuullia{display:block;width:87px;height:28px;line-height:28px;text-align:center;background:url(/upload/2010-08/17/091033_nav_bg.gif)0-28pxno-repeat;font-size:14px;}#menuullia:hover{background:url(/upload/2010-08/17/091033_nav_bg.gif)0-56pxno-repeat;}#menuullia#current{background:url(/upload/2010-08/17/091033_nav_bg.gif)00no-repeat;font-weight:bold;color:#fff;}</style></head><body><divid="menu"><ul><li><aid="current"href="#">首页</a></li><li><ahref="#">网页版式</a></li><li><ahref="#">web教程</a></li><li><ahref="#">web实例</a></li><li><ahref="#">经常使用代码</a></li></ul></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转

CSSSprites具体的解说请参考视频教程：http://www.ckuyun.com/div_css/896.shtml
接下来是布局思维方式，可能大家在接触DIV+CSS的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。

作者: 蒙在股里 时间: 2015-1-16 20:00
标题: DIV教程之第七天　横导游航菜单
在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

作者: 冷月葬花魂 时间: 2015-1-18 22:58
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 只想知道 时间: 2015-1-27 22:13
以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。

作者: 简单生活 时间: 2015-2-5 15:44
是当我和赵丽芬崔明艳老师进行交流后，很快就了解了还不太清楚的内容和并不了解的知识（像布局表格、绘制布局单元格等）。

作者: 仓酷云 时间: 2015-2-12 22:04
还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

作者: 不帅 时间: 2015-3-3 11:04
我深感到交流的重要。善于交流的人才是善于学习的人。在整个技术的学习过程中，我总结了四大定律：兴趣、恒心、虚心、时间。

作者: 愤怒的大鸟 时间: 2015-3-18 12:47
Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

作者: 飘灵儿 时间: 2015-3-26 05:22
使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

欢迎光临仓酷云 (http://ckuyun.com/)