css运用1张情况图制做导航栏菜单完成思路及编码

日期:2021-01-20 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

今日详细介绍的这款简易十分简易,运用1张情况照片来完成菜单的悬停情况。大家看下面的照片:


仅这1张照片,大家完成1个猖狂CSS菜单。并设定它们的悬停实际效果。大家该怎样做呢?看下面的照片:
 
这是1个示用意。底层是ul,这是1个器皿,大家将目录项li所有置入在其中。以便便捷表明,示用意中仅画了1个li。具体此例中有6个li,所有向左波动,完成猖狂排序。在li上面也有连接a标识。

大家最先梳理XHTML编码:
Example Source Code

拷贝编码
编码以下:

<ul id="mini_nav">
<li class="nav1"><a href="http://www.52css.com/" title="金融">金融</a></li>
<li class="nav2"><a href="http://www.52css.com/" title="商业服务">商业服务</a></li>
<li class="nav3"><a href="http://www.52css.com/" title="管理方法">管理方法</a></li>
<li class="nav4"><a href="http://www.52css.com/" title="领导者">领导者</a></li>
<li class="nav5"><a href="http://www.52css.com/" title="研究会">研究会</a></li>
<li class="nav6"><a href="http://www.52css.com/" title="blog">blog</a></li>
</ul>

大家下手写CSS前,先融合上面的示用意梳理1下思路:

1、最先必须让ul垂直居中,随后让nav变成ul的情况照片。这样便可以简化编号,无须给每个li或a再界定不一样的情况照片及其精准定位。
2、界定目录项li的宽度与高宽比,并向左波动。完成目录项的横向排序,构成1个横向的菜单布局。
3、界定目录项內部的连接a元素为块元素。并给a:hover1个情况照片,但不给他任何精准定位信息内容。
4、依据nav1~nav6各自界定a:hover情况下,情况照片的精准定位。
5、运用padding移除连接a元素的文本。使得在CSS合理时文本不能见,若出現CSS载入不成功或其它机器设备访问时,连接一样合理。

大家刚开始下手CSS撰写:
Example Source Code

拷贝编码
编码以下:

* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; margin:50px auto; background:url(nav.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px;}
#mini_nav li a:hover {background:url(nav.png) no-repeat;}

设定整体合理布局申明,外边距与内边距均为零,文本尺寸为12px,目录项预调标识为无(去掉目录项前面的小斑点)。
设定ID为mini_nav的UL宽度与高宽比,左右边距为50px,上下边距为auto,完成水平垂直居中对齐。设计方案情况照片为nav.png,精准定位于:0 0。
设定UL中的LI的款式,宽度与高宽比,向左波动。
设定LI中连接A元素的款式,最先将A元素变换为块元素,并设定其宽与高。
设定连接A元素的县停款式,界定情况照片nav.png,反复方法为不反复,不得出情况照片的精准定位信息内容。
此时大家能够看到的网页页面实际效果以下

 
但这时候候还不可以完成任何悬停互动实际效果,并且连接文本而坐落于大家的神觉范畴内。大家再次撰写CSS编码:
Example Source Code

拷贝编码
编码以下:

#mini_nav li.nav1 a:hover {background-position:0 ⑶8px;}
#mini_nav li.nav2 a:hover {background-position:⑹5px ⑶8px;}
#mini_nav li.nav3 a:hover {background-position:⑴30px ⑶8px;}
#mini_nav li.nav4 a:hover {background-position:⑴95px ⑶8px;}
#mini_nav li.nav5 a:hover {background-position:⑵60px ⑶8px;}
#mini_nav li.nav6 a:hover {background-position:⑶25px ⑶8px;}

这1段很相类,大家给不一样的连接(即nav1~nav6)设定了电脑鼠标悬停时的精准定位座标。
大家给前面的LI中连接A元素提升下列编码:
Example Source Code [www.52css.com]

拷贝编码
编码以下:

padding-top:40px; overflow:hidden;

上部的内边距为40px。外溢为掩藏。大家将连接文本提升上部的内边距,从而推到了下面,不能见的地区,以便使这样的方式取得成功,大家务必设定外溢为掩藏。