《
使用CSS创建有图标的网站导航菜单》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/030233NR013.htm
--> [
网站建设之]使用CSS创建有图标的网站导航菜单
在我创建的每一个互联网运用中，我都试图防止创建完整由图片组成的菜单。在我看来，菜单体系中应当使用文字。这样做也会让菜单变得更清洁爽利、清楚和易读，不必斟酌利用程序如何读取它，以及页面放大的时候也不会失真等。或者这只是我的主意？然而咱们不能创建即难看又好用的菜单吗？
下面是创建下面的有图标支持的导航菜单的代码跟样式。
查看演示：
基础标签
<!--navigation.html-->
<ul class=",
使用CSS3实现鼠标悬停动画;nav">
<li class="home",
使用CSS+XHTML制作的下拉菜单(代码);><a href="#link">home</a></li>
<li class="about"><a href="#link">about</a></li>
<li class="work"><a href="#link">work</a>,
使用CSS 3新技术 完美实现圆角效果;</li>,
使用Combres合并对js、css文件的请求;
</ul>The CSS
/* style.css */
.nav {width:550px; height:50px; padding:0px 25px; margin:0px; background:url(img/bg.gif) repeat-x; border:1px solid #efefef,
你需要了解的21个CSS惊人技巧;}
.nav li {float:left; width:125px; height:50px; display:inline; padding:0px; margin:0px 25px 0px 0px,
你究竟要做什么样的网站？;}
li.home {background:url(img/nav-home.gif) top left no-repeat;}
li,
你知道CSS样式中“大于号”的作用吗.home:hover {background:url(img/nav-homeHover.gif) top left no-repeat;}
li.about {background:url(img/nav-about.gif) top left no-repeat;}
li.about:hover {background:url(img/nav-aboutHover.gif) top left no-repeat;}
li.work {background:url(img/nav-work.gif) top left no-repeat;}
li.work:hover {background:url(img/nav-workHover.gif) top left no-repeat,
你真的了解web标准margin吗;}
.nav li a {display:block; padding:15px 0px 0px 50px; color:#000; font-size:18px; font-family:arial; height:35px; text-decoration:none,
你的财宝在哪里 也谈网络时代的业余与专业;}
.nav li a:hover {color:#C00;}在更精致的
网站设计中，菜单会变的更多的款式来支撑。公正的说，假如你想使用一款特定的字体——事实上很少有网站容许这样做——那么你就须要应用图片、Flash或一些魔法。最后，尽可能坚持易用性是十分主要的,
你的网站真的值得提高排名吗。
学习的最佳方法是训练，试着吧图标挪动到文字的后面，或者创建一个有图标的垂直导航菜单系统。
神飞以为，实在这是一个很简略的教程，属于入门级别的，不什么高等的技巧，只是供给了一个制造带图标的程度导航菜单的办法。从网站的机能上来说，这样做并不是很好，当初最推举的方式是CSS Sprite，就是将用到的那些图片放到一个图片文件中，而后通过background-position来分辨调用。另外，对使用特别文字的情况，现在的情形有了一点小改观，就是CSS3已经开端支持网站的内嵌字体了。 Tag：网站导航 菜单 图标 创立 使用
(责任编辑：网站建设)
使用CSS创建有图标的网站导航菜单相关文章