Пошаговая инструкция с картинками для сайта

В данной статье представляю вашему вниманию HTML и CSS для того, чтобы установить у вас на сайте появилась пошаговая инструкция с картинками. Чаще всего такие инструкции используется для описания кулинарных рецептов. Я назвала ее кулинарная таблица для сайта, или шаблон кулинарной инструкции для сайта.

✪ DEMO ⇊ СКАЧАТЬ
У меня тоже есть сайт, на котором много рецептов. Поэтому, чтобы не прописывать все в каждой новой статье, я и создала себе шаблон, который просто нужно заполнить.

HTML – Инструкция с картинками

HTML одного шага достаточно прост. Вам нужно добавлять этот HTML столько раз – сколько “шагов” вам необходимо.
Вместо image_link.jpg – ccылка на изображение.
Вместо слова ТЕКСТ пишите любой текст – то есть информацию соответствующую определенному шагу.

<div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span><img src="image_link.jpg"></span> 
 
</div>  
<div class="kulinar_message"> 
 
ANY TEXT
 
</div> 
</div>

</div>

ANY TEXT

</div>

Добавить такой код можно на любой сайт и даже адаптировать под какой-либо шаблон. У меня на сайте Worpress эти шаги реализованы с помощью плагина ACF и поля repeater.

CSS

Добавьте эти CSS стили к стилям вашего сайта.

/*--Kulinarnaya tablica--*/  

.kulinar {  
  width: 100%;  
  margin: 5px;  
  background: #fff;  
  border: 2px solid #d1d1d1;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  }  

.kulinar_message {  
  display: block;  
  height: 100%;
  min-height: 120px;  
  margin-top: 10px;  
  margin-left: 10px;  
  margin-right: 190px;  
  margin-bottom: 9px;  
   }  

.kulinar_img span  
{float: right;  
  display: block;  
  height: 120px;  
width: 160px;  
  background:#f4f4f4;  
  padding: 10px;  
  border-right: 1px solid #d1d1d1;  
  overflow: hidden;}  

.kulinar_img span img  
{width: 160px;}  

   

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}  

/*--END-Kulinarnaya tablica--*/

/*--Kulinarnaya tablica--*/

.kulinar {

width: 100%;

margin: 5px;

background: #fff;

border: 2px solid #d1d1d1;

font:11px Verdana,Arial,Helvetica, sans-serif;

text-shadow: 1px 1px 1px #fff;

}

.kulinar_message {

display: block;

height: 100%;

min-height: 120px;

margin-top: 10px;

margin-left: 10px;

margin-right: 190px;

margin-bottom: 9px;

}

.kulinar_img span

{float: right;

display: block;

height: 120px;

width: 160px;

background:#f4f4f4;

padding: 10px;

border-right: 1px solid #d1d1d1;

overflow: hidden;}

.kulinar_img span img

{width: 160px;}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

/*--END-Kulinarnaya tablica--*/

Больше статей: Как защитить контент от копирования - запрет копипаста на сайте

HTML для сайта uCoz

Ниже привожу вам пример HTML кода со своего сайта на uCoz. Тут за основу взято 10 картинок.
Всего в нем 10 шагов. Вы всегда можете удалить лишние или добавить еще следующие.
Изображения загружаете в пункте “Изображения”. Каждому изображению автоматически присваивается порядковый номер.
Для других сайтов – вместо $IMAGE…$ вставляете ссылки на изображения.

<!--STEP-1--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE1 $</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-2--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE2$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-3--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE3$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-4--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE4$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-5--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE5$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div>  

<!--STEP-6--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE6$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-7--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE7$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-8--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE8$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-9--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE9$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div> 

<!--STEP-10--><div class="kulinar opacity">  
<div class="kulinar_img">  
   
<span>$IMAGE10$</span> 

</div>  
<div class="kulinar_message"> 

ТЕКСТ 

</div> 
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

<div class="kulinar opacity">

<span>$IMAGE1 $</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE2$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE3$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE4$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE5$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE6$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE7$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE8$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE9$</span>

</div>

ТЕКСТ

</div>

<div class="kulinar opacity">

<span>$IMAGE10$</span>

</div>

ТЕКСТ

</div>

Больше статей: Как вставить картинку (изображение) на сайт

283

Пошаговая инструкция с картинками для сайта

HTML – Инструкция с картинками

CSS

HTML для сайта uCoz

Leave a Reply Cancel reply