CSS는 3차원 수평 버튼 메뉴 효과를 구현합니다.-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS는 3차원 수평 버튼 메뉴 효과를 구현합니다.

不言

Jun 25, 2018 pm 05:05 PM

css수평의입체감

이 글에서는 입체감이 있는 수평 버튼 메뉴 효과를 구현하기 위한 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 중국어 홈페이지를 주목해주세요!

관련 기사