设为首页收藏本站
开启辅助访问 切换到窄版

仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
仓酷云»社区 › 软件教程 Design › Dreamweav(DW) › DIV教程之第七天　横导游航菜单
返回列表 发新帖
查看: 1276|回复: 8
打印 上一主题 下一主题

[DIV+CSS] DIV教程之第七天　横导游航菜单

[复制链接]
分手快乐 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-1-16 10:33:57 | 显示全部楼层 回帖奖励 |倒序浏览 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有帐号？立即注册

x
增加了开发风险，一个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的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。
background, web标准, content, PUBLIC, border

相关帖子
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-5-12 08:05

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表