CSS implements LI icon list menu with small pictures-CSS Tutorial-php.cn

CSS implements LI icon list menu with small pictures

不言

Release： 2018-06-05 15:34:28

Original

2412 people have browsed it

This article mainly introduces the CSS implementation of the LI icon list menu with small pictures, which can realize the normal display of CSS icons and the functions of sliding over and clicking to display different colors, involving CSS for visited, hover and active, etc. For usage tips, friends in need can refer to

. The example in this article describes the CSS implementation of the LI icon list menu with small pictures. Share it with everyone for your reference. The details are as follows:

This is a Li list menu with small pictures, a vertical icon menu, and the color will change when the mouse is placed. The response to the mouse is in line with the user experience, and has good compatibility and simple code. , suitable for learning and using, a good example for CSS beginners.

The screenshot of the running effect is as follows:

The specific code is as follows:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS图标菜单</title>
<style>
ul#nav {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#nav a:link, #nav a:visited {
  display: block;
  width: 150px;
  padding: 10px 0 16px 32px;
  font: bold 80% Arial, Helvetica, sans-serif;
  color: #FF9900;
  background: url("images/peppers.gif") top left no-repeat;
  text-decoration: none;
}
#nav a:hover {
  background-position: 0 -69px;
  color: #B51032;
}
#nav a:active {
  background-position: 0 -138px;
  color: #006E01;
}
</style>
</head>
<body>
<ul id="nav">
 <li><a href="#">我们</a></li>
 <li><a href="#">联系我们</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">购买我们</a></li>
</ul>
</body>
</html>

Copy after login

Related recommendations:

##CSS3 to create rounded images and oval images

Using pure CSS to achieve dynamic text effects example

The above is the detailed content of CSS implements LI icon list menu with small pictures. For more information, please follow other related articles on the PHP Chinese website!