1

编辑：

使用了 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>
4

3 回答 3

2

使用border-radius和丢弃图像。它会让你的生活更轻松，并且在高像素密度的显示器上看起来很清晰（不像 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>
于 2013-03-27T01:34:21.277 回答
0

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

.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;
}

检查这个小提琴：http: //jsfiddle.net/yYjrB/

于 2013-03-27T02:41:42.963 回答
0

我 100% 同意蒂姆。我不确定现在是否需要使用 CSS3，但在过去，为了确保跨浏览器兼容性，除了边框半径之外，您还需要 Mozilla 和 Safari/iPhone 浏览器的额外代码：

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

无论哪种方式，为了安全起见，添加这两条额外的行都没有什么坏处。

于 2013-03-27T01:52:09.150 回答