>웹 프론트엔드 >HTML 튜토리얼 >ul용 탐색 메뉴의 그래픽 및 텍스트 생성 예

ul용 탐색 메뉴의 그래픽 및 텍스트 생성 예

零下一度
零下一度원래의
2017-06-24 13:30:051535검색

首先上图,最终效果:

HTML代码:

 











< /div>

 

CSS代码:

 


#qwe{
너비: 200px;
글꼴 계열: "微软雅黑";
여백: 50 px ;
}
#qwe ul{
목록 스타일 유형: 없음;
패딩: 0;
}
#qwe ul li a{
텍스트 장식: 없음;
디스플레이: 블록;
너비: 200px;
높이: 25px;
테두리 왼쪽: 10px 솔리드 #333333;
테두리 오른쪽: 1px 솔리드 #666666;
테두리 하단: 1px 솔리드 #555555;
패딩 왼쪽: 3px;
margin-bottom: 1px;
}
#qwe ul li a:link,#qwe ul li a:visited{
색상: 진홍색;
배경색: #999999;
}
#qwe ul li a:hover{
색상: 녹색;
배경색: #777777;
}
#qwe ul li a:active{
색상: darkorange;
}

 

备注:其中包含伪类的设置

 

위 내용은 ul용 탐색 메뉴의 그래픽 및 텍스트 생성 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.