이 글에서는 입체감이 있는 수평 버튼 메뉴 효과를 구현하기 위한 CSS 코드를 주로 소개합니다. 이는 마우스가 버튼 위로 슬라이드될 때 버튼을 누르는 효과를 구현할 수 있으며 강력한 3D 입체감을 제공합니다. hover 속성을 기반으로 한 CSS 테두리 테두리. 필요하신 분들은 설정 스킬을 참고하시면 됩니다.
이 글에서는 CSS를 활용하여 3차원 가로 버튼 메뉴 효과 코드를 구현하는 예를 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
일반적으로 사용되는 CSS의 UL/LI 구조를 채택한 수평 및 3차원 CSS 버튼 메뉴로, 마우스를 놓았을 때 LI가 정의되어 있어 편리한 레이아웃을 가지고 있습니다. , 3차원 효과가 표시되고 전반적인 비전은 편안한 경험, 우수한 코드 호환성, 단순성 및 효율성입니다.
구체적인 코드는 다음과 같습니다.
<!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> #navigation { font-family: Arial, Helvetica, sans-serif; font-size: 9pt; } #navigation ul { list-style: none; margin: 0; padding: 0; padding-top: 4px; } #navigation li { display: inline; } #navigation a:link, #navigation a:visited { margin-right: 2px; padding: 3px 10px 2px 10px; color: #A62020; background-color: #FCE6EA; text-decoration: none; border-top: 1px solid #FFFFFF; border-left: 1px solid #FFFFFF; border-bottom: 1px solid #717171; border-right: 1px solid #717171; } #navigation a:hover { border-top: 1px solid #717171; border-left: 1px solid #717171; border-bottom: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; } </style> </head> <body id="contact"> <p id="navigation"> <ul> <li class="recipes"><a href="#">脚本之家</a></li> <li class="contact"><a href="#">脚本下载</a></li> <li class="articles"><a href="#">网页特效</a></li> <li class="articles"><a href="#">官方博客</a></li> <li class="articles"><a href="#">友情链接</a></li> <li class="buy"><a href="#">联系我们</a></li> </ul> </p> </body> </html>
위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!
관련 권장 사항:
CSS3을 사용하여 가로 및 세로 화면을 일치시키는 방법
위 내용은 CSS는 3차원 수평 버튼 메뉴 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!