zoukankan      html  css  js  c++  java
  • 滑动门圆角背景宽度和高度自适应

    第一张图用于高度自适应,第二张用于宽度自适应。如果觉得不够高或宽,可以修改图片。

    实现的方法很简单,其实就是套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>





  • 相关阅读:
    如何在帮助页面添加测试工具
    webAPI 自动生成帮助文档
    通过HttpClient来调用Web Api接口
    WebAPI请求
    WebAPI初探
    free-jqGrid
    更新的packages.config所有的软件包?
    winform 防止多開
    一个强大的LogParser的UI工具--logparserlizard简介
    python简单C/S模式示例
  • 原文地址:https://www.cnblogs.com/bianyuan/p/2356132.html
Copyright © 2011-2022 走看看