0

wordpressソフトウェアを使用して、ある政党（クライアントではなく、私自身の目的）のWebサイトを開発しています。テーマジャンキーでフレッシュライフというテーマを修正しています。実際、私はフロント エンドの開発者ではありませんが、政党の旗に一致するテーマ スタイルを変更するために最大限の努力を払っています。

まず、スタイルを変更している Web サイトはwww.ysrcong.comです。政党旗の URL はhttp://c.searchandhra.com/1/YSR%20Cong%20Flag.jpgです。

Web ページの左側の部分の背景色を 2266BB 、Web ページの右側の部分を 0FBD60 、ページの中央部分を白色で配置しようとしています。Web サイトの幅の中央部分は 950px です。左右に特定の幅はありません。

私はググって、1つの解決策を見つけました。私が実装した解決策は、同じ幅と高さの色2266BBと0FBD60、左に2266BB、右に他の色の1つの画像を設計したことです。

その画像をすべてのウェブページの背景として設定しました。ほとんどのブラウザでは問題なく動作しているようですが、いくつかの小さな問題があります。私が直面している問題は

1. in ie6 seems everything was messed up. entire layout was changed.
2. in all browsers white colour was not filled with 100% in middle part of webpage. at the bottom it  was  left some height and that part was filled with  background image

これら2つの問題を解決する方法と、これを達成するための他の効果的な解決策があれば教えてください。

私が書いた次のコード。

html code
-------------------------
<body>
   <div id="bg"><img src="bg.png"  width="100%" height="100%" alt="">
   </div>
   <div id="#wrapper">
   webpage content goes here.
   </div>
</body>

styles i applied.
---------------------------------
body {
   height:100%; margin:0; padding:0;
}
html {
   height:100%;
}
#bg {
   position:fixed; top:0; left:0; width:100%; height:100%;
}
#wrapper {
   background: #fff;
   margin: 0 auto 0px auto;
   padding: 10px 15px 0 15px;
   width: 950px;    
   position:relative; 
}
4

3 に答える 3

0

柔軟性のために、私は body で次のような CSS グラデーションを個人的に使用します。

background: #2266bb; /* Old browsers */
background: -moz-linear-gradient(left,  #2266bb 50%, #0fbd60 51%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#2266bb), color-stop(51%,#0fbd60)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #2266bb 50%,#0fbd60 51%); /* IE10+ */
background: linear-gradient(to right,  #2266bb 50%,#0fbd60 51%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2266bb', endColorstr='#0fbd60',GradientType=1 ); /* IE6-9 */

その後、古いブラウザ用の「背景画像」フォールバックを使用できます。

于 2014-01-30T15:31:08.013 に答える
0

私の傾向は、このようなことをすることです。

HTML

<!doctype html>
<html>
<body>
<div class="stripe one"></div>
<div class="stripe three"></div>
<article>
Content here.
</article>
</body>
</html>

CSSで

html {height:100%;}
body {background-color:#fff;height:100%}
.stripe {width:30%;height:100%;position:fixed;top:0;bottom:0;}
.one {left:0;background-color:#26b;}
.three {right:0;background-color:#0FBD60;}
article {width:30%;margin:5% auto;}

リンクはこちら: http://jsfiddle.net/folktrash/EQE6K/

于 2012-03-01T18:00:32.223 に答える
0
  1. 背景用に作成した #bg div を削除します
  2. 高さ 1 ピクセル、幅 3000 + ピクセルの画像を作成します。画像を半分に分割し、右側と左側を必要な色にします
  3. css の body タグを次のように設定しますbackground: url(path/to/your/image) repeat-y center top;
  4. 祝って、あなたは終わった
于 2012-03-01T17:55:58.610 に答える