Jump to content
  • 0

верстка блока с иконкой и рамкой, и текстом внутри


Prana
 Share

Question

Здравствуйте. Подскажите начинающему, как правильно сверстать блок такого плана

Скрытый текст

(смотри рисунок)

, когда по периметру идет граница, а на верху блока иконка возле которой границ нет, но потом есть. 
Попробовала все это сделать через background.. но не знаю, на сколько это правильно. Ну и хочу, чтобы все это адаптивно было. 

10349491m.jpg
 

И как правильно верстать вот такое  дерево блоков?

10308530m.jpg

Edited by Prana
Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

по вёрстке таких блоков http://savepic.ru/10349491.htm

лучше верстать блок с бордером, внутри заголовок и текст и иконка - с абсолютным позиционированием(span с бекграундом-иконкой либо используйте псевдокласс :before этого блока тоже с бекграундом-иконкой).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By stariknatali
      Уважаемые web мастера, я только учусь и сразу же работаю, я понимаю что задаю элементарный вопрос, но всё же очень прошу срочно помочь, у меня это единственная возможность заработать...

      не могу изменить высоту строки в таблице, причём <td style="width: 403px; height: 8 px;"> в этой строке я заменила 11 на 8 никакой реакции....

      Вот эта ужасная таблица
      <div>
      <h1>Технические характеристики</h1>
      </div>
      <p> </p>
      <table style="width: 1051px;" border="0" width="1051" cellspacing="0" cellpadding="0">
      <tbody>
      <tr>
      <td style="width: 403px; height: 8 px;"> </td>
      <td style="width: 324px; height: 8 px;">
      <p align="center">Версия «Пневмо»</p>
      </td>
      <td style="width: 324px; height: 8px;">
      <p align="center">Версия «Серво»</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8 px;">
      <p>Тип дозатора</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">Объемный, роторный</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>Количество дозирующих стаканов</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">6</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>Объем стаканов</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">50-350 мл</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>Максимальная доза</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">350 г</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>Минимальная доза</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">30 г</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>Кинематическая производительность</p>
      </td>
      <td style="width: 324px; height: 8px;">
      <p align="center">90 пак./мин</p>
      </td>
      <td style="width: 324px; height: 8px;">
      <p align="center">120 пак./мин</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>Фактическая производительность</p>
      </td>
      <td style="width: 324px; height: 8px;">
      <p align="center">60-70 уп./мин</p>
      </td>
      <td style="width: 324px; height: 8px;">
      <p align="center">65-90 уп./мин</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>Способ тепловой сварки</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">постоянный</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>Размеры пакета:</p>
      </td>
      <td style="width: 324px; height: 8px;"> </td>
      <td style="width: 324px; height: 8px;"> </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>длина</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">50-350 мм</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>ширина</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">60-230 мм</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>Упаковочный материал</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">Полимерная термосвариваемая плёнка</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 8px;">
      <p>Ширина рулона плёнки</p>
      </td>
      <td style="width: 648px; height: 8px;" colspan="2">
      <p align="center">До 500 мм</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 8px;">
      <p>наружный диаметр бобины</p>
      </td>
      <td style="width: 648px; height: 11px;" colspan="2">
      <p align="center">До 450 мм</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 11px;">
      <p>внутренний диаметр втулки</p>
      </td>
      <td style="width: 648px; height: 11px;" colspan="2">
      <p align="center">50-100 мм</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 11px;">
      <p>Толщина пленки</p>
      </td>
      <td style="width: 648px; height: 11px;" colspan="2">
      <p align="center">0…100</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 11px;">
      <p>Напряжение питания</p>
      </td>
      <td style="width: 648px; height: 11px;" colspan="2">
      <p align="center">220В/50Гц</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 11px;">
      <p>Установленная мощность</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">2.27 кВт</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">2.87 кВт</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 11px;">
      <p>Масса</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">410 кг</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">425</p>
      </td>
      </tr>
      <tr>
      <td style="width: 403px; height: 11px;">
      <p>Расход воздуха</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">350 л/мин</p>
      </td>
      <td style="width: 324px; height: 11px;">
      <p align="center">90 л/мин</p>
      </td>
      </tr>
      <tr style="background: #dbeeff;">
      <td style="width: 403px; height: 11px;">
      <p>Давление воздуха в пневмосистеме</p>
      </td>
      <td style="width: 648px; height: 11px;" colspan="2">
      <p align="center">0,6 мПА</p>
      </td>
      </tr>
      </tbody>
      </table>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy