Копирование шаблонов дизайна в HTML, CSS

Question

Предположим, у вас есть следующий код в HTML -
<div id="pattern"><br> <span class="a">Content</span><br> </div>
И предположим, что вы хотите воспроизвести и показать этот шаблон в разных местах на странице. Как бы вы это сделали?
У каждого из этих паттернов будет свой стиль.

Answer 1

Это очень легко сделать с помощью jQuery.

$('#pattern')
    .clone()
    .addClass('variate-styling')
    .appendTo('#container');

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

Answer 2

действительно расплывчато, но давайте посмотрим.

Содержание

это повторяется.поэтому добавьте класс шаблонов в div, я оставлю этот идентификатор для вас, но мы не будем его использовать в данный момент.

Содержимое

, поэтому повторяющиеся разделы установлены.установите здесь стиль по умолчанию / универсальный стиль для всех: .patterns {} .patterns a {}

Вы хотите разные позиции?хорошо, скажем, у вас есть один в ваших #column, # main-content и #footer id.Вы можете стилизовать эти 2 простых способа: 1) использовать parent в каскаде для нацеливания на определенный повторяющийся раздел:

Content Content Content

, чтобы указать отдельные стили здесь, после стилей по умолчанию: .patterns {background-color: # c0c0c0}.patterns a {}

/ * объявляет уникальные стили * /

колонка .patterns {background-color: # 000}

основное содержимое .patterns {background-image: url ("deez.png") 0 0 без повтора}

нижний колонтитул .patterns {background-color: # yourM0m}

ИЛИ вы можете отказаться от идентификаторов и дать каждому .pattern своисобственный идентификатор, но самый универсальный, оптимизированный ответ - отказаться от идентификаторов и использовать только классы, поэтому к каждому .patterns, для которых требовался альтернативный стиль, также нужно было бы добавить к нему указанный класс.

Если я правильно понял ваш вопрос, это чрезвычайно более оптимизированный метод, чем полагаться на язык программирования (кроме JavaScript), чтобы сделать это для вас.И хотя JavaScript является оптимальным языком для работы с браузером, он же Front-End .... он вам не нужен для достижения того, что вы ищете.надеюсь это поможет.

ура!ВЕРД

Answer 3

Вы можете использовать цикл.Если ваш язык PHP:

<?php
$patters=array('pattern1', 'pattern2', 'pattern3', 'pattern4', 'pattern5');
for($i=0;$i<5;$i++){
    echo '<div id="'.$patters[$i].'"><span class="a">Hackalicious</span></div>';
}
?>

С уважением!