Home > Article > Web Front-end > CSS implements LI icon list menu with small pictures

CSS implements LI icon list menu with small pictures

不言Original: 2018-06-05 15:34:282361browse

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：CSS implements WEB standard menu effect code with inverted triangle markNext article：CSS implements WEB standard menu effect code with inverted triangle mark

See more

CSS implements LI icon list menu with small pictures

Related articles