拖动门 圆角情况宽度和高宽比自融入

日期:2021-03-12 类型:科技新闻 

关键词:小程序开发者工具,小程序在线生成平台,小程序编辑,免费的小程序,微信小程序在哪里

第1张图用于高宽比自融入,第2张用于宽度自融入。假如感觉不足高或宽,能够改动照片。
完成的方式很简易,实际上便是套2层,在其中外层用长情况,里层用短情况盖住。拿高宽比自融入来讲,能够用1个div(用长情况居底铺)嵌套循环1个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>內容內容內容內容內容內容內容內容內容內容內容內容
內容內容內容內容內容內容內容內容內容內容內容內容
</p>
</div>

宽度自融入的圆角按钮原先是1样的,只但是是改为横向的:

拷贝编码
编码以下:

<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>3个字</span></li>
<li><span>6个字6个字</span></li>
</ul>