如何实现在div上做出凸出效果。。。的导航栏。

1 篇文章 0 订阅
1 篇文章 0 订阅

在div上实现凸出效果,如图:

代码 

css:

*{margin: 0; padding: 0;}
    .clickA{
      position: relative;
      display: inline-block;
      *display: inline;
      *zoom: 1;
      width: 100px;
      height: 100px;
      box-shadow: 0.3px 0.5px 0.1px 0.1px black;
      background-color: #eee;
    }
    .clickB{
      position: relative;
      display: inline-block;
      *display: inline;
      *zoom: 1;
    /*  width: 100px;
      height: 100px;
      box-shadow: 0.3px 0.5px 0.1px 0.1px black;
      background-color: #FAFAFA;*/
    }
    .skillImg img{
      position: relative;
      width: 81px;
      height: 78px;
      margin: 9px;
    }
    .skill{
      position: relative;
      width: 1300px;
      height: 200px;
      box-shadow: 0.1px 0.5px 0.3px black;
      background-color: #eee;
    }

html: 

<ul class="skillImg">
    <li onclick="clickC(1)" id="click1" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(2)" id="click2" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(3)" id="click3" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(4)" id="click4" class="clickA"><img src="img/test1.png" /></li>
    <li onclick="clickC(5)" id="click5" class="clickA"><img src="img/test1.png" /></li>
  </ul>
  <div class="skill">
  </div>

 js:

var min=1,max=5;
 window.onload=clickC;
 function clickC(obj){
  if(Number(obj)){
    min=obj;
  }
  for(var i=1;i<(max+1);i++){
    if(i==min){
      document.getElementById("click"+i).className="clickA";
    }else{
      document.getElementById("click"+i).className="clickB";
    }
  }
 }

 

 

 

也可以在table里实现。效果图:

代码

css:

table{
			width: 300px;
			height: 200px;
			background-color: #EEE0E5;
		}
		.aa{
			background-color: #EEE0E5;
			border-top: 1px solid green;
			border-left: 1px solid black;
			border-right: 1px solid black;
		}
		.bb{
			background-color: #d1d1d1;
			/*border-top: 1px solid green;
			border-left: 1px solid black;
			border-right: 1px solid black;*/			
		}

html:

<table border="0" cellpadding="20" cellspacing="0">
		<tr>
			<th class="aa" onclick="bbb(1)" id="ccc1">aa</th>
			<th class="aa" onclick="bbb(2)" id="ccc2">aa</th>
			<th class="aa" onclick="bbb(3)" id="ccc3">aa</th>
		</tr>
		<tr>
			<td rowspan="3">bb</td>
		</tr>
	</table>

js:

var min=1;
		window.onload=bbb;
		function bbb(obj){
			if (Number(obj)) {
				min=obj;
			}
			for(var i=1;i<4;i++){
				if (i==min) {
					document.getElementById("ccc"+i).className="aa";
				}else{
					document.getElementById("ccc"+i).className="bb";
				}
			}
		}

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值