> 웹 프론트엔드 > HTML 튜토리얼 > CSS实现菜单栏制作,鼠标经过变色_html/css_WEB-ITnose

CSS实现菜单栏制作,鼠标经过变色_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 12:06:28
원래의
1347명이 탐색했습니다.

CSS样式为:

 <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前台代码:

    
로그인 후 복사
初始效果:

鼠标经过效果:



원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿