zoukankan      html  css  js  c++  java
  • css 圆角相框

    文件都在附件,下面是代码:

    代码
    <!DOCTYPE html PUBLIC "./W3./DTD HTML 4.01 Transitiona./EN" "http./www.w3.org/TR/html4/loose.dtd">
    <html>
        
    <head>
            
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            
    <meta http-equiv="Content-Language" content="utf-8"/>
            
    <title>Web Site</title>
            
    <!--css 圆角相框 
                测试通过Firefox3.68 IE6.7.8
                作者:lonely 
                最大支持:宽450 高:560 
                最小支持:宽:50 高50 
                需要其他高度请自己修改图片并调整以下CSS参数,PSD背景在附件
                rudblbg和rudbrbg 背景直接用bottom会向下偏离8个像素左右,原因不详,知道的告诉下
            
    -->
        
    </head>
        
    <body>
            
    <style>
                .rudallbg
    {
                    float
    :left;
                    width
    :100px;
                
    }
                .rudtlbg
    {
                    overflow
    :hidden;
                    float
    :left;
                    width
    :84%;
                    height
    :8px;
                    background
    :url(./rubbg.png) left top no-repeat;
                
    }
                .rudtrbg
    {
                    overflow
    :hidden;
                    float
    :right;
                    width
    :16%;
                    height
    :8px;
                    background
    :url(./rubbg.png) right top no-repeat;
                
    }
                .rudccbg
    {
                    padding
    :0px 0px 0px 8px;/*不能左右为8px,当插入图片时候IE6撑开了,可恶的IE6,还我浪费了2个多小时,这下完美解决了*/
                    overflow
    :hidden;
                    height
    :100%;
                    background
    :url(./rubbg.png) left  -7px no-repeat;
                    border-right
    :1px solid #ccc;
                
    }
                .rudblbg
    {
                    overflow
    :hidden;
                    float
    :left;
                    width
    :84%;
                    height
    :8px;
                    background
    :url(./rubbg.png) left -569px no-repeat;
                
    }
                .rudbrbg
    {
                    overflow
    :hidden;
                    float
    :right;
                    width
    :16%;
                    height
    :8px;
                    background
    :url(./rubbg.png) right -569px no-repeat;
                    background
    :url(./rubbg.png) right -569px no-repeat;
                
    }
            
    </style>
            
    <div class="rudallbg">
                
    <div class="rudtlbg"></div>
                
    <div class="rudtrbg"></div>
                
    <div class="rudccbg">
                    da fas df af df da fas df af dfda fas df af dfda fas df af dfda fas df af df
                    da fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af df
                    da fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af dfda fas df af df
                    da fas df af dfda fas df af dfda fas df af df
                
    </div>
                
    <div class="rudblbg"></div>
                
    <div class="rudbrbg"></div>
            
    </div>
        
    </body>
    </html>

    附件

  • 相关阅读:
    【转】关于html元素的disabled,readonly 的详细分析
    拦截过滤器、前端控制器和应用控制器
    【PHP设计模式】创建型之原型模式(Prototype)
    【PHP设计模式】创建型之抽象工厂(abstract factory)
    【PHP设计模式】值对象模式
    PHP基础知识系列:PHP5新特征
    JavaScript 设计模式系列:基础知识
    【PHP设计模式】结构型之享元模式(Flyweight)
    【PHP设计模式】行为型之职责链(Chain of Responsibleity)
    【PHP设计模式】结构型之代理(Proxy)
  • 原文地址:https://www.cnblogs.com/liushannet/p/1808751.html
Copyright © 2011-2022 走看看