滑动门-圆角背景宽度和高度自适应
滑动门-圆角背景宽度和高度自适应第一张图用于高度自适应，第二张用于宽度自适应。如果觉得不够高或宽，可以修改图片。
实现的方法很简单，其实就是套2层，其中外层用长背景，内层用短背景盖住。拿高度自适应来说，可以用一个div（用长背景居底铺）嵌套一个h2（用短背景居顶铺）标签。
圆角背景高度自适应：<style type="text/css">body,div,p,h2{ margin:0; padding:0;}div{width:262px; margin:100px auto 0; background:url(images/hua1.png) right bottom no-repeat; overflow:hidden;}h2{ width:262px; height:36px; text-indent:35px; background:url(images/hua1.png) left top no-repeat;}div p{ padding:10px;}</style><div> <h2>标题</h2> <p>内容内容内容内容内容内容内容内容内容内容内容内容<br />内容内容内容内容内容内容内容内容内容内容内容内容<br /></p></div>复制代码宽度自适应的圆角按钮原来是一样的，只不过是改成横向的：<style type="text/css">body,ul,li{ margin:0; padding:0;}ul{ list-style:none; overflow:hidden;}li{ float:left; display:inline; height:30px; margin-left:10px; background:url(images/hua2.png) right top no-repeat;}li span{ float:left; display:block; height:30px; padding:0 10px; line-height:30px; text-align:center; background:url(images/hua2.png) left bottom no-repeat;}</style><ul> <li><span>三个字</span></li> <li><span>六个字六个字</span></li></ul>复制代码 谢谢分享
页:
[1]