0

私はすでに CSS を何度も作成しましたが、機能せず、多くの不具合がありました...
画像を表示します - 不具合:
画像を参照してください - http://beta.areku-developstudio.org.ua/new.png

画像を参照してください (これはより良い品質のために必要です):
画像 2 を参照してください - http://beta.areku-developstudio.org.ua/new2.png

CSSの作り方 - 角度画像+背景? 高さ - 100% または自動?
サンプル HTML:

<div id="conteiner" class="main">
    <div class="top_left_corner">
        <div class="top_right_corner">
            <div class="bottom_left_corner">
                <div class="bottom_right_corner">
                    <div id="content">
                        <br/><br/>
                        Hello Areku<br/>
                        Hello Areku<br/>
                    </div>
                    <br/><br/>
                </div>
            </div>
        </div>
    </div>    
</div>

CSS + HTML を作成する他の方法を選択します。jQueryはできますか？私は答えを待っています...
心から、アレク！

4

1 に答える 1

0

さまざまな要素で background プロパティをクリエイティブに使用することで、これを行うことができます。

<html>
  <body>
     <div id="content">
        Your content
     </div>
     <div class="corner right"></div>
     <div class="corner left"></div> 
  </body>
</html>

その場合、CSS は次のようになります。

/* Following 2 rules create min-height 100% for your content and body */
html,
body {
  height: 100%;
}

#content {
  min-height: 100%;
}

/* html and body create the fixed position bottom right/left corners */
html {
  background: url(bottom-right.png) no-repeat fixed 100% 0;
}

body {
  background: url(bottom-left.png) no-repeat fixed 0 0;
}

/* top right/left corners are handled by 2 divs */
.corner {
  position: fixed;
  top: 0;

  width: 50px;  /* width of your background image corner */
  height: 50px; /* height of your background image corner */    
}

.left {
  left: 0;
  background: url(top-left.png) no-repeat 100% 0;
}

.right {
  right: 0;
  background: url(top-right.png) no-repeat 100% 0;
}
于 2010-09-08T13:17:28.393 に答える