2013-06-13

Списки css

списки css
Снова я возвращаюсь к теме оформления блога. Сегодня вы узнаете все или почти все про оформления списка на blogspot. Большинство предложенных кодов будут работать и на блогах других площадок, так как принципы html и css везде едины. Только в отличие от Blogger css кодов списка на других платформах (например, вордпресс) добавляются в таблицу стилей.
Список нужен для перечисления тезисов, составляющих. Выглядит он так:
  • первый элемент,
  • второй,
  • третий.
или так:
  1. первое слагаемое списка,
  2. второе,
  3. третье.
или даже так:
список
Списки, элементы которых пронумерованы, называются нумерованными. Если же они обозначены символами будь то круг, квадрат или иконка, такие списки называются маркированными.

Как создать список в текстовом редакторе блога.

Когда вы пишите статью в текстовом редакторе блога, вы можете создать списки при помощи специальных кнопок:
blogger post editor
Отображение списков зависит от того, как прописаны стили списков в шаблоне вашего блога. По умолчанию, если вы используете стандартный шаблон блога, вид маркера в таком списке – круг.
Вы можете написать и html код списка, изменив при необходимости маркеры списка, использовать римские цифры в нумерованном списке или даже буквы латинского алфавита или картинке. Подробнее о кодах, которые используются при этом читайте в сообщении списки html.
Однако вы можете лишь однажды отредактировать шаблон блога, внеся специальные изменения, чтобы списки вашего блога приняли определенный вид.

Изменить списки css

Чтобы изменить внешний вид списка, нужно добавить предложенные коды перед отрезком кода 
]]></b:skin> в редакторе html блога
  • Список css с маркером в виде квадрата:
.post ul li
  {
  list-style-type:square;
  }

  • Маркер – окружность
    .post ul li
      {
      list-style-type:circle;
      }
  • Маркер – изображение, иконка
     
    .post ul li
    {
    background-image:url('адрес вашего изображения');
    background-repeat:no-repeat;
    background-position:0px 7px;
    padding-left:25px;
    }
  • Второй вариант списка css с маркером изображением:
    ul {
       list-style-image: url(адрес вашего изображения);
      }

    Если мы добавим  строку  list-style-position: inside; то тем самым создадим обтекание списка текстом. Посмотрите пример с правилом inside и сравните его с первым примером списка изображениями выше
    список_css
    Итог:
    ul {
    list-style-image: url(адрес вашего изображения);
    list-style-position: inside;
    }
    Делаем отступы от левого края, добавляем строчки    margin-left: 0;
       padding-left: 2em;

    Чем более выраженным вы хотите сделать отступ, тем большее значение padding-left вы должны указать:
    ul {
    list-style-image: url(адрес вашего изображения);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
  • Вариант 3 списков css с иконками
    ul li       { padding:0 0 0 15px; background:url(адрес изображения) top left no-repeat;}
    ul          { list-style-type: none; }
    Примечание. Для адекватной работы списка css не забывайте добавлять в коды прямую ссылку на изображение иконки списка.

    Маркеры списка css

    Я подготовила для вас готовые списки css. Вы можете создать свои по аналогии. Для этого вам нужно лишь найти подходящий маркер для своего списка, например, в любом поиске по иконкам или создать его самим. Для дизайнеров пригодиться пакет программ Adobe Creative Suite. Уж поверьте, с его помощью вы сможете создать не только иконки Подмигивающая рожица. список с символом – галочкой:
    ..
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/6718/40839264.e/0_96ec7_9a0dd7de_S.png);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    список со знаком вопроса
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/9227/40839264.e/0_96ec8_12caf297_S.png);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    элемент - звезда:
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/9169/40839264.e/0_96ec6_f08d0494_S.png);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    знак плюс
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/9169/40839264.e/0_96ec5_ebecf417_S.png);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    карандаш
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/9259/40839264.e/0_96ec4_559d93dc_S.png);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    стрелка
    ul {
    list-style-image: url(http://img-fotki.yandex.ru/get/9225/40839264.e/0_96ec3_f0e9620e_S);
    list-style-position: inside;
    margin-left: 0;
    padding-left: 2em;
    }
    Вам  также может пригодиться урок по оформлению цитаты blockquote.
  • Комментариев нет :

    Отправить комментарий

    Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML