0

見ましたが、適切な答えが見つかりませんでした。

私の質問は簡単です: 成功せずに浮かんでいます。

ここにページがあります: http://www.linguashop.com/course/classic.php

左側の赤いボックスは左にフロートし、グレーボックスとメニューは右側に表示されます。

ここに画像の説明を入力

私が使用しているCSSは以下のとおりです。

.logo2013,      
.logo2013 a     {margin:0;width:220px;height:120px;}

.logo2013   {float:left;}

.logo2013   {border:1px solid #f00; border-top-left-radius: 10px; }

.logo2013 a     {display:block;text-indent:-9999px;}

.greybanner2013 {height:91px; line-height:1; background:#f7f6f2 left top;}  
.greybanner2013 {border:1px solid #ddd; border-top-right-radius: 10px;}

.greybanner2013 .fontsize32 h2 {padding-top:5px; font-size:32px;color:#777;font-weight:bold; margin:0; margin-left: 20px; }

.greybanner2013 .foreign {font-size:32px;color:#FF9300;font-weight:bold; display:inline; margin:0; margin-left: 20px; padding:0; }

.greybanner2013 .translation {font-size:28px;color:#AAA;font-weight:normal; display:inline; margin-left:  10px; }

/*menu*/

.nav2013 {height:28px; background-color:#787065; border:1px solid #ccc; }

.nav2013 ul {/*float:right;*/ list-style:none;margin:4px 0;padding:0}

.nav2013 li {float:left;padding:0 24px 0 22px;margin:0; right top no-repeat*/}

.nav2013 li a {font-family:Verdana,Arial,SunSans-Regular,Sans-Serif; display:block;color:#ebeae8;text-decoration:none;font-size:12px; font-weight:bold; }

.nav2013 li:last-child {padding-right:15px;background:none}

どんな洞察も大歓迎です！

デビッド

4

1 に答える 1

1

これは私が見ているものです ここに画像の説明を入力

赤いボックスをずっと左にフロートさせたい場合;

logo2013次に、直下に追加しますbanner2013

これを作成します

ここに画像の説明を入力

アップデート

あなたの問題は、左上隅の境界線の半径だと思います。これで修正されるはずです。

これを追加.greybanner2013

border-top-left-radius:10px;

そこに置いたロゴは、その後ろの灰色の領域を覆うことができるような境界線の半径を持っています. 実際に赤いボックスを左に浮かせて右に固定し、画面の中央に保持するには、もう少し作業が必要で、おそらく html と css をかなり変更する必要があります。

logo2013クラスの背景色をに設定するwhiteと、同様の効果が得られます。

于 2013-04-21T09:19:22.180 に答える