Html 带角图像的破碎CSS框_Html_Css

Html 带角图像的破碎CSS框

html css

Html 带角图像的破碎CSS框,html,css,Html,Css,编辑：使用了Tim的代码，它成功了！！！我唯一的问题是，如何使我的标题独立于身体的其他部分，并像模板图像一样在屏幕上伸展，而不从顶部和侧面进行任何填充以下是设计模板：以下是更新的html+css代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

编辑：

使用了Tim的代码，它成功了！！！我唯一的问题是，如何使我的标题独立于身体的其他部分，并像模板图像一样在屏幕上伸展，而不从顶部和侧面进行任何填充

以下是设计模板：

以下是更新的html+css代码：

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Rounded Corner Tutorial</title>
            <style type="text/css">
            body{padding: 10px; background-color: #e8e8e8; font-family: Arial, Helvetica, sans-serif; font-size:12px;}
            h1{padding: 0px; margin: 0px;}

            #container{

                    margin:0px auto;
                    border:0px solid #bbb;
                    padding:0px;
                    }
            .white-box{width: 180px; margin: 0px;}


            #main-header {
                border:1px solid #bbb;
                height:80px;
                padding:10px;
                background:#FFF
            }

            #main-content {
                margin-top:10px;
                padding-bottom:10px;
            }

            #main-body {
                margin-left:10px;
                width:666px;
                height:150px;
            }

            #main-footer {

                margin-top:10px;
                margin-bottom:10px;
            padding:10px;
            border:1px solid #bbb;

            }   


            .box {
                padding: 8px;
                border: 1px solid silver;
                -moz-border-radius: 8px;
                -o-border-radius: 8px;
                -webkit-border-radius: 5px;
                border-radius: 8px;
                background-color: #fff;
            }

            .box1 {
                width: 200px;
                float: left;
            }

            .box2 {
                margin-left: 224px; 
            }


            </style>
            </head>
            <body>

            <div id="container">

            <div id="main-header">Main Header</div>
                <div id="main-content">

                    <div class="box box1">
                    left
                    </div>

                    <div class="box box2">
                    <p>Main Bbody 1...</p>
                    </div>

                </div>

                <div id="main-footer">Main Footer</div>
            </div>

            </body>
            </html>


圆角教程
正文{填充：10px；背景色：#e8e8e8；字体系列：Arial，Helvetica，无衬线；字体大小：12px；}
h1{填充：0px；边距：0px；}
#容器{
保证金：0px自动；
边框：0px实心#bbb；
填充：0px；
}
.白色框{宽度：180px；边距：0px；}
#主割台{
边框：1px实心#bbb；
高度：80px；
填充：10px；
背景：#FFF
}
#主要内容{
边缘顶部：10px；
垫底：10px；
}
#主体{
左边距：10px；
宽度：666px；
高度：150像素；
}
#主页脚{
边缘顶部：10px；
边缘底部：10px；
填充：10px；
边框：1px实心#bbb；
}   
.盒子{
填充：8px；
边框：1px纯银；
-moz边界半径：8px；
-o-边界半径：8px；
-webkit边界半径：5px；
边界半径：8px；
背景色：#fff；
}
.box1{
宽度：200px；
浮动：左；
}
.box2{
左边距：224px；
}
主割台
左边
主体1
主页脚

使用

边界半径

并丢弃图像。它将使您的生活更加轻松，并在高像素密度的显示器上显示清晰（与GIF不同）

演示：
浏览器支持：
更多示例：

重要部分

.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 8px; /* older versions of FF */
    border-radius: 8px; /* IE9+, Webkit, etc. */
    background-color: #fff;
}

所有CSS

我创建了一个粗略的CSS样式表来匹配您的模板

body { 
    background-color: #eee; 
}

.box {
    padding: 8px;
    border: 1px solid silver;
    -moz-border-radius: 8px;
    border-radius: 8px;
    background-color: #fff;
}

.box1 {
    width: 200px;
    float: left;
}

.box2 {
    margin-left: 224px;    
}

HTML

<div class="box box1">
    left
</div>

<div class="box box2">
    right
</div>


左边
正确的

我百分之百同意蒂姆的意见。我不确定现在是否有必要使用CSS3，但在过去，为了确保跨浏览器兼容性，除了border radius之外，您还需要为Mozilla和Safari/iPhone浏览器编写额外的代码：

.box {
    padding: 8px;
    border: 1px solid silver;
    border-radius: 8px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 5px;
    background-color: #fff;
}

不管怎样，为了安全起见，添加这两行代码都没有坏处。

我有一个建议代码，may可以解决您的问题：

.your_css_rounded_column {
   border: 1px solid #cdcdcd;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    -webkit-border-radius: 5px;
    background-color: #fff;
}

检查这把小提琴：

如果我得到了你想要达到的目标，你就要制作圆角矩形。如果是这样，就不需要使用精灵了。尝试CSS3

边界半径

属性。我想如果你使用的是旧浏览器，你需要这些。我现在正在使用一个旧的firefox浏览器。Tim的fiddle并不难说出有多少人仍在使用旧版本的FF，所以我更新了我的示例。基于Webkit的浏览器已经运行了相当长的一段时间。请注意，标准属性

边框半径

应包含在任何特定于供应商的前缀之后。谢谢，您的示例运行良好！唯一的问题是头球没有拉伤。。。（请参阅我更新的帖子）一种方法：。我去掉了

主体的边距和填充物

并将标题放在容器外面。蒂姆，我不想再打扰你了。。。我喜欢当浏览器winow扩展时，右边的框是如何展开的。当浏览器窗口缩小到左侧时，有没有其他方法可以阻止右框（比如900px）的调整？