Стили для програмного кода для <code> и <pre> - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Скрипты для uCoz » Контейнер для контента » Стили для програмного кода для <code> и <pre>

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Стили для програмного кода для <code> и <pre>


Стили полей для демонстрации програмного кода




Варианты стилей для демонстрации програмного кода на страницах сайта.Стили для применения в тегах <code> и <pre>.В примерах статьи применяется тег <div> что тоже вполне актуально.Все поля сделаны без применения скриптов,применяются только свойства CSS3.
В демонстрируемом коде замените символ < на &lt; а символ > на &gt;.В нижней части предоставленно видео как быстро заменить большое количество символов,вот программа применяемая для замены.Дополнительно потребуется добавить тег <br> в конец каждой строки демонстрируемого кода,это нужно сделать для переноса строк чтобы код не был слепленным безразрывно.Вы можете изменить шрифт и цвета по своему усмотрению.Если появились вопросы,задавайте их в форме комментария материала.




Примеры стилей для демонстрации програмного кода


№1 - Вставьте это в таблицу стилей сайта

.code1{
margin:0;
padding:0px 25px 5px 20px;
background:#fff url(http://delaisait.ucoz.ru/script/img/code/code1.png) no-repeat top left;
font:0.9em Helvetica, verdana, Georgia;
color:#767675;
border:1px solid #767675;
}


№1 - Это форма для содержания кода

<div class="code1">
Здесь код
</div>


№2 - Вставьте это в таблицу стилей сайта

.code2{
margin:0;
padding:70px 20px 20px 40px;
background:#F9F9F9 url(http://delaisait.ucoz.ru/script/img/code/code2.png) no-repeat top left;
font:14px Helvetica, verdana, Georgia;
color:#000;
border-bottom:5px solid #BFBFBF;
}


№2 - Это форма для содержания кода

<div class="code2">
Здесь код
</div>


№3 - Вставьте это в таблицу стилей сайта

.code3{
margin:15px;
padding:10px;
clear:both;
list-style-type:none;
background:#f9f9f9 url(http://delaisait.ucoz.ru/script/img/code/code3.png) no-repeat right bottom;
border:2px solid #eeeeee;
color:#7D7D7D;
}


№3 - Это форма для содержания кода
<div class="code3">
Здесь код
</div>


№4 - Вставьте это в таблицу стилей сайта

.code4{
background: none repeat scroll 0 0 #fff;
border-left: 5px solid #000040;
display:block;
padding:5px 5px;
color:#2060ff;
max-height:300px;
overflow:auto;
}


№4 - Это форма для содержания кода

<div class="code4">
Здесь код
</div>


№5 - Вставьте это в таблицу стилей сайта

.code5{
padding:5px 5px 5px 15px;
left:25px;
background:#fff url(http://delaisait.ucoz.ru/script/img/code/code5.gif) repeat-y left;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-moz-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1);
-webkit-transition:box-shadow 0.3s ease-in-out;
-moz-transition:box-shadow 0.3s ease-in-out;
-o-transition:box-shadow 0.3s ease-in-out;
transition:box-shadow 0.3s ease-in-out;
display:block;
color:#2060ff;
max-height:300px;
overflow:auto;
}


№5 - Это форма для содержания кода

<div class="code5">
Здесь код
</div>

Видео демонстрирующее вариант быстрой замены









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 837 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: для кодов, стили для code, Pre, code

    Всего комментариев: 3
    0   Спам
    3 moty   (30.05.2013 15:05)
    Аватар moty нужно убрать запятую от ссылки

    0   Спам
    2 moty   (30.05.2013 15:04)
    Аватар moty Вот так выглядит папка со стилями у меня http://clip2net.com/s/596JTa, я пробовал запихать в style.css но как то без успешно, что я делаю не верно?

    0   Спам
    1 moty   (29.05.2013 18:04)
    Аватар moty Привет а что мне использовать чтобы вставить на свой сайт код в красивом блоке? мой сайт http://ya.myfanpost.ru/


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]