Кот

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

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Кот » Архивы » `tsunami | деревянный


`tsunami | деревянный

Сообщений 11 страница 19 из 19

11

деревянный написал(а):

скопировал неудачно

Бывает.

деревянный написал(а):

Было бы замечательно. Постараюсь внимательней выполнить

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

+1

12

#фон {
backgtound-image: url("http://s3.uploads.ru/M6dJW.jpg");
backround-repeat: no-repeat;
backround-position: right;
backround-attachment: fixed;
}

#шрифт {
color: #73AE59;
font-size: x-small;
font-style: normal;
font-family: Impact;
}

#текст {
text-align: center;
text-decoration: underline ;
}

#границы {
border-top: 8px solid #702312;
border-bottom: 8px solid #702312;
border-right: 3px groove #702312;
border-left: 3px groove #702312;
}

0

13

деревянный
На сей раз все хорошо, но оценку не ставлю, так как не с первого раза.

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}

0

14

Разберем поверхностно второе окно
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. Создаешь свой тестовик на mybb.
2. Копируешь туда исходные коды.
3. Все комментарии исправляешь на русские и понятные, чтобы тебе было удобнее. И чтобы ты не спрашивал потом, где это менять. Когда сделаешь, кинь ссылку на тестовик сюда.

0

15

http://pho.mybb.ru/

0

16

деревянный
Хорошо, молодец.

Изменяем код под себя
Дальше там все будет радикально, не пугайся. Просто я хочу, чтобы ты не боялся менять коды под себя, чтобы тебе было легче и удобнее.
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. Подобрать соответствующие исходники.
Все это - сюда.

0

17

Сделал.
http://pho.mybb.ru/

`tsunami написал(а):

3. Выбрать тему для нашего дизайна и цветовую гамму.

Ну, для начала хотелось бы что-нибудь простенькое. Пусть будет что-то мышино-сырное, если не против)
Цветовая гамма - желтый, белый, коричневый

фон

http://freelance.ru/img/portfolio/pics/00/03/B9/244093.jpg
http://www.hqoboi.com/img/food/food-texture-020.jpg

шапка

http://novorab.ru/Content/uploadfiles/image/%D0%9F%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D1%8B%20%D0%BF%D0%B8%D1%82%D0%B0%D0%BD%D0%B8%D1%8F/%D1%81%D1%8B%D1%80_%D0%BA%D1%83%D1%81%D0%BE%D0%BA.jpg
http://farm8.staticflickr.com/7253/7095792663_807061549a_o.jpg
http://www.nature.com/nature/journal/v420/n6915/images/420515a-f1.2.jpg

0

18

деревянный
Все отлично))

Работаем с кодом
Вернее, пока с нижним окном стиля, так как оно почти полностью отвечает за графику.
По-идее, весь этот урок будет представлять собой задание. На всякий случай я буду давать коды и показывать на них, где что изменять. Если ты все знаешь и без этого, я буду только рада.

1. Тело форума
Изменяешь на свой цвет. Можешь поставить картинку, но пока лучше цвет.

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

Слово "шестизнак" меняешь на свой цвет.
2. Фон форума
Тоже меняшь на свой цвет. Картинку лучше пока не ставь, этим мы займемся позже.

/* CS1.2 */
body {background-color: #шестизнак;
background-repeat: no-repeat;
background-position : top center;
overflow-x: hidden;
}

Слово "шестизнак" меняешь на название своего цвета.
3. Категории форума
Я думаю, нам стоит сделать дизайн не аляповатым и ярким, а красивым и спокойным, поэтому цвет категорий ты меняешь на тот же, каким заливал тело форума.

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Цвет после свойства background-color означает цвет фона. Это ты знаешь (первое слово "шестизнак" меняешь как я написала раньше).
Цвет после свойства color означает цвет текста именно этой области (в данном случае - цвет текста, которым будет написано название категорий). Здесь тоже выбираешь свой, но обязательно такой, чтобы сочетался с фоном форума и не очень резал глаза. То есть не надо делать красное на синем или малиновое на зеленом, ладно?)

4. Шапка форума
А здесь мы напрямую сталкиваемся с графикой. Пока (для начала) ты можешь просто загрузить через какой-нибудь сервер и вставить в шапку пустую картинку, подогнав в фотошопе или любом другом графическом редакторе ее под размеры 850 х 500. Ты можешь сделать коллаж (если умеешь) опять же в любом графическом редакторе, но я этого не требую прямо в этом уроке. Если хочешь, этому мы научимся потом. Вот каким должен быть окончательный код для шапки:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-image : url("...");
  }

Замени тот код, который у тебя стоит, на такой. Там мы просто изменяем свойство backround-color на свойство backround-image и убираем свойство color за ненадобностью. Можешь оставить последнее, конечно, это свойство не помешает.
5. Полосы легенд
Здесь опять та же штука, что и с категориями. Цвет фона ставим тот же, что и тело форума. Цвет текста выберешь сам, но опять же обязательно, чтобы сочетался с цветом форума. Можешь взять тот же, что и в категориях.

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #шестизнак;
  color: #шестизнак
  }

Первый "шестизнак" заменяешь на цвет фона опять же, второй на цвет текста. Тут все понятно.
6. Строки форум|сообщений|тем
Ту все то же самое - цвет фона тот же, что и тело. Цвет текста выбираешь сам.

/* CS1.6 */
.punbb .post h3 span, .punbb th, #viewprofile li, #setmods dl  {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - цвет фона, второй - цвет текста.
7. Коды и цитаты
Здесь немного по-другому. Вместо цвета поля кодов или цитат можно ставить и картинки, но мы пока ограничимся цветом. Цвет ты выбираешь немного отличающийся от цвета тела форума, чтобы было заметно, где у нас цитата или код, а где нет. Но опять же все должно сочетаться.

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
  background-color: #шестизнак;
  color: #шестизнак;
  }

Первый "шестизнак" - на тот выбранный тобой цвет, второй - на цвет в поле цитаты или кода, но обязательно следи, чтобы было все видно.
8. Главное меню (форум, участники и т.д.)
Цвет фона выбираешь тот же, каким заливал тело форума. Цвет надписей выбирай сам.

/* CS1.8 */
#pun-navlinks .container {
  background-color: #шестизнак;
  color: #шестизнак;
  }

На месте первого "шестизнака" - цвет фона, на месте второго - цвет текста.
9. Картинка в самый низ
Помнишь, мы добавляли этот пункт? Но сейчас он нам не понадобится, пока мы не будем его трогать, а позже я пришлю тебе стандартную картинку в самый низ, которую использую я, ты сделаешь свой копирайт.
10. Поле ввода
И этот пункт мы тоже добавляли к исходному коду. Цвет фона, думаю, стоит выбрать тот же, что и тело форума.

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

Первый "шестизнак", как обычно, - фон, второй - цвет текста.
11. Границы
Я уже писала в прошлом уроке, что в них нужды нет, поэтому после всех свойств border-color: везде нужно подставлять transparent; во всем блоке. Так и сделай.
12. Все ссылки в неактивном состоянии
Нужно выбрать какой-нибудь цвет, который будет выделяться, но сочитаться с цветом тела форума.

/* 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: #шестизнак
  }

Слово "шестизнак" меняешь на выбранный цвет.
13. Все ссылки в активном состоянии
Выбираешь цвет еще более светлый или просто ярче, чем в прошлом пункте.

.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: #шестизнак;
  }

Слово "шестизнак" меняешь на этот цвет.
14. Главное меню без наведения
Здесь цвет лично я предпочитаю брать тот же, что мы брали для неактивных ссылок, но ты можешь взять какой-то другой на свое усмотрение.

/* CS3.3 */
#pun-navlinks a {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" выбираешь какое-либо украшение текста (см. первый урок).
15. Главное меню при наведении
Здесь все просто.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #шестизнак;
  text-decoration: значение;
  }

Вместо слова "шестизнак" - выбранный цвет, вместо слова "значение" - выбранное украшение текста.

Задание
1. Собственно, весь наш этот урок состоял из задания. Как сделаешь, отпишись и скинь мне повторно ссылку на тестовик.

0

19

http://pho.mybb.ru/

0


Вы здесь » Кот » Архивы » `tsunami | деревянный


Рейтинг форумов | Создать форум бесплатно © 2007–2016 «QuadroSystems» LLC