html - создание блока - PullRequest
Новая
       27

html - создание блока

0 голосов
/ 03 декабря 2009

Я должен создать блок так:

альтернативный текст http://img689.imageshack.us/img689/5397/samplek.png

Как я могу сделать это быстрее, используя CSS + HTML?

Ответы [ 3 ]

5 голосов
/ 03 декабря 2009

Вам нужно создать 8 изображений с поддержкой прозрачности.

4 изображения для сторон: сверху, слева, справа, снизу

4 изображения для углов

Для средней части вы можете иметь div и заполнить его этим фоновым цветом.

Если вы говорите о чистом CSS-способе, то вам нужно знать, что его текущее состояние не позволяет вам иметь ни круглые углы, ни тени в кросс-браузерном режиме.

Когда у вас есть ваши изображения, вы можете склеить их так: 

<div style="background: url('/topleft.png') no-repeat;">
  <div style="background: url('/topright.png') right no-repeat;">
    <div style="background: url('/bottomleft.png') bottom no-repeat;">
      <div style="background: url('/bottomright.png') bottom right no-repeat;">

        <div style="padding: 0 5px; background: url('/top.png') repeat-x;">
          <div style="background: url('/bottom.png') bottom repeat-x;">
            <div style="position:relative; left: -5px;
                        background: url('/left.png') repeat-y;">
              <div style="position:relative; left: 10px;
                          background: url('/right.png') right repeat-y;">

                <div style="position:relative; right: 5px;
                            background: #fff68f;">
                   We got it!
                </div>

              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>

P.S. Да, это безумие, я знаю.

P.S. # 2: Чтобы сделать это «быстро», вы можете объединить их в каком-нибудь мастер-образе и использовать технику CSS sprites . Но для того, чтобы это работало, вы должны обеспечить достаточное пустое пространство между изображениями (прочитайте статью, чтобы понять почему), в противном случае эти 9 вложенных элементов могут взорваться еще дальше.

0 голосов
/ 03 декабря 2009

Возможно что-то вроде этого: 

<div id="block"></div>

<style type="text/css">
 #block{
  background:transparent url(http://img689.imageshack.us/img689/5397/samplek.png) 0 0 no-repeat;
  height:279px;
  width:222px;
}
</style>
0 голосов
/ 03 декабря 2009

CSS3 предоставляет несколько приятных опций, но большинство из них еще не поддерживаются в разных браузерах (например, свойство -moz-border-radius).

...