2011-10-24 9 views
0

私はウェブデザインを初めて利用しています。私はページをここのようなものにしたいと思っています:http://www.456bereastreet.com/archive/200501/turning_a_list_into_a_navigation_bar ここには、すべてのコンテンツを保持する灰色の背景上に丸い四角形があります。これはどうすればいいですか?HTML/CSSでページオーバーザ背景効果を達成するにはどうすればよいですか?

答えて

1

これは、ページが現在使用している基本的なHTMLとCSSスタイルです。したがって、彼らは<div>にすべてのコンテンツをラップし、その特定のスタイルクラスをdivに適用しています。

HTML:

<body> 
    <div class="wrap"> 
    ...Content... 
    </div> 
</body> 

はCSS:

body { 
    min-width: 0; 
} 
body { 
    color: #333333; 
    font: 100%/1.4 Georgia,serif; 
    margin: 0 auto; 
    max-width: 100%; 
    min-width: 830px; 
    padding: 0; 
    width: 62em; 
} 
<!--wrap class css code--> 
.wrap { 
    -webkit-border-radius: 4px 4px 4px 4px; 
    -moz-border-radius: 4px 4px 4px 4px; 
    border-radius: 4px 4px 4px 4px; 
    -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); 
    -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1); 
    background: none repeat scroll 0 0 #FFFFF0; 
    margin: 16px; 
    padding: 10px 0 0; 
    position: relative; 
} 
+1

それを私にビート:( –

+1

は((古いwebkits用)WebKitの接頭辞や接頭辞なしで国境半径とボックスシャドウを忘れないでください最近のすべてのブラウザでは) –

+0

Richが話している追加のスタイルタグが追加されました。 – kafuchau

関連する問題