老王前端HTML课后练习第11课—CSS图片展示说明

先来看看内容部分效果演示，做一个选项卡内容 涉及到的透明度、定位都在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