CSS를 사용하여 불규칙한 배경 이미지로 탐색 메뉴를 구현하는 방법에 대한 샘플 코드 공유
- 黄舟원래의
- 2017-07-19 15:13:291939검색
일반적으로 탐색 메뉴의 배경 이미지는 상대적으로 규칙적이지만 일반적으로 불규칙한 배경 이미지가 있는 탐색 모음도 많이 접하게 됩니다(예를 들어 마우스를 위로 이동하면 배경 이미지가 불규칙합니다. 이 예에서는 이 유형에 대해서만 설명합니다) , 아래 그림과 같이
(그림 1)
마우스를 위로 올리면 배경이 빨간색 화살표로 변하는데요, 얼핏 보면 별거 아닐 수도 있습니다. , 하지만 제가 그린 녹색 프레임 부분을 자세히 보시면 각 조각이 서로 연결되어 있고 연결이 끊기지 않는 것을 보실 수 있습니다. 일반적인 방법으로 수행하면 구현은 아래 그림과 같습니다. 효과:
(그림 2)
은 블록이 연결 해제되었음을 의미합니다.
<!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动！！！-->
<!--[if IE 6]>
<script src="js/ie_png.js" mce_src="js/ie_png.js">
</script>
<script type="text/javascript">
DD_belatedPNG.fix('.previous,img');
</script>
<![endif]--> <style type="text/css">body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;}body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
list-style:none;} body img{
border:none;}a{
color:#000;
border:0;
text-decoration:none;}a:hover{
color:#f00;
text-decoration:none;}#warp{
margin:20px auto;
width: 960px;}body{
background:url(img/bj.jpg) no-repeat center top #090909;}.nav{
background:url(img/nav_bj.png) right no-repeat;
_background:url(img/nav_bj.gif) right no-repeat;
height:47px;
width:638px;}.nav ul li{
float:left;
margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
display:inline;
width:104px;}.nav ul li a{
display:block;
color:#FFFFFF;
padding:7px 0px;
_padding:5px 0px 6px;
width:104px;
float:left;
text-align:center;
font-family:Microsoft YaHei !important;}.nav ul li a span{
display:block;}.nav ul li a:hover{
background:url(img/a_hover.png) no-repeat;
_background:url(img/a_hover.gif) no-repeat;
color:#fff;}.nav ul .home a:hover{
background:url(img/home_hover.png) 7px center no-repeat;
_background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body>
<p id="warp">
<p class="nav">
<ul>
<li class="home"><a href=""><span>Home</span>首页</a></li>
<li><a href=""><span>About</span>关于九弘</a></li>
<li><a href=""><span>Serve</span>服务项目</a></li>
<li><a href=""><span>Case</span>活动案例</a></li>
<li><a href=""><span>Information</span>公司动态</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>联系方式</a></li>
</ul>
</p>
</p></body></html>이 효과를 구현하는데 가장 중요한 부분은 "li"의 왼쪽 및 오른쪽 여백 값을 음수로 설정한 다음 "li"와 "의 너비를 설정하는 것입니다. a"는 동일합니다. "a"의 너비는 고정되어 있지만 "li"의 왼쪽과 오른쪽은 여백으로 인해 줄어듭니다.
위 내용은 CSS를 사용하여 불규칙한 배경 이미지로 탐색 메뉴를 구현하는 방법에 대한 샘플 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.