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

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

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

关于我们

两层嵌套

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

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

关于我们

绝对定位

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

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

关于我们

实现效果

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

本文系统来源&＃xff1a;php中文网