1

編集：

ティムからのコードを使用し、それは機能しました!!! 私が持っている唯一の質問は、ヘッダーを本体の他の部分から独立させ、テンプレート画像のように上部と側面からパディングせずに画面全体にストレッチする方法です。

これがデザインテンプレートです： デザインテンプレート

更新されたコード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

私はティムに100％同意します。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;
}

いずれにせよ、安全のために、これらの2行を追加しても問題はありません。

于 2013-03-27T01:52:09.150 に答える
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 に答える