Create a website navigation menu with icons using CSS_html/css_WEB-ITnose

In every internet app I create, I try to avoid creating menus made entirely of images. In my opinion, text should be used in web menu systems. Doing this will also make the menu cleaner, clearer and easier to read, regardless of how the application reads it, and will not distort when the page is zoomed in. Maybe it's just me? But can’t we create menus that both look good and are easy to use?

Here is the code and style to create the icon-backed navigation menu below.

Basic tags

　<!--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;}

In more sophisticated website designs, the menu will change to more styles Come support. To be fair, if you want to use a specific font - which in fact very few websites allow - then you need to use images, Flash or some magic. Finally, it's important to keep it as easy to use as possible.

The best way to learn is to practice, try moving icons behind text, or create a vertical navigation menu system with icons.

Shenfei believes that this is actually a very simple tutorial, which is entry-level and has no advanced technology. It just provides a method for making a horizontal navigation menu with icons. In terms of website performance, this is not very good. The most recommended method now is CSS Sprite, which is to put the images used into an image file and then call them separately through background-position. In addition, regarding the use of special text, the current situation has changed slightly, that is, CSS3 has begun to support embedded fonts on websites.