先来看看内容部分效果演示,做一个选项卡内容 涉及到的透明度、定位都在11节的内容中有讲解:
先看看DIV部分内容,主要用的UL li多的而布局,后面加上两个的A标签做两个小按钮
<div id="box"> <!--最顶上的文字标题--> <div class="top"> <p class="p1">潭州热点</p> <p class="p2">猜你喜欢</p> </div> <!--中间图片部分--> <ul> <li> <img src="images/demo1/1.png" /> <p>潭州建筑装饰学院</p> </li> <li> <img src="images/demo1/2.png" /> <p>潭州2016年设计大赛</p> </li> <li> <img src="images/demo1/3.png" /> <p>潭州游戏设计风暴</p> </li> <li> <img src="images/demo1/4.png" /> <p>谁是潭州最帅老师</p> </li> <li> <img src="images/demo1/5.png" /> <p>职场人高薪就职之道</p> </li> </ul> <!--左右两边的箭头--> <a href="#" class="left"></a> <a href="#" class="right"></a>
下面的是css叠层样式修饰内容:
里面有部分注释,有说明
a{text-decoration:none;} img{border:none;} #box{ position:relative; width:1000px; height:200px; margin:60px auto; } /*最顶上的文字标题*/ #box .top{ width:1000px; height:40px; border-left:1px solid #aaa; } #box .top p{ float:left; font-size:14px; color:#000; } #box .top .p1{ border-top:4px solid #060; height:30px; padding:6px 10px 0px 10px; } #box .top .p2{ width:912px; height:28px; border:1px solid #aaa; padding:10px 0px 0px 10px; } /*中间图片的部分*/ #box ul{ width:100%; height:132px; margin-top:20px; } #box ul li{ position:relative; float:left; width:200px; height:132px; } #box ul li img{ position:absolute; top:0px; left:0px; display:block; width:198px; height:130px; z-index:1; } /*下部文字描述*/ #box ul li p{ position:absolute; bottom:1px; left:0px; width:198px; height:30px; line-height:30px; color:#fff; font-size:14px; text-align:center; background:rgba(0,0,0,0.5); z-index:5;/*通过层级优先把P标记里面的文字放到上层*/ } #box ul li img:hover{ border:1px solid #9ac; top:-1px; left:-1px; }/*思路:定位以后改变图片让往左上角各走1px,就不会默认往右下方向走了, 默认对齐是左上角对齐,视觉效果就会往右下走*/ /*左右两边的箭头*/ #box a{ display:inline-block; width:30px; height:43px; } #box .left{ position:absolute; bottom:51px; left:0px; background:url("images/demo1/6.png")no-repeat; background-position:1px 0px; z-index:8; } #box .right{ position:absolute; bottom:51px; right:0px; background:url("images/demo1/6.png")no-repeat; background-position:-29px 0px; z-index:8; } #box .left:hover{ background-position:1px -43px; } #box .right:hover{ background-position:-29px -43px; }
里面用到的点就是主要是定位在同一个地方显示后,通过hover改变图片的边框内容
定位position:relative/ absolute
发表评论