`tsunami | Angel

Страница: 1 2 »

Сообщений 1 страница 10 из 12

Поделиться12013-03-23 23:40:13

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Хорошего дня. Я очень рада, что стала теперь твоим учителем. Очень надеюсь, что нашу обучение пойдет тебе на пользу, ты научишься многому интересному и познавательному. К сожалению, сейчас не очень много времени на обучение, я буду стараться читать тему и проверять работы по мере возможности.

План наших занятий

1. Что такое CSS? На чем основаны дизайны?
2. Стандартный код. Разберем поверхностно второе окно стиля.
3. Изменяем стандартный код под себя.
4. Работаем с кодом.
5. Добавим чего-то нового.
6. Разберем поверхностно первое окно стиля.
7. Разные виды дизайнов.

Журнал наших занятий

Буду дополнять по мере выполнения тобой заданий.
Тема урока. Задание.
Оценка за задание.
Что такое CSS?
На чем основаны дизайны?
Задание 1.
5-
Недочет был, но все хорошо.
Стандартный код.
Разберем поверхностно второе окно стиля.
Задание 2.
5
Молодец, все хорошо. Надеюсь, комментарии тоже исправила.
Изменяем стандартный код под себя.
Задание 3.

P.S. Ошибки я буду выделять красным и исправлять им же. Фуксией выделяю и исправляю недочеты. Таким цветом буду писать заголовки и сноски из своих же уроков для повторного прочтения.
Итак, начнем. Расскажи, пожалуйста, немного конкретнее, что ты умеешь, чему хочешь научиться.

Поделиться22013-03-24 03:05:36

Автор: Angel
Участник
Зарегистрирован: 2013-03-23
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +2
Провел на форуме:
5 часов 15 минут
Последний визит:
2013-09-23 00:21:59

Доброй ночи. Насчет времени согласна с тобой, поэтому предупреждаю, что могу появляться только на выходных =_= ну лучше сказать сейчас, чем потом хд
Далее, с расценкой балов полностью согласна, надеюсь хоть на 3 потяну ОО
Хочу научиться разбираться в кодах, а в них я полный ноль и по возможности создавать дизы, хоть это оочень тяжело (

Поделиться32013-03-27 00:51:19

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Отлично, вот первый урок.

Для начала можешь внимательно полистать полезные статьи на форуме по дизайну, там есть очень хорошие. Для твоего обучения я буду пользоваться разными учебниками по CSS, если тебе будет интересно, ты потом сама сможешь посмотреть в интернете что-то подробнее.
Начнем.
Что же такое CSS?
Для начала как всегда немного теории. CSS расшифровывается как Cascading Style Sheets (каскадные листы стилей). Вообще CSS предназначен для того, чтобы делать оформление Веб-страниц. Это немного похоже на то, что можно делать в текстовом редакторе, например, в Microsoft Word'е. Но на самом деле, с помощью CSS можно делать намного больше.
Все форумы или сайты состоят из страниц, текста, ссылок. Определенный дизайн же просто делает форум удобнее для чтения и восприятия, но ничего более. Дизайн делает форум или сайт более красивым, отличает его от других, подчеркивает его тематику. Собственно, главные цели самого дизайнера я тоже уже перечислила.
Селекторы, свойства, значения
Так же, как в HTML есть теги, в CSS есть "селекторы". Селекторы – это имена стилей. Селектор определяет тот элемент, который будет каким-то образом меняться. Учить селекторы не нужно, их всегда можно подглядеть в исходном коде, так как это уникальные индентификаторы и классы элементов.
У каждого селектора есть "свойства", определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Свойство - это то, что будет меняться в элементе, который мы выбрали селектором (например, фон). Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой. С помощью значений мы указываем, что именно будет меняться (например, цвет фона).
Не бывает такого, чтобы свойство было отдельно от значения. Они всегда вместе.

body {
font-size: 0.8em;
color: #12007F;
}

В данном примере создается селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст между тегами body (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8 em и темно-синим цветом.

В коде css индентификаторы обозначаются решеткой (#), а классы точкой (.).

#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 500px; top: 0px
}

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

#селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}

Параметры CSS
Фон
1. Цвет
backroung-color
Цвет фона какого-то элемента. Значением здесь может быть только веб-название выбранного цвета.
2. Картинка
backround-image
Фоновая картинка. Значения:
url("...") - вместо многоточия идет прямая ссылка на выбранную картинку, естественно, загруженную через какой-то сервер. Если картинки нет, то можно оставить пустые скобки без кавычек внутри или же использовать значение none.
3. Повторение
backround-repeat
Определяет, будет ли повторяться фоновая картинка. Значения:
repeat (или repeat-xy) - повторяется
no-repeat - не повторяется
repeat-y - повторяется по оси y (вертикально)
repeat-x - повторяется по оси х (горизонтально)
4. Прокрутка
backround-attachment
Определяет, будет ли прокручиваться фон или нет. Значения:
fixed - не будет
scroll - будет
5. Расположение
backround-position
Определяет расположение фоновой картинки. Значения:
top - сверху
center - по центру
bottom - снизу
left - слева
right - справа

Шрифт, текст
Для более удобной работы стиль для шрифта можно прописывать в одну строчку, через запятую указывая значения.
font - все нижеперечисленные параметры шрифта вместе.
1. Цвет
color
Определяет цвет шрифта в элементе. Как значение может употребляться только веб-название какого-то цвета.
2. Размер
font-size
Определяет размер шрифта. В качестве значений можно использовать любые единицы измерения CSS (их все я привожу позже), а можно так называемые константы - стандартные размеры (xx-small, x-small, small, medium, large, x-large, xx-large).
3. Стиль
font-style
Определяет начертание шрифта. Значения:
normal - нормальное, обычное
italic - курсив
oblique - немного менее наклонный, чем курсив
4. Толщина
font-weight
Определяет толщину начертания. Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
Число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
5. Семейство шрифта
font-family
Список шрифтов может включать несколько названий, но тогда их нужно разделять запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

6. Выравнивание
text-align
Определяет выравнивание текста внутри элемента. Значения:
center - по центру
justify - по ширине
left - слева
right - справа
7. Украшения
text-decoration
Определяет декоративные элементы текста. Значения:
underline - нижнее подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Границы (рамки)
Для более удобной работы стиль для границ можно прописывать в одну строчку без запятых.
border - все нижеперечисленные параметры.
border-top - все параметры верхней рамки (это не селектор, а свойство).
border-bottom - все параметры нижней рамки (это не селектор, а свойство).
border-right - все параметры правой рамки (это не селектор, а свойство).
border-left - все параметры левой рамки (это не селектор, а свойство).
1. Цвет
border-color
Определяет цвет границы (рамки). В качестве значения может использоваться только веб-название какого-то цвета.
2. Толщина
border-weight
Определяет толщину границы (рамки). Значения пойдут ниже (см. единицы измерения).
3. Стиль
border-style
Опрелеляет стиль сторон рамки. Значения:
none - рамки нет вообще
dotted - пунктирная рамка из точек
dashed - обычная пунктирная рамка
solid - одинарная сплошная рамка
double - двойная сплошная рамка
groove - трехмерная впадающая рамка
ridge - трехмерная возвышающаяся рамка
inset - трехмерная заглубленность фона
outset - трехмерная выпуклость фона
Значения CSS
1. Единицы измерения

Единицы измерения

em (например, font-size: 2em) используется для определения размера шрифта. Так "2em" означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
px (например, font-size: 12px) единица измерения - пиксели.
pt (например, font-size: 12pt) единица измерения – пункты.
% (например, font-size: 80%) единица измерения – проценты.
Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).
Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если ты хочешь полностью убрать рамку вкруг элемента, то можно задать "border: 0".

2. Цвета
Для всех параметров, требующих указания цвета, нужно указывать веб-название этого самого цвета. Оно состоит из шести знаков после решетки (#).

Задание на закрепление
Для следующих селекторов задаешь следующие параметры и выкладываешь сюда получившийся у тебя код. Дальше разбираем ошибки.
1. Для селектора фон задаешь такие параметры:
- любая фоновая картинка
- картинка повторяется
- картинка находится слева
- фон прокручивается
2. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сама
- размер шрифта x-large
- начертание курсивом
- шрифт Georgia
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по правому краю
- не имеет никаких украшений
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 6 пикселей, пунктирная из точек, цвет выбираешь сама
- нижняя граница имеет толщину 6 пикселей, пунктирная из точек, цвет выбираешь сама
- правая граница имеет толщину 4 пикселя, пунктирная, цвет выбираешь сама
- левая граница имеет толщину 4 пикселя, пунктирная, цвет выбираешь сама

Поделиться42013-03-30 14:32:47

Автор: Angel
Участник
Зарегистрирован: 2013-03-23
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +2
Провел на форуме:
5 часов 15 минут
Последний визит:
2013-09-23 00:21:59

Код:

#background {
background-image: url("http://dimitraki.info/news/uploads/images/default/2771_67.jpg");
background repeat: repeat-xy;
backround-position: left;
backround-attachment: scroll;
}

Код:

#font {
color: #00BFFF;
font-size:  x-large;
font-style: italic;
font-family; "Georgia";
}

Код:

#text {
text-align: right;
text-decoration: none;
}

Код:

#border {
border-top: 6px dotted #2E8B57;
border-bottom: 6px dotted #2F4F4F;
border-right: 4px dashed #1E90FF;
border-left: 4px dashed #8B008B;
}

Отредактировано Angel (2013-03-30 14:33:39)

Поделиться52013-03-30 15:52:24

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Все хорошо, только:

background repeat: repeat-xy;

Можно указывать просто repeat, но это не ошибка.

font-family; "Georgia";

Кавычки здесь не нужны.

Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.

Поделиться62013-03-30 15:53:03

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

P.S. Я тебе это сразу выведу, а не после сказанного.
Таблицы стилей могут содержать комментарии. Комментарии используются для создания пояснений.
Комментарии полностью игнорируются браузером при разборе таблиц стилей.
В CSS комментарии начинаются с "/*", и заканчиваются "*/", например:

/* Правило перекрасит абзацы HTML документа в зеленый цвет */
p {color:green;}

Стандартный код
Я стандартный код немного адаптировала. Ну, лично мне так удобнее и проще. Сначала будешь использовать как стандартный его, потом, может, возьмем действительно стандартный.
1. Структура style.css

Код:

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
  @import url(style_cs.css);

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html, body {margin: 0; padding: 0}

/* A2.2 */
.punbb * {
  margin: 0
  }

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
  }

/* A2.4 */
.punbb img {
  border:none
  }

/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
  }

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 0.3em;}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  }


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
  font-size: 100.01%;
  }

/* A3.2 */
.punbb {
  font: normal 68.75% verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

/* А3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
  font: 1em verdana, arial, helvetica, sans-serif
  }


/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

.punbb h4, .punbb table {
  font-size: 1em;
  font-weight: normal;
  }

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* A3.7 */
.punbb address, .punbb em {
  font-style: italic
  }

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  }

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: italic;
  text-decoration: underline;
  }

/* A3.10 */
.punbb a {
  text-decoration: underline
  }

/* A3.11 */
.punbb optgroup {
  font-weight: normal
  }


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

/* A4.1 */
#pun:after,
.punbb .container:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  overflow:hidden;
  line-height: 0.0;
  font-size: 0;
  }

/* A4.2 */
.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-pagelinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
#pun-userlist .main h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
  }


/* A5 Basic page layout and borders
-------------------------------------------------------------*/



/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  margin: 0px auto auto auto;
  width : 100%;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-style: none;
  background-color: #opacity;
  width: 849px;
  border-width: 0px;
}


/* A5.2 */
.punbb {
  float: center;
  width: 100%;
  height: auto;
 background-color: #opacity
}

/* A5.3 */
#pun-redirect, #pun-maint {
  margin: 0px 20% 0px 20%;
  width: auto;
  float: none;
  }

/* A5.4 */
.punbb .section, .punbb .main {
  margin-bottom: 0 em;
  }

/* A5.5 */
.punbb .category, .punbb .post {
  margin-top: 0 em;
  }

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
  }

/* A5.7 */
#pun-post .topic {
  margin-top: 1em;
  }


/* A5.8 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-style: dotted dotted dotted dotted;
  border-width: 0px 0px 0px 0px
  }

/* A5.9 */
.punbb .container {
  border-style: dotted;
  border-width: 0px;
  }

/* A5.10 */
#pun-main h1, .punbb .section h2, #pun-stats h2, #pun-debug h2 {
  padding: 0.3em 1em;
  border-style: dotted dotted dotted dotted ;
  border-width: 0px 0px 0px 0px;
  }

#pun-main h2 {
  padding: 0.3em 1em;
  border-style: dotted dotted dotted dotted ;
  border-width: 0px 0px 0px 0px;
}



/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
  }

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  border-top: 0px solid #888;
  width: 250px;
  margin: 5px 0;
  }

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  padding: 0 0 1em 0;
  line-height: 150%;
  }

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  }

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
  }

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
  }

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
  }

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
  border-style: solid;
  border-width: 0px;
  }

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: normal;
  font-style: normal;
  margin: 0;
  }

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  border-style: solid;
  border-width: 0px;
  margin: 0 0 1.1em 0;
  }

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
  }

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: normal;
  }


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* B3.1 */
.punbb .linkst {
  float: left;
  position: relative;
  width: 100%;
  font-size: 1.1em;
  height: 0;
  }

/* B3.2 */
.multipage {
  margin-top: 3em;
  }

/* B3.3 */
.linkst .pagelink {
  position: absolute;
  top: -4em;
  left: 1em;
  width: 24em;
  }

/* B3.4 */
.linkst .postlink {
  position: absolute;
  top: -4em;
  right: 1em;
  width: 16em;
  text-align: right;
  font-weight: normal;
  }

/* B3.5 */
.punbb .linksb {
  text-align: right;
  padding: 0.4em 1em 0.5em 1em;
  font-size: 1.1em;
  }

/* B3.6 */
.linksb .pagelink {
  float: left;
  width: 24em;
  text-align: left;
  }

/* B3.7 */
.linksb .postlink {
  float: right;
  width: 16em;
  font-weight: normal;
  }

/* B3.8 */
.subscribelink {
  clear:both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
  }


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
  }

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
  }

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  }

/* C1.4 */
.punbb fieldset {
  border-style: solid;
  border-width: 0px;
  padding: 0 18px 0 18px;
  margin: 0 0 1em 0
  }

/* C1.5 */
.punbb fieldset legend {
  padding: 0;
  margin: 0 0 0 11px;
  font-size: 1.1em
  }

/* C1.6 */
.punbb fieldset legend span {
  padding: 0 5px;
  margin: 0 0 0 -15px;
  }

/* C1.7 */
.punbb fieldset fieldset {
  border-style: none;
  margin: 0;
  padding: 0 0 8px 0
  }

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
  }

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  }

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
  }

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  }

/* C1.12 */
.punbb .datafield br {
  display: none
  }

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: normal;
  }

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
  }

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 4em 0 0;
  height: 100%; /* For IE */
  }

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
  }

/* C1.17 */
.punbb .hashelp {
  position: relative;
  }

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
  }

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
  }

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
  }

.punbb .helplinks span INPUT {
  margin: 0px 2px 2px 0px;
}

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
  }


/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: center;
  width: 50%;
    margin-left: 11px;
  }

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
  text-align: center;
  width: 10%;
  }

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: center;
  width: 30%;
  }

/* C2.4 */
#pun-userlist .main .tcl,
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%
  }

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
  }

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space:normal;
  }

/* C2.7 */
#pun-debug .tcr {
  width: 90%;
  white-space: normal;
  }

/* C2.8 */
#pun-index .tcl h3 {
  font-size: 1.2em;
  font-weight: normal;
  }

/* C2.9 */
.punbb td span.youposted {
  font-weight: normal;
  margin-left: -1em;
  position: absolute;
  }

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em
  }

/* C2.11 */
.punbb .main td {
  border-style: solid none none solid;
  border-width: 0px 0 0 0px;
  padding: 0.0em 0em;
  }

/* C2.12 */
.punbb .main th {
  border: none;
  padding: 0px 0em 0px 0em;
  }

/* C2.13 */
.punbb .main .tcl {
  border-left-style: none;
  border-left-width: 10;
  }

* html .tclcon {height: 1px}

/* C2.14 */
.punbb td div.tclcon {
  margin-left: 11px;
  text-align: left;
}

/* C2.15 */
.punbb div.icon {
      float: right;
      display: block;
      width: 93px;
      height: 58px;
    margin-right: 10px;
    padding-top: 0px;
    margin-top: 0px;}



/* C2.16 */
.punbb  table div.icon {
  font-size: 1.05em;
  position: absolute;
  margin-left: -2.2em;
  }


 /* C3 Topics
-------------------------------------------------------------*/

/* C3.1 */
.punbb .post .container {
  border-style: none solid solid solid;
  border-width: 1px;
  margin-top: 0px;
  padding-bottom: 1px;
  }

/* C3.2 */
.punbb .post h3 {
  border-style: solid solid none solid;
  border-width: 1px;
  }

/* C3.3 */
.punbb .post h3 span {
  border-left: 1px solid #a7b5bd;
  padding: 0.5em 1em;
  display: block;
  margin-left: 19em;
  }

/* C3.4 */
.punbb .post h3 strong {
  float: right;
  width: 5em;
  text-align: right;
  font-weight: normal;
  }

/* C3.5 */
.punbb .post .post-author {
  float: left;
  width: 19em;
  margin-top: 0em;
  overflow: hidden;
  font-weight: normal;
  }

/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
  padding: 0 1em 1em 1em;
  line-height: 140%;
  text-align: left;
  
  }

/* C3.7 */
.pa-author {
  font-size: 1.1em;
  font-weight: normal;
  text-align: left;
  }

/* C3.8 */
.pa-author a {
  text-decoration: none
  text-align: left;
  font-weight: normal;
  }

/* C3.9 */
li.pa-title {
  padding-bottom: 0.4em;
  font-weight: normal;
  }


li.pa-online {
  line-height: 0.8em;
  border-left-style: solid;
  border-left-width: 0.7em;
  padding-left: 0.4em;
  margin-top: 0em;
  }

/* C3.11 */
.punbb .post-body {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 0px;
  padding: 0 0 1px 0;

  }

/* C3.12 */
.punbb .post-box {
  padding: 1em;
  }

/*C3.13 */
.punbb fieldset .post-box {
  margin-bottom: 0.8em
  }

/* C3.14 */
.punbb .post-links {
  margin-left: 19em;
  border-left-style: solid;
  border-left-width: 0px;
  }

/* C3.15 */
.punbb .post-links ul {
  padding: 0 1em 0 0;
  height: 2em;
  line-height: 2em;
  margin-left: -19em;
  border-top-style: dashed;
  border-top-width: 0px;
  background: transparent;
  text-align: right;
  }

/* C3.16 */
.punbb .post-links li {
  display: inline;
  padding-left: 1em;
  }

/* C3.17 */
.pl-email, .pl-website {
  float: left;
  }

/* C3.18 */
.punbb .clearer {
  clear: both;
  height: 0;
  font-size: 0;
  }


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
  }

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
  }

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
  }

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
  }


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  }

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
  }


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
  }

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
  }

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: normal;
  }

/* C6.4 */
#viewprofile ul, #profilenav ul {
  border-style: solid;
  border-width: 0px;
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
  }

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  background: transparent;
  border: none;
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
  }

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
  }

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
  }

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: normal;
  display: inline;
  }

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
  }

/* C6.11 */
.punbb img.avatardemo {
  float: left;
  margin: 0 0 0.8em 1.8em
  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* C7.2 */
#pun-userlist .usertable .container {
  padding: 0 2.3em 2.3em 2.3em;
  border-top: none;
  }

/* C7.3 */
#pun-userlist .usertable table {
  border-style: solid;
  border-width: 0px;
  }


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/

/* D1 Logo and description
-------------------------------------------------------------*/

/* D1.1 */
#pun-title {
  margin: 0;
  margin-top: 0px;
  border-style: double;
  border: none;
  margin-bottom: 0px;

}

/* D1.2 */
#pun-title h1 {
  display : block;
  height: 502px;
margin-bottom: -1px;
}

/* D1.3 */
#pun-title .container {
  border-style: none ;
  padding: 0.2em 1em 0.8em 1em;
  }

/* D1.4 */
#pun-title h1 span {
  display: none;
}

#pun-title TABLE {
  border: none;
  height: 502px;
  width: 100%; margin-bottom: 0px; margin-top: 0px;
}

#pun-title TD.title-logo-tdl {
  border: none;
  width: 100%; height: 502px;
}

#pun-title TD.title-logo-tdr {
  border: none;
  width: 849px;
  vertical-align: top;
  padding-right: 0px;
  padding-top: 0px;

}



/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  border: none;
  padding: 0;
  width: 100%;
  }

/* D2.2 */
#pun-pagelinks .container {
  background: transparent;
  border: none;
  padding: 0}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  }

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
  }

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
  }

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  }

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */
#pun-navlinks {
  border-style: none solid none solid;
  border-width: 0px 0px 0px 0px;
  margin: -100;
  margin-top: -300;
}

#pun-navlinks .container {
  border-style: none;
  border-width: 0;
  margin: 0;
  }

/* D3.2 */
#pun-navlinks .container {
    padding-top: 12px;
    height: 20px;
    font-weight: normal;
    text-align: center;
}

/* D.3 */
#pun-navlinks li {
    display: inline;
    margin: 1.25%;
}

/* D3.4 */
#pun-navlinks li a {
  font-size: 1.1em;
  }

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks  {
  margin-top: -100;
  }

/* D4.2 */
#pun-ulinks .container {
  padding: 0.7em 1em;
  text-align: center;
  }

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: inline;
  border-left-style: solid;
  border-left-width: 0px;
  white-space: nowrap;
  }

/* D4.4 */
#pun-ulinks li a {
  padding: 0 0.3em 0 0.6em
  }

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  border-left-style: none;
  border-left-width: 0;
  padding-left: 0
  }

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status, #pun-status .container {
  border-bottom: none;
  margin-bottom: 0;
  }

/* D5.2 */
#pun-status .container {
  padding: 0.8em 1em 1em 1em;
  }

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
  }

/* D5.4 */
#pun-crumbs1 {
  font-weight: bold;
  overflow: hidden;
  margin-top: 0;
  }

/* D5.5 */
#pun-crumbs1 p.container {
  border-top: none;
  padding: 1em 1em 0.8em 1em;
  font-size: 1.1em;
  }

/* D5.6 */
#pun-break1 {
  margin: 0 1em;
  border-style: solid none;
  border-width: 0px 0;
  height: 0;
  margin: -2px 1em;
  position: relative;
  z-index: 1;
  }


/* D6 Announcement
-------------------------------------------------------------*/

#pun-announcement h2 {display: none}

/* D6.2 */
#pun-announcement h2 span {
  display: block;
  padding: 1em 0 0.8em 0;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  }

/* D6.3 */
#pun-announcement .container {
  padding: 1em 1em 1em;
  }

/* D7 Statistics
-------------------------------------------------------------*/

/* D7.1 */
#pun-stats .container {
  padding: 0.8em 1em
  }

/* D7.2 */
#pun-stats li.item1, #pun-stats li.item2 {
  float: left;
  clear: both;
  line-height: 150%;
  }

/* D7.3 */
#pun-stats li.item3, #pun-stats li.item4 {
  text-align: right;
  line-height: 150%;
  }

/* D7.4 */
li#onlinelist {
  margin-top: 1em;
  border-top-style: solid;
  border-top-width: 0px;
  float: left;
  width: 100%;
  line-height: 130%;
  }

/* D7.5 */
li#onlinelist div {
  border-top-style: solid;
  border-top-width: 0px;
  padding: 0.7em 0 0 0;
  }

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  border: none;
  width: 50%;
  position: relative;
  float: left;
  }

/* D8.2 */
#pun-qjump .container {
  border: none;
  background: transparent;
  padding: 0.8em 1em;
  }

/* D8.3 */
#pun-about {
  margin-top: 0;
  }

/* D8.4 */
#pun-about .container {
  border-top-style: none;
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
  }

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
  }

/* D8.6 */
#pun-crumbs2 {
  font-weight: normal;
  overflow: hidden;
  margin-bottom: 0;
  border-bottom: none;
  }

/* D8.7 */
#pun-crumbs2 .container {
  border-bottom: none;
  padding: 0.8em 1em;
  font-size: 1.1em;
  }




/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  border-bottom-style: solid;
  border-bottom-width: 0px;
  padding-bottom: 0;
  margin-bottom: 0.8em;
  }

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  font-size: 1.1em;
  }

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  }

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  }

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  }

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  }

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  }

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
  }

Ну, лично мне привычнее использовать такой.

2. Цвета style.css

Код:

/* CS1 Background and text colours  background-color: #E139F1;
-------------------------------------------------------------*/

/* CS1.1 */
.punbb .section .container, .punbb .post-body, .punbb .post-links, .punbb td.tc2, .punbb td.tc3,
.punbb .formal fieldset .post-box, #viewprofile li strong, #viewprofile li div, #setmods dd,
.punbb .info-box, .punbb #pun-main .info-box .legend {
  background-color: #dedfdf;
  color: #333;
  }

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #d1d1d1;
  color: #333;
  }

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #aac9eb;
  color: #fff;
  }

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #aac9eb;
  color: #333;
  }

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #d1d1d1;
  color: #005EAB
  }

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #d1d1d1;
  color: #333
  }

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #f9f9f9;
  color: #333
  }

/* CS1.8 */
#pun-navlinks .container {
  background-color: #dedfdf;
  color: #f1f1f1;
  }

.offline li.pa-online strong {
  font-weight: normal
  }

/* CS2 Border colours
-------------------------------------------------------------*/

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3, #pun-title {
  border-color: #606060
  }

/* CS2.2 */
.punbb .section, .punbb .forum, .punbb .formal, .punbb .modmenu, .punbb .info,
.punbb .category, .punbb .post {
  border-color: #f5f5f5
  }

/* CS2.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  border-color: #606060;
  }

/* CS2.4 */
.punbb td, .punbb fieldset, #viewprofile ul, #profilenav ul, .punbb .post .post-body,
.punbb .post h3 span, .post-links ul, .post-links, .usertable table {
  border-color: #606060;
  }

/* CS2.5 */
.punbb th {
  border-color: #606060
  }

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
  border-color: #ccc #fff #fff #ccc;
  }

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
  border-color: #ccc
  }

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
  border-color: #fff
  }

.punbb .divider {
  border-color: #ccc #fff #fff #fff
  }

.punbb .formal fieldset .post-box, .punbb .info-box {
  border: 1px solid #dedfdf
  }

li.pa-online {
  border-left-color: #aac9eb;
  }


/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
  color: #005EAB
  }

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #333
  }

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #B42000;
  }

/* CS3.3 */
#pun-navlinks a {
  color:#005cb1;
  text-decoration: none
  }

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #005cb1;
  text-decoration: underline
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #333;
  color: #fff;
  }

/* CS4 Post status icons
 -------------------------------------------------------------*/

div.icon {border-color: #E6E6E6 #DEDEDE #DADADA #E2E2E2}
tr.iredirect div.icon {border-color: #F7F7F7 #F7F7F7 #F7F7F7 #f7f7f7}
div.inew {border-color: #0080D7 #0065C0 #0058B3 #0072CA}

Поделиться72013-03-30 15:53:32

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Разберем поверхностно второе окно
1. За что отвечают блоки
Блок CS1 Background and text colours отвечает за все фоны форума.
Блок CS2 Border colours отвечает за границы на форуме.
Блок CS3 Links отвечает за ссылки на форуме.
Блок CS4 Post status icons отвечает за иконки сообщений и тем.
Последний блок я люблю выносить в HTML-верх отдельно, так как лично мне прямо в стиле работать с этим неудобно. Но это потом, пока мы трогать этот раздел не будем.
2. CS1 Backround and text colours
Пункты /* CS1.1 */ и /* CS1.2 */ отвечают за "тело форума", но я предпочитаю их тоже заменять, чтобы не заморачиваться особо. Менять стандартный код под себя мы будем в следующем уроке.
Пункт /* CS1.3 */ отвечает за категории форума.
Пункт /* CS1.4 */ отвечает за шапку форума.
Пункт /* CS1.5 */ отвечает за полосы легенд.
Пункт /* CS1.6 */ отвечает за строки форум|тем|сообщений.
Пункт /* CS1.7 */ отвечает за коды и цитаты.
Пункт /* CS1.8 */ отвечает за главное меню, т.е форум/участники и т.д.
3. CS2 Border colours
Я предпочитаю везде проставлять вместо цветов ко всем свойствам border-color: подставлять transparent;, так как границы сейчас особо не нужны. Ты можешь сделать то же самое.
Пункт /* CS2.6 */ отвечает за границы кода и цитаты.
Пункт li.pa-online отвечает за границу у надписи онлайн, но я сама здесь никогда ничего не меняю.
4. CS3 Links
Пункт /* CS3.1 */ отвечает за все неактивные ссылки на форуме (без наведения).
Пункт /* CS3.2 */ отвечает за все активные ссылки на форуме (при наведении).
Пункт /* CS3.3 */ отвечает за главное меню без наведения.
Пункт /* CS3.4 */ отвечает за главное меню при наведении.

Задание
1. Открываешь свой тестовик.
2. Копируешь туда исходные коды.
3. Все комментарии исправляешь на русские и понятные, чтобы тебе было удобнее. И чтобы ты не спрашивала потом, где это менять. Когда сделаешь, кинь ссылку на тестовик сюда.

Поделиться82013-03-30 18:42:32

Автор: Angel
Участник
Зарегистрирован: 2013-03-23
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +2
Провел на форуме:
5 часов 15 минут
Последний визит:
2013-09-23 00:21:59

`tsunami
http://ellca.rusff.me/

Поделиться92013-04-01 12:10:03

Автор: `tsunami
per aspera ad astra
Зарегистрирован: 2013-02-07
Приглашений: 0
Сообщений: 1085
Уважение: +85
Позитив: +19
Пол: Женский
Провел на форуме:
6 дней 22 часа
Последний визит:
2013-05-04 13:04:56

Angel
Молодец, хорошо.

Изменяем код под себя
Дальше там все будет радикально, не пугайся. Просто я хочу, чтобы ты не боялась менять коды под себя, чтобы тебе было легче и удобнее.
1. Блок CS1.
1. Пункт /* CS1.1 */
Я не очень люблю, когда за тело форума отвечают два пункта, а цвет фона прописывается сверху. Так как (я это уже говорила) все пояснения форумом игнорируются. Поэтому весь пункт /* CS1.1 */ мы заменяем на такой код:

#pun { background-color: #шестизнак;
background-repeat: repeat;
background-position : center;}

Слово "шестизнак" ты, естественно, заменяешь на свой цвет. Пока любой.
Этот пункт у нас по-прежнему отвечает за тело форума.
2. Пункт /* CS1.2 */
Теперь этот пункт будет отвечать у нас за сам фон. Свойство со значением (background-color: #E139F1;) можешь смело удалять. Вместо стандартного кода вставляешь в пункт вот этот:

body {background-color: #шестизнак;
background-image : url("...");
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}

Слово "шестизнак" опять же заменяешь на свое. Свойство фоновой картинки я специально сюда вставила, так как ничем мешать оно не будет, а потом это очень поможет нам в случае в объединенным дизайном. И не забудь поменять комментарий к этому пункту!
3. Пункт /* CS1.9 */
Да-да, не удивляйся, во все коды я добавляю еще один новый пункт. Это будет нижнее завершение нашего дизайна, картинка в самый низ, проще говоря. На таких обычно авторы копирайты штампуют:3 вот какой код мы в этом пункте вставляем:

#pun-about p.container {
background: transparent url("...")
bottom center no-repeat;
}

Вместо ... вставляешь свою картинку, но пока ничего не вставляй, это потом.
4. Пункт /* CS1.10 */
Да, еще один. Этот пункт будет отвечать за стиль поля ввода (формы ответа). Обычно, я эту штуку не трогаю, но потом мы будем работать и с ней. В любом случае лучше, чтобы она у тебя была. Код такой:

.punbb textarea, .punbb select, .punbb input {
background-color: #шестизнак;
color: #шестизнак;
}

Слово "шестизнак" меняешь на свое. Color - цвет текста в поле ввода.
2. Блок CS4.
А вот отсюда я предпчоитаю все убирать и перемещать в HTML-верх. Ты пока просто убираешь этот блок, с иконками мы поработаем немного позже.

Задание
1. Переделать код на своем тестовике как я написала.
2. Изменить все пояснения.
3. Выбрать тему для нашего дизайна и цветовую гамму.
4. Подобрать соответствующие исходники.
Все это - сюда.

Поделиться102013-04-06 14:58:05

Автор: Angel
Участник
Зарегистрирован: 2013-03-23
Приглашений: 0
Сообщений: 11
Уважение: +0
Позитив: +2
Провел на форуме:
5 часов 15 минут
Последний визит:
2013-09-23 00:21:59

Тематика: Реалка

иконки

шапуня

фон

#800000

Страница: 1 2 »

Тема урока. Задание.	Оценка за задание.
Что такое CSS? На чем основаны дизайны? Задание 1.	5- Недочет был, но все хорошо.
Стандартный код. Разберем поверхностно второе окно стиля. Задание 2.	5 Молодец, все хорошо. Надеюсь, комментарии тоже исправила.
Изменяем стандартный код под себя. Задание 3.

Кот

Меню навигации

Пользовательские ссылки

Информация о пользователе

`tsunami | Angel

Сообщений 1 страница 10 из 12

Поделиться12013-03-23 23:40:13

Поделиться22013-03-24 03:05:36

Поделиться32013-03-27 00:51:19

Поделиться42013-03-30 14:32:47

Поделиться52013-03-30 15:52:24

Поделиться62013-03-30 15:53:03

Поделиться72013-03-30 15:53:32

Поделиться82013-03-30 18:42:32

Поделиться92013-04-01 12:10:03

Поделиться102013-04-06 14:58:05