Привет, Настя)
Хочу спросить: чему хотелось бы научиться? Будем ли начинать с "почти нуля" и разбирать все темы и проблемы, или ты уже в большей мере это умеешь?
Nicol with nou
Сообщений 1 страница 10 из 23
Поделиться12014-01-18 20:41:47
- Администратор
- Зарегистрирован: 2013-02-11
- Приглашений: 0
- Сообщений: 815
- Уважение: +42
- Позитив: +16
- Пол: Женский
- Возраст: 27 [1999-01-28]
- Провел на форуме:
12 дней 5 часов - Последний визит:
2015-05-31 14:02:35
Поделиться22014-01-18 20:44:34
- Участник
- Зарегистрирован: 2013-01-05
- Приглашений: 0
- Сообщений: 26
- Уважение: +1
- Позитив: +4
- Провел на форуме:
1 день 2 часа - Последний визит:
2014-11-07 00:16:49
Nicol.tea Привет
Мы можем начать с начала 
Что-то умею, но поскольку самоучка возможно что-то было упущено, поэтому мы и можем начать и сначала, что бы сразу выяснить где пробелы
Поделиться32014-01-18 21:03:08
- Администратор
- Зарегистрирован: 2013-02-11
- Приглашений: 0
- Сообщений: 815
- Уважение: +42
- Позитив: +16
- Пол: Женский
- Возраст: 27 [1999-01-28]
- Провел на форуме:
12 дней 5 часов - Последний визит:
2015-05-31 14:02:35
Хорошо, тогда выбери тему, сделай шаблон простого стиля и бумажный набросок что, где и как.
Поделиться42014-01-26 19:59:06
- Участник
- Зарегистрирован: 2013-01-05
- Приглашений: 0
- Сообщений: 26
- Уважение: +1
- Позитив: +4
- Провел на форуме:
1 день 2 часа - Последний визит:
2014-11-07 00:16:49
Nicol.tea
надеюсь для учебы сойдет
Поделиться52014-01-29 12:07:35
- Администратор
- Зарегистрирован: 2013-02-11
- Приглашений: 0
- Сообщений: 815
- Уважение: +42
- Позитив: +16
- Пол: Женский
- Возраст: 27 [1999-01-28]
- Провел на форуме:
12 дней 5 часов - Последний визит:
2015-05-31 14:02:35
Отлично. Тогда начнем с теории, ознакомься с тем, что я сюда прикреплю (точнее как обозначаются какие элементы в коде)
Верхнее окошечко (структура)
Код:
/*************************************************************
A - SETUP
**************************************************************/
/* A1 импорт цветовой схемы
-------------------------------------------------------------*/
/* A1.1 */
@import url(style_cs.css);
/* A2 отображение форума в браузере
-------------------------------------------------------------*/
/* 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 текст на всём форуме
-------------------------------------------------------------*/
/* A3.1 */
body {
font-size: 100.01%;
}
/* A3.2 */
.punbb {
font: normal 68.75% verdana, 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 h4, .punbb table, .punbb th {
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: normal
}
/* A3.8 */
.punbb .post-content em {
font-style: italic
}
/* A3.9 */
.punbb .post-content em.bbuline {
font-style: normal;
text-decoration: underline;
}
/* A3.10 */
.punbb a {
text-decoration: underline
}
/* A3.11 */
.punbb optgroup {
font-weight: bold;
}
/* A4 поверхностную очистку и скрытие элементов
-------------------------------------------------------------*/
/* 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 основной макет страниц и границ
-------------------------------------------------------------*/
/* A5.1 */
#pun {
margin: 30px;
position: relative;
}
/* A5.2 */
.punbb {
float: left;
width: 100%;
height: auto;
}
/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}
/* A5.4 */
.punbb .section, .punbb .main {
margin-bottom: 1em;
}
/* A5.5 */
.punbb .category, .punbb .post {
margin-top: 0.4em;
}
/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
margin-top: 0;
}
/* 5.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: none none solid none;
border-width: 0px 0px 2px 0px
}
/* A5.9 */
.punbb .container {
border-style: solid;
border-width: 1px;
}
/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: none solid solid none;
border-width: 0 1px 1px 0;
}
/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/
/* B1 разбор содержания, подписи и движков
-------------------------------------------------------------*/
/* B1.1 */
.punbb .post-content {
padding: 0;
margin: 0;
width: 100%;
overflow: hidden;
}
/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px 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: 1px;
}
/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
display: block;
padding-bottom: 0.7em;
font-size: 1.1em;
font-weight: bold;
font-style: normal;
margin: 0;
}
/* B2 блок информации
-------------------------------------------------------------*/
/* B2.1 */
.punbb .info-box {
padding: 1.1em 1.7em 1em 1.7em;
border-style: solid;
border-width: 1px;
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: bold;
}
/* B3 разбивку на странице и размещение ссылок
-------------------------------------------------------------*/
/* 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: bold;
}
/* 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: bold
}
/* B3.8 */
.subscribelink {
clear:both;
padding-top: 0.3em;
padding-bottom: 0.5em;
}
/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/
/* C1 форму макета
-------------------------------------------------------------*/
/* 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: 1px;
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: bold
}
/* 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 12em 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;
}
/* 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 таблицу макета
-------------------------------------------------------------*/
/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}
/* 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: left;
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: bold;
}
/* C2.9 */
.punbb td span.youposted {
font-weight: bold;
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: 1px 0 0 1px;
padding: 0.8em 1em;
}
/* C2.12 */
.punbb .main th {
border-style: none none none solid;
border-width: 0 0 0 1px;
padding: 0.4em 1em 0.4em 1em;
}
/* C2.13 */
.punbb .main .tcl {
border-left-style: none;
border-left-width: 0
}
/* C2.14 */
.punbb tbody.hasicon td.tcl {
padding-left: 3.2em
}
/* C2.15 */
.punbb div.icon {
border-style: solid;
border-width: 0.6em 0.6em 0.6em 0.6em;
height: 0;
line-height: 0.0;
margin-top: 0.1em;
width: 0;
}
/* C2.16 */
.punbb table div.icon {
font-size: 1.05em;
position: absolute;
margin-left: -2.2em;
}
/* C3 темы
-------------------------------------------------------------*/
/* C3.1 */
.punbb .post .container {
border-style: none solid solid solid;
border-width: 1px;
margin-top: -1px;
padding-bottom: 1px;
}
/* C3.2 */
.punbb .post h3 {
border-style: solid solid none solid;
border-width: 1px;
}
/* C3.3 */
.punbb .post h3 span {
padding: 0.5em 1em;
display: block;
margin-left: 19em;
border-left-style: solid;
border-left-width: 1px
}
/* 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: -1.5em;
overflow: hidden;
}
/* C3.6 */
.punbb .post .post-author ul, .punbb .post .post-author p {
padding: 0 1em 1em 1em;
line-height: 140%;
}
/* C3.7 */
.pa-author {
font-size: 1.1em;
font-weight: bold;
}
/* C3.8 */
.pa-author a {
text-decoration: none
}
/* C3.9 */
li.pa-title {
padding-bottom: 0.4em;
font-weight: bold;
}
li.pa-online {
line-height: 0.8em;
border-left-style: solid;
border-left-width: 0.7em;
padding-left: 0.4em;
margin-top: 0.7em;
}
/* C3.11 */
.punbb .post-body {
margin-left: 19em;
border-left-style: solid;
border-left-width: 1px;
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: 1px;
}
/* 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: 1px;
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 меню модераторов
-------------------------------------------------------------*/
/* 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 страницу сообщений
-------------------------------------------------------------*/
/* C5.1 */
.punbb .info .container {
padding: 0.8em 1em
}
/* C5.2 */
.punbb .info .container .backlink {
padding-top: 0.8em;
}
/* C6 страницу профиля
-------------------------------------------------------------*/
/* 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: bold;
}
/* C6.4 */
#viewprofile ul, #profilenav ul {
border-style: solid;
border-width: 1px;
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: bold;
}
/*C6.9 */
#setmods dt {
float: left;
width: 14em;
margin-left: -16em;
padding: 0.8em 1em;
font-weight: bold;
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: right;
margin: 0 0 0.8em 1.8em
}
/* C7 страницу списка пользователей
-------------------------------------------------------------*/
/* 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: 1px;
}
/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/
/* D1 лого и описание форума
-------------------------------------------------------------*/
/* D1.1 */
#pun-title {
margin: 0;
border-style: solid solid none solid;
border-width: 1px 1px 0 1px;
}
/* D1.2 */
#pun-title h1 {
display : block;
height : 40px;
padding: 2em 1em 0 1em;
}
/* D1.3 */
#pun-title .container {
border-style: none solid none solid;
}
/* D1.4 */
#pun-title h1 span {
font-size: 1.5em;
}
#pun-title table {
border: none;
height: 40px;
width: 100%;
}
#pun-title td.title-logo-tdl {
border: none;
width: 100%;
}
#pun-title td.title-logo-tdr {
border: none;
width: 468px;
}
/* D2 навигацию на странице
-------------------------------------------------------------*/
/* 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 навигацию на форуме
-------------------------------------------------------------*/
/* D3.1 */
#pun-navlinks, #pun-navlinks .container {
border-style: none;
border-width: 0;
margin: 0;
}
/* D3.2 */
#pun-navlinks .container {
padding: 0.7em 1em;
}
/* D.3 */
#pun-navlinks li {
display: inline;
padding-right: 1em;
}
/* D3.4 */
#pun-navlinks li a {
font-size: 1.1em;
}
/* D4 пользовательские ссылки
-------------------------------------------------------------*/
/* D4.1 */
#pun-ulinks {
margin-top: 0;
}
/* D4.2 */
#pun-ulinks .container {
border-top: none;
padding: 0.7em 1em;
}
/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
display: inline;
border-left-style: solid;
border-left-width: 1px;
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 приветствие
-------------------------------------------------------------*/
/* 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: 1px 0;
height: 0;
margin: -2px 1em;
position: relative;
z-index: 1;
}
/* D6 объявление
-------------------------------------------------------------*/
/* D6.1 */
#pun-announcement h2 {
padding: 0;
margin: 0 1em -3.5em 1em;
border-style: none none solid none;
border-width: 0 0 1px 0;
position: relative;
font-weight: bold;
}
/* D6.2 */
#pun-announcement h2 span {
display: block;
padding: 1em 0 0.8em 0;
border-bottom-style: solid;
border-bottom-width: 1px;
}
/* D6.3 */
#pun-announcement .container {
padding: 4.3em 1em 1em 1em;
}
/* D7 статистику
-------------------------------------------------------------*/
/* 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: 1px;
float: left;
width: 100%;
line-height: 130%;
}
/* D7.5 */
li#onlinelist div {
border-top-style: solid;
border-top-width: 1px;
padding: 0.7em 0 0 0;
}
/* D8 быстрый переход и низ форума
-------------------------------------------------------------*/
/* 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: bold;
overflow: hidden;
margin-bottom: 0;
border-bottom: none;
}
/* D8.7 */
#pun-crumbs2 .container {
border-bottom: none;
padding: 0.8em 1em;
font-size: 1.1em;
}
/* D8.8 */
#pun-break4 {
margin: -2px 1em;
border-style: solid none;
border-width: 1px 0;
position: relative;
height: 0;
z-index: 1;
}
/* D8.9 */
div.punbb-admin #pun-about .container {
border-top-style: solid;
border-top-width: 1px;
}
/* D9 файл справки
-------------------------------------------------------------*/
/* D9.1 */
#pun-help .formal .info-box h3.legend {
border-bottom-style: solid;
border-bottom-width: 1px;
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: 1px;
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;
}Нижнее окошечко (стиль,цвета)
Код:
HTML, BODY {основной фон}
#pun {подложка}
#pun-title table {шапка}
#pun-title .title-logo {логотип}
#pun-title .title-logo span {display: none;}
#pun-navlinks .container {меню навигации}
#pun-ulinks .container {пользовательское меню}
#pun-announcement h2 {заголовок объявления}
#pun-announcement .container {объявление}
#pun-status .container {окно статуса}
#pun-crumbs1 .container {название форума}
#pun-main h2 {категории форума}
#pun th {строка форум тем сообщений}
Div.icon {нет}
TR.inew Div.icon {есть}
TR.isticky Div.icon {выделено}
TR.iclosed Div.icon {закрыто}
TR.iredirect Div.icon {перенесено}
#pun .tcl {список форумов}
#pun .tc2 {количество тем}
#pun .tc3 {количество сообщений}
.modlist {список модераторов}
#pun-main td {границы форумных таблиц}
#pun-stats .statscon {статистика форума}
li#onlinelist {пользователи онлайн}
li#onlinelist div {посетители за 24 часа}
#pun-crumbs2 p.container {название внизу форума}
#pun-about p.container {копирайт сервиса}
#html-footer .container {хтмл низ}
#pun-main h1 {заголовок названия тем}
#pun-main .pagelink {нумерация страниц}
#pun-main .postlink {ссылки начать тему опрос}
#pun-main .modmenu p.container {строка модерирования}
#pun-main .post h3 {шапка постов}
#pun-main .post h3 span {шапка постов 2}
#pun-main .post .permalink {дата сообщений}
#pun-main .post h3 strong {номер сообщения}
#pun-main .post-author ul {информация об авторе}
.pa-author {ник}
.pa-title {статус}
.pa-reg {регистрация}
.pa-posts {сообщений}
.pa-avatar {аватар}
.pa-reputation {репутация}
.pa-ip {айпи адрес}
.pa-online {активен}
#pun-main .post .container {задник информации об авторе}
#pun-main .post-body {контейнер сообщений}
#pun-main .post-content{содержимое постов}
#pun-main .code-box {контейнер кода}
#pun-main .quote-box {контейнер цитаты}
#pun-main .post-links li {ссылки под сообщением (ЛС, Удалить, Редактировать, Пофиль и т.д.)}
#pun-main .post-links ul {Строка с ссылками под сообщениями}
#pun-main .subscribelink {подписка на тему}
#pun-main .formal .container {контейнер всей формы ответа}
#pun-main fieldset {контейнер с надписью "напишите ваше сообщение"}
#form-buttons table {Кнопки BB-кодов Для всей строчки кнопок}
#form-buttons td {Для ячеек кнопок}
#pun-main .fs-box {Контейнер, содержащий кнопки и форму для ввода содержимого поста}
#pun-main .formsubmit input {кнопки отправить и посмотреть}
#pun-main .formal textarea {поле для ввода содержимого текста}
ПРОФИЛЬ
#profilenav .container {контейнер профиля}
#profilenav {Навигационный контейнер профиля}
#profilenav h2 {Заголовок навигационного контейнера}
#profilenav h2 span {Текст заголовка навигационного контейнера}
#profilenav ul {Контейнер списка ссылок}
#profilenav li {Меню ссылок для навигации по профилю}
#profilenav fieldset{ Контейнер поля с личными данными}
#pun-main .fs-box {Поле с вводом личных данных}Поделиться62014-01-29 17:13:59
- Участник
- Зарегистрирован: 2013-01-05
- Приглашений: 0
- Сообщений: 26
- Уважение: +1
- Позитив: +4
- Провел на форуме:
1 день 2 часа - Последний визит:
2014-11-07 00:16:49
Nicol.tea
Я параллельно уже отчитала относительно большую книгу про html и CSS поэтому
поэтому большая часть понятна, мы можем перейти к заданию или дальше, что по плану
(а так вечером разберу по косточкам первое окошечко, давно ручки чешутся)xD
на сегодня есть вопрос не по теме, буду рада если зацепишь ответы
Какие вообще страницы майбб нам дает
стартовая, страница профиля и лс и т.д. есть где-то кем-то написанный списочек?
Поделиться72014-02-02 13:06:02
- Администратор
- Зарегистрирован: 2013-02-11
- Приглашений: 0
- Сообщений: 815
- Уважение: +42
- Позитив: +16
- Пол: Женский
- Возраст: 27 [1999-01-28]
- Провел на форуме:
12 дней 5 часов - Последний визит:
2015-05-31 14:02:35
nou написал(а):
Я параллельно уже отчитала относительно большую книгу про html и CSS поэтому
поэтому большая часть понятна, мы можем перейти к заданию или дальше, что по плану
(а так вечером разберу по косточкам первое окошечко, давно ручки чешутся)xD
Эти книжки) У тебя во всех написано одинаково или близко по смыслу? В моих везде по разному, хоть смейся, хоть плачь)
nou написал(а):
Какие вообще страницы майбб нам дает
стартовая, страница профиля и лс и т.д. есть где-то кем-то написанный списочек?
Честно говоря - не знаю, никогда особо не интересовалась. Только составила себе такие окошки, чтобы отличать для чего какое свойство\значение.
К вечеру постараюсь скинуть урок по свойствам и значениям, подождешь?
Поделиться82014-02-02 18:24:03
- Участник
- Зарегистрирован: 2013-01-05
- Приглашений: 0
- Сообщений: 26
- Уважение: +1
- Позитив: +4
- Провел на форуме:
1 день 2 часа - Последний визит:
2014-11-07 00:16:49
Nicol.tea
буду ждать с нетерпением
есть различия (но я анализирую и беру то что ближе по логики подходят), но каждая последующая просто дополняет предыдущую
Мне с книгой повезло, несмотря на то, что они все написаны для сайтов, а не для форумов, а тем более для майбб, она раставила многое на свои места, и дала кучу намеков на креативные решения
Поделиться92014-02-05 16:12:24
- Администратор
- Зарегистрирован: 2013-02-11
- Приглашений: 0
- Сообщений: 815
- Уважение: +42
- Позитив: +16
- Пол: Женский
- Возраст: 27 [1999-01-28]
- Провел на форуме:
12 дней 5 часов - Последний визит:
2015-05-31 14:02:35
Я нагло стырю статью у slastnicova, ведь она мне самой очень помогла)
Помогают во многом следующие ресурсы:
http://lenagold.ru/ - сайт с готовым клипартом (использовано для создания дизайна).
http://artfile.ru/ - на этом сайте выкладываются обои (использовано для создания дизайна).
http://ilovepsd.ru/ - замечательные советы по работе с макетом
http://www.wisdomweb.ru/ - на этом сайте есть отличные учебники по CSS и CSS3 с наглядными примерами
http://htmlbook.ru/ - шпаргалка по тегам HTML и свойствам CSS, всегда в нее подглядываю
http://www.google.com/webfonts - сервис Google для импорта красивых шрифтов на сайтыЭти ресурсы стоить запомнить и переодически мы ими будем пользоваться.
Как работает CSS
Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.
Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять как они работают и запомнить написание кодов.
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:
#pun-title {тут будет код}
.title-logo-tdl {тут будет код}селекторов может быть не один, а сразу несколько. когда нужно задать одинаковые свойства сразу нескольким элементам html-кода, нужно перечислить идентификаторы и классы через запятую, например:
#title-logo-table, #title-logo-tr, #title-logo-tdl {тут будет код}
СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:#селектор {свойство: значение;}
пример:
#pun-navlinks {backgroud-color: #FF0000;}
расшифровка:
меню навигации {цвет фона: красный;}Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (
#селектор {свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
....
}Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.
Параметры и значения CSS
Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измеренияem - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ
Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.
Параметры CSS
ФОНbackground-color
Цвет фона элемента. Значением может быть веб-название цвета.
background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинкиbackground-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)
Границы (рамки)border
Все параметры рамки, например, толщина, цвет и т.д.border-color
Цвет рамкиborder-width
Толщина рамкиborder-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фонаborder-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки
ШРИФТ И ТЕКСТcolor
Цвет шрифта в элементеfont-size
Размер шрифта.
Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсивfont-weight
Толщина начертания
Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.font-family
Семейство шрифта
Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.font
Все вышеперечисленные параметры шрифта вместеtext-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру
text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание
Советую или переписать, или распечатать это, в будущем пригодится)
А пока создавай тестовик.
Поделиться102014-02-06 00:17:46
- Участник
- Зарегистрирован: 2013-01-05
- Приглашений: 0
- Сообщений: 26
- Уважение: +1
- Позитив: +4
- Провел на форуме:
1 день 2 часа - Последний визит:
2014-11-07 00:16:49
Nicol.tea
Тырь, можешь просто кидать ссылку на то что нужно прочитать
Тем более так быстрее учиться, чем каждый раз писать урок заново
Спасибо, идем дальше, тестовиков у меня куча.
Оффтоп
я дочитала вторую книгу.
У этой статьи Кое где не совсем удачный подбор слов,
Если я потом отважусь попроситься в учителя надо будет исправить и расширить
Отредактировано nou (2014-02-06 00:22:22)
