大发彩票首页
        大发彩票>前端开发>Css>

        Css

        【精编Css教程】7-横向导航菜单(2)

        来源:未知 作者:admin 时间:2015-10-30 16:51 点击:次

        二、 用图片美化的横向导航

        大发彩票 www.518it.com.cn 背景图片也是网页制作当中最常用的样式之一,运用好背景图片,可以使你的页面更加出色,更加人性化和更快的加载速度。下面还是用以前视频教程中的实例进行讲解。显示效果如下:

        用到三张图片,分别为当前状态,鼠标放上时样式,和默认样式用的图片:

        下面修改css样式,只截图了一张,设置方法相同:

        #menu { width:500px; height:28px; margin:0 auto; border-bottom:3px solid #E10001;}

        #menu ul { list-style: none; margin: 0px; padding: 0px; }

        #menu ul li { float:left; margin-left:2px;}

        #menu ul li a { display:block; width:87px; height:28px; line-height:28px; text-align:center; background:url(/upload/2010-08/17/091033_nav_bg2.gif) 0 0 no-repeat; font-size:14px;}

        #menu ul li a:hover { background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}

        #menu ul li a#current { background:url(/upload/2010-08/17/091033_nav_bg.gif) 0 0 no-repeat; font-weight:bold; color:#fff;}

        为了让用户知道当前所处的页面,做了一个当前页面的状态,把ID添加到相应的a上。

        三、 CSS Sprites技术

        CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积,减少对服务器的请求次数,提高效率。

        讲CSS Sprites之前,先把背景图片给搞清楚

        #menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; }

        css背景属性缩写后如上所示,#ccc表示背景色;url()里是背景图片路径;接下来的两个数值参数分别是左右和上下,第一个参数表示距左多少px,第二个参数表示距上多少,这和padding的简写方式是不 一样,一定不要弄混。另外再强调一点css中值为0可以不带单位,其它数值都必须带单位(line-height值为多少倍时,zoom,z-index除外);no-repeat表示背景图片向哪个方向重复,此时为不重复。

        还需说明一点的是定位图片位置的参数是以图片的左上角为原点的,理解了这些,CSS Sprites技术就基本上懂了,就是靠背景图片定位来实现的。把三张背景图片整合到一张上,如下图:

        公司业务:大发彩票,刷百度下拉,刷百度指数,虚拟主机租用

        如转载,请保留本文链接地址:http://www.518it.com.cn/Style/Css/1769/

        Loading......
        工作时间:

        AM 09:00 ~ 12:00

        PM 14:00 ~ 18:00

        联系方式:

        Tel 010-50933590

        Hp 18701620736

        设计优势

        独立的设计团队 带给您全新的视觉体验

        功能开发

        强大的技术实力,完成您想要的任何功能

        售后服务

        完善的售后服务,解决您在使用过程中遇到的问题

        Copyright © 2010 - 2018 北京顺晟科技发展有限公司 All Rights Reserved

        地址:北京市顺义区南法信政府府前街16号 炫立方 | TEL:010-50933590

        北京网站建设 | 北京网站设计 | 北京SEO公司

        大发彩票官网 | 大发彩票平台 |