Елена (e_ledi) wrote,
Елена
e_ledi

Category:

Боди, топменю и сайдбар. Перепост Dizain-ot-tani.

пост отсюда


Попросили...
*У меня к тебе предложение-просьба: неплохо бы каждый блок диза расписать кто за что отвечает\влияет и как с ними бороться))
Это не урок (поскольку я сама ещё не очень много знаю), а так, делюсь опытом.
Строго не судите, рассказываю как могу. Если кто поймёт моё косноязычье, отлично!)) Если нет - спрашивайте. Будем разбираться))
Кто чуток знает английкий, тому легче)) Я учила немецкий)) Кстати, inner - внутренний



Картинку стырила в
в Обложки для журналов
.
Там же подробные уроки и вообще много умностей про дизайн журнала.

Начнём с body

Ну про альфу и бету знают все.

#content-inner - это всё, что ниже шапки. Если вам надо подтянуть к шапке посты и сайдбар, уменьшаете TOP: у меня тут стоит top: -25px.

Далее div.post-asset. Сюда я ставлю цвет и тень для блока.Это сам пост.Ну и отступы-ширину, это само собой.

div.asset-inner - внутренности поста. Если не хотите, что бы текст прилепился к рамке, то размер сделайте меньше, чем post-asset. Или воспользуйтесь padding.
padding:10px 20px 30px 40px; (цифры для наглядности)
10px - верх
20px - справа
30px -низ
40px -слева

.post-asset .asset-body - это *тело поста, ваша запись. Сюда можно кроме остальных атрибутов, указать стиль шрифта (допустим font-style: italic;), тогда прописью будет только сам пост. Если это сделать в боди, таким весь шрифт дизайна будет.

/*----TOPMENU----*/ - это шапка дизайна.

div#header - это сама шапка в целом. Тут у нас месторасположение, размер, цвет и тень шапки.Если хотите, что бы тень была только вокруг картинки, то её прописываете там же, где и картинку. Или в #header-photo,а в header-photo-inner только картинку.

#header-inner - внутренний блок в шапке
Если вы хотите поставить не одну, а две картинки, то первая будет в #header-photo, а вторая в
#header-photo-inner. Вторая должна быть на прозрачном фоне, иначе перекроет первую и ту видно не будет.
Что бы картинка не повторялась (если маленькая), background-repeat: no-repeat;
Вообще в коде есть правило *что ниже, то и главней.Исключение из этого правила делается путём прописывания !important; Пишется он через пробел
вот так:
width: 1202px !important;

div#header-description - это ваш подзаголовок.Он весь прописывается в /*----TOPMENU----*/, т.к. не является ссылкой.Кстати, у некоторых он так и остаётся сереньким и маленьким, в генераторе его оформления просто нет.

ul.nav - меню
ul.nav li.item - пункты меню
ul.nav li.current - выбраный пункт меню.
Размер , цвет и стиль шрифта прописываются в /*----LINKS----*/ (ссылки)
(это почти в конце кода ищите), потому что являются ссылками. Заголовки и метки, кстати, тоже там.Ну об этом позже, потому что пишу по своему коду *сверху вниз))

prevnext skiplinks a - *Предыдущая *Следующая запись внизу блога.

/*----SIDEBAR----*/
div.widgetт - цвет и тень для сайдбара я прописываю тут.
background-color: #fff; - цвет (это белый)
box-shadow: 0px 0px 8px 0px #9C815A -это тень
0 0 20px rgba(228, 205, 157, 0.84) inset - внутренняя тень . пишутся через запятую:

box-shadow: 0px 0px 8px 0px #9C815A, 0 0 20px rgba(228, 205, 157, 0.84) inset;

.widget .user-pic a img,
.widget .user-pic img {
margin: 10px 40px;} тут его можно поставить посередине, а не сбоку профиля, с помощью margin.

div.calendar-widget td,
div.calendar-widget th{
text-align: center;
font-size: 16px;
box-shadow: 0px 0px 1px 0px #9C815A; календарь в сайдбаре. С помощью тени его можно оформить *в квадратиках. Не придумала, как ещё обозвать)))

.profile-name - ваше имя в профиле. Цвет, размер и семейство шрифта указывается тут.

Лирическое отступление ))

Отступы
Margin - это отступ наружу
Отступ внутрь - padding
Задаётся так же как margin, но при этом объект "отталкивает" не внешние объекты, а своё содержимое.
Если нужно чтобы содержимое не прилипало к краям - нужен padding. Если нужно чтобы сам блок никуда не прилипал - margin.

Продолжение будет позже.
Tags: Дизайн
Subscribe
promo e_ledi january 14, 2019 15:12 4
Buy for 20 tokens
САЙТ О РУССКОМ ЯЗЫКЕ @Язык — это большое народное сокровище. Его нельзя не уважать, как нельзя не уважать родной народ@ Иван Мележ, писатель. Приветствуем вас на страницах сайта о русском языке Язык — это первоэлемент культуры каждого человека и всего общества в целом. В современной…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic
  • 0 comments