CSS案例:建立有标志的网站导航栏菜单

2021-01-20 16:00 jianzhan

在我建立的每个互联网技术运用中,我都尝试防止建立彻底由照片构成的菜单。我认为,菜单系统软件中应当应用文本。这样做也会让菜单变得更整洁爽利、清楚和易读,无需考虑到运用程序流程怎样载入它,和网页页面变大的情况下也不容易失真等。也许这只是我的念头?可是大家不可以建立即漂亮又
在我建立的每个互联网技术运用中,我都尝试防止建立彻底由照片构成的菜单。我认为,菜单系统软件中应当应用文本。这样做也会让菜单变得更整洁爽利、清楚和易读,无需考虑到运用程序流程怎样载入它,和网页页面变大的情况下也不容易失真等。也许这只是我的念头?可是大家不可以建立即漂亮又功能强大的菜单吗?
下面是建立下面的有标志适用的导航栏菜单的编码和款式。

点一下这里 查询演试(在新对话框中开启). 基础标识
<!--navigation.html-->
<ul class="nav">
<li class="home"><a href="#link">home</a></li>
<li class="about"><a href="#link">about</a></li>
<li class="work"><a href="#link">work</a></li>
</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;}
.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.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;}
.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;}
在更细致的网站制作中,菜单会变的更多的款式来适用。公平公正的说,假如你想应用1款特殊的字体样式——客观事实上非常少有网站容许这样做——那末你就必须应用照片、Flash或1些魔法。最终,尽量维持易用性是是非非常关键的。
学习培训的最好方法是训练,试着吧标志挪动到文本的后边,或建立1个有标志的竖直导航栏菜单系统软件。
--------------------------------------------------------------------------------
神飞觉得,实际上这是1个很简易的实例教程,属于新手入门级別的,沒有甚么高級的技术性,只是出示了1个制做带标志的水平导航栏菜单的方式。从网站的特性上来讲,这样做其实不是很好,如今最强烈推荐的方式是CSS Sprite,便是将用到的那些照片放到1个照片文档中,随后根据background-position来各自启用。此外,针对应用独特文本的状况,如今的状况有了1点小改观,便是CSS3早已刚开始适用网站的嵌入字体样式了。