百度左右图片按钮的样式
2015-11-09 16:04
501 查看
CSS:
HTML:
经过本人加工现已可以使用,希望对大家有帮助
body { } .bg1:hover { background: #d5e0f3; } .bg2:hover { background: #d5e0f3; } .bg1 { top: -3px; position: absolute; left: 0; width: 70px; outline: 0; cursor: pointer; background: transparent; height: 100%; transition: background-color .2s ease-in; } .bg2 { top: -3px; position: absolute; right: 0; width: 70px; outline: 0; cursor: pointer; background: transparent; height: 100%; transition: background-color .2s ease-in; } .bg1 .jt1 { height: 72px; margin: -85px 0 0 -18px; width: 40px; top: 50%; left: 50%; position: absolute; background: url(../Images/slider_btn_icon_0624374.png) no-repeat 0 0; background-position: 0 -87px; margin-left: -26px; } .bg2 .jt2 { height: 72px; margin: -85px 0 0 -18px; width: 40px; top: 50%; left: 50%; position: absolute; background: url(../Images/slider_btn_icon_0624374.png) no-repeat 0 0; background-position: 2 6px; } .bg1:hover .jt1 { background-position: -46px -86px; } .bg2:hover .jt2 { background-position: -46px 0; } .center { position: relative; margin: 3px 70px; overflow: hidden; height: 100%; vertical-align: baseline; } .container { height: 100%; position: relative; }
HTML:
<Body> <div class="container"> <span class="bg1"> <span id="btnPrev" class="jt1" onclick="selectProvNode()"></span> </span> <div class="center" > <!--内容--> </div> <span class="bg2"> <span id="btnNext" class="jt2" onclick="selectNextNode()"></span> </span> </div> </Body>
经过本人加工现已可以使用,希望对大家有帮助
相关文章推荐
- CSS定位
- 容易忘的CSS总结前端项目中可能用到的CSS总结
- 几种常见的边框样式
- css3 渐变色彩(Gradient)
- TextView字体样式Spannable
- CSS:点击图片区域上传文件
- resize属性研究
- div+css布局
- css outline属性
- CSS优先级的详细解说
- css display属性详解
- Css3 display用法
- 关于css控制中文的一些技巧
- 一些CSS技巧
- CSS 之 Opacity多浏览器透明度兼容处理
- 深入解析CSS的display:inline-block属性的使用
- Css设计模式-理论篇之OOCSS、SMACSS与BEM
- 写给初学者css优先级问题
- 关于css3选择器的浏览器兼容性
- css设计中的不变与可变