HTML5基础加强css样式篇(target目标伪类选择器应用)(十)
2017-03-15 15:50
633 查看
1.静态界面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html body{ margin: 0px; padding: 0px; } #bottomimg{ float: left; } #bottomimg>li{ float: left; } #bottomimg img{ width: 121.6px; display: inline-block; } #topimg{ position: relative; height: 454px; } #topimg >li{ position: absolute; top: 0px; left: 0px; } ul{ margin: 0px; padding: 0px; list-style: none; } #body{ width: 730px; } </style> </head> <body> <div id="body"> <ul id="topimg"> <li><img src="img/jd001.jpg" /></li> <li><img src="img/jd002.jpg" /></li> <li><img src="img/jd003.jpg" /></li> <li><img src="img/jd004.jpg" /></li> <li><img src="img/jd005.jpg" /></li> <li><img src="img/jd006.jpg" /></li> </ul> <ul id="bottomimg"> <li><img src="img/jd001.jpg" /></li> <li><img src="img/jd002.jpg" /></li> <li><img src="img/jd003.jpg" /></li> <li><img src="img/jd004.jpg" /></li> <li><img src="img/jd005.jpg" /></li> <li><img src="img/jd006.jpg" /></li> </ul> </div> </body> </html>
使用taget完成功能:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html body{ margin: 0px; padding: 0px; } #bottomimg{ float: left; } #bottomimg>li{ float: left; } #bottomimg img{ width: 121.6px; display: inline-block; } #topimg{ position: relative; height: 454px; } #topimg >li{ position: absolute; top: 0px; left: 0px; } ul{ margin: 0px; padding: 0px; list-style: none; } #body{ width: 730px; } #topimg>:target{ z-index: 2; }li #img01{ z-index: 1; } </style> </head> <body> <div id="body"> <ul id="topimg"> <li id="img01"><img src="img/jd001.jpg" /></li> <li id="img02"><img src="img/jd002.jpg" /></li> <li id="img03"><img src="img/jd003.jpg" /></li> <li id="img04"><img src="img/jd004.jpg" /></li> <li id="img05"><img src="img/jd005.jpg" /></li> <li id="img06"><img src="img/jd006.jpg" /></li> </ul> <ul id="bottomimg"> <li><a href="#img01"><img src="img/jd001.jpg" /></a></li> <li><a href="#img02"><img src="img/jd002.jpg" /></a></li> <li><a href="#img03"><img src="img/jd003.jpg" /></a></li> <li><a href="#img04"><img src="img/jd004.jpg" /></a></li> <li><a href="#img05"><img src="img/jd005.jpg" /></a></li> <li><a href="#img06"><img src="img/jd006.jpg" /></a></li> </ul> </div> </body> </html>
效果:点击切换 制作图片自己找
相关文章推荐
- HTML5基础加强css样式篇(target目标伪类选择器)(九)
- HTML5基础加强css样式篇(结构化伪类选择器:nth-of-type)(十一)
- HTML5基础加强css样式篇(结构化伪类选择器:nth-child和nth-of-type比较)(十二)
- HTML5基础加强css样式篇(checked状态伪类和清除默认样式)(十三)
- css3基础 :target 目标伪类选择器 简单示例
- HTML5基础加强css样式篇(table-cell应用,多列等宽)(五十)
- HTML5基础加强css样式篇(多媒体选择器)(十七)
- HTML5基础加强css样式篇(css属性transform 函数(2D)的scale(),transform-origin,skew(),translate(),rotate() )(二十四)
- HTML5基础加强css样式篇(line-height)(三)
- HTML5基础加强css样式篇(animation填充属性:animation-fill-mode,播放控制属性:animation-play-state,播放顺序设置,)(三十一)
- HTML5基础加强css样式篇(css过度效果:界面的浮层遮罩和消失)(十九)
- HTML5基础加强css样式篇(css过渡结束事件:transitionend)(二十三)
- HTML5基础加强css样式篇(text-align,text-decoration,text-indent,text-transform,letter-spacing,word-spacin)(四)
- HTML5基础加强css样式篇(css属性transform 函数(2D)时钟)(二十六)
- HTML5基础加强css样式篇(animation简写,控制多个动画,动画帧简写)(三十二)
- HTML5基础加强css样式篇(css过渡属性的隐式过渡问题)(二十二)
- HTML5基础加强css样式篇(标签自定义属性)(八)
- HTML5基础加强css样式篇(float补充,清除浮动解决高度塌陷问题,定位补充)(一)
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- HTML5基础加强css样式篇(属性选择器)(十四)