Home >Web Front-end >HTML Tutorial >CSS implements menu bar production, the mouse changes color_html/css_WEB-ITnose
CSS implements menu bar production, the mouse changes color_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:06:281347browse
CSS style is:
<style type="text/css"> #navigation { width:200px; font-family:Arial; } #navigation ul { list-style-type:none; /* 不显示项目符号*/ margin:0px; padding:0px; text-decoration:none; } #navigation li { border-bottom:1px solid #ED9F9F; /* 添加标签<li>的下划线*/ } #navigation li a { display:block; /* 区块显示*/ padding:5px 5px 5px 0.5em; text-decoration:none; border-left:12px solid #711515; /* 左边的粗红边*/ border-right:1px solid #711515; /* 右侧阴影*/ } #navigation li a:link,#navigation li a:visited /* 超链接正常状态、被访问过的状态*/ { background-color:#c11136; /* 设置背景色*/ color:#FFFFFF; /* 设置文字颜色*/ } #navigation li a:hover /*鼠标经过时*/ { background-color:#990020; /* 改变背景色*/ color:#ffff00; /* 改变文字颜色*/ } </style> HTML front-end code:
<body> <form id="form1" runat="server"> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Weather</a></li> <li><a href="#">Contact Me</a></li> </ul> </div> </form></body>Initial effect:
Mouse over effect:
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