|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
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;}
经由上边的修正，如今的用户查验是否是加倍友爱了呢。
这里的#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;}
<!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;}
还需申明一点的是定位图片地位的参数是以图片的左上角为原点的，了解了这些，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的时候无从下手，我现在向大家推荐最著名的盒子模型，我也是看了这个模型后一下子就开窍了。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:33:57
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-2-12 22:04:53