Log in / Register
Login to your account
Remember Me
Create an account
Fields marked with an asterisk (*) are required.
Reload Captcha
 
Ideas in practice

ARENAM

Web dewelopment

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

Первый способ

Давайте рассмотрим самый простой способ. Ниже вы можете увидеть что у нас должно получится.

простой способ

Наш блок будет состоять из одного элемента с классами и необходимым текстом внутри.

	<div class="note note-important">
		Текст текст текст
	</div>

Теперь добавим основные стили к классу note

	.note{
	  display: block;
	  margin: 10px;
	  padding: 10px;
	  border: 2px dotted #ccc;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}

Для добавления шапки с заголовком мы воспользуемся отдельным классом. Это даст нам возможность использовать разные заголовки и фоновый цвет.

	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}

Теперь все что вам нужно, добавить свои дополнительные классы для разных потребностей.

	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}
простой способ 2

Весь код:

HTML

	<div class="note note-important">
		Текст текст текст
	</div>
	
	<div class="note note-notice">
		Текст текст текст
	</div>
	
	<div class="note note-remember">
		Текст текст текст
	</div>

CSS

	.note{
	  display: block;
	  margin:10px;
	  padding: 10px;
	  border: 2px dotted #ccc;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}
	
	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}
	
	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}

Второй способ

Второй способ похож на первый, но шапка будет вынесена за пределы текстового поля, а сам текст прядётся обернуть в дополнительный div.

второй способ

Весь код:

HTML

	<div class="note note-important">
	  <div>Текст текст текст</div>
	</div>
	
	<div class="note note-notice">
	  <div>Текст текст текст</div>
	</div>
	
	<div class="note note-remember">
	  <div>Текст текст текст</div>
	</div>

CSS

	.note{
	  display: block;
	  margin:10px;
	  
	}
	
	.note div{
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-top: none;
	}
	
	.note:before{
	  content: "";
	  display: block;
	  margin: 0;
	  padding: 10px;
	 
	}
	
	.note-important:before{
	  content: "ВАЖНО!";
	  background: #ff0;
	}
	
	.note-notice:before{
	  content: "ВНИМАНИЕ!";
	  background: #ff5722;
	  color: #fff;
	}
	
	.note-remember:before{
	  content: "ЗАПОМНИ!";
	  background: #3f51b5;
	  color: #fff;
	}
второй способ 2

Если этот материал вам хоть как-то помог, пожалуйста поставьте оценку в начале статьи!!!! Text.ru - 100.00%

Недостаточно прав для комментирования

Purchase guarantees

Secured payment
100% Secure Payments with bank сards, YooMoney, QIWI and others.
Official invoice
You'll receive an official invoice instantly in accordance with law 54-F3.
Instant download
Instant download after payment.