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>

    附件

  • 相关阅读:
    Graphic
    GUI编程实战
    Swing 混合布局
    运算符与数据库函数
    mysq基础操作
    mysql常见问题处理
    static 与final abstract关键字
    JAVA面试
    Swing
    AWT的应用
  • 原文地址:https://www.cnblogs.com/liushannet/p/1808751.html
Copyright © 2011-2022 走看看