html滑动门怎么添加,实现滑动门的三种方法_html/css_WEB-ITnose

用float或inline-block使其宽度由内容撑开

.boxL{ display: inline-block; background: url('boxL.png') no-repeat left 0 ;}.boxR{ background: url('boxR.png') no-repeat right 0;}.box{ background: url('boxM.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0; margin: 0 8px;}

关于我们

两层嵌套

两层嵌套，文字只能写到最里面的div里，局限是文字最多只能到父级div的宽度，适用于图片比较小或者拓展要求小，比如按钮。

.boxR{ display: inline-block; background: url('boxR.png') no-repeat right 0;}.boxB{ background: url('boxB.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0 18px; margin-right: 8px;}

关于我们

绝对定位

用绝对定位做的滑动门有兼容性，因为在IE6下，绝对定位父级的宽度(高度)是奇数的话，元素的right(buttom)就会有1px的偏差，且无解。

.boxL{ position: absolute; top: 0; left: -9px; width: 9px; height: 31px; background: url('boxL.png') no-repeat right 0;}.boxR{ position: absolute; top: 0px; right: -9px; width: 9px; height: 31px; background: url('boxR.png') no-repeat right 0;}.box{ position: absolute; background: url('boxM.jpg') repeat-x; font: 14px/30px "宋体"; color: white; padding: 1px 10px 0; margin: 30px;}

关于我们

实现效果

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网