Подписка
Email
Fb
RSS
Twitter
Email

Уроки верстки сайтов — контент

Видео курс верстки сайтовРад снова приветствовать Вас на блоге DenWeb.Ru! Продолжаем видеокурс верстки сайта из PSD в HTML/CSS. В прошлый раз мы задали сброс стилей, прописали css стили на шапки сайта и выровнили блок для будущего сайдбара.

Сегодня, как я и обещал приступаем к области контента, то есть основного содержимого сайта. Вашему вниманию очередной видео урок по верстке:

Итак, что мы сегодня получили (весь код css выкладывать не буду, только то, что сделал именно сегодня):

/*Content*/
#conteiner {
	padding-top: 40px;
}

#content {
	width: 516px;
	float:left;
	padding: 0 50px 0 32px;
}
#content_header {
	font-size: 25px;
	color: #fff;
	text-transform:uppercase;
	background: #1a1e27;
	margin-bottom: 15px;
	width: 270px;
}

.post {
	margin-bottom: 40px;
}

.post h2 a {
	font-size: 24px;
	color:#4a4d54;
	text-transform:capitalize;
}

.cat {
	padding-right:7px;
	border-right: 1px solid #fff;
}

.cat a {
	font-style:italic;
}

.date {
	padding-left: 7px;
	border-left: 1px solid #d5d5d5;
	margin-left: -4px;
}

.date_text {
	font-style:italic;
	color: #868686;
}

.phead {
	margin-bottom: 10px;
}

.post img {
	border: 1px solid #c6c6c6;
	padding: 2px;
	float:left;
	margin-right: 5px;
}

.post p {
	padding-left: 153px;
}

.meta_bottom {
	margin: 10px 0 0 153px;
	line-height: 1.5;
	border-top: 1px solid #c7c7c7;
}

.more-link {
	float:right;
	margin-top: 15px;
	display:block;
	padding: 5px;
	background: #797979;
	color: #fff;
}
.more-link:hover {
	text-decoration:none;
	background: #949393;
	color: #ccc;
}
Вы можете оставить комментарий.

20 комментариев к записи “Уроки верстки сайтов — контент”

  1. Dmitry:

    Спасибо за урок!Денис, ответь плз на несколько вопросов. 1) а если сайт не фиксированный, то есть ширина стр изменяется в зависимости от разрешения экрана, тогда какие значения следует присваивать body, div и т.д. (все с помощью margin: 0 auto)? 2)как ограничить разрешение страницы в минимальное значение к примеру 640×480 и максимальное 1920×1080?3)можно ли сделать шапку «Header» — изображение на всю ширину стр, что бы оно меняли свое разрешение и подстраивалось под разрешение монитора пользователя?

    • Если ширина должна быть на все окно, то значение — width:100%;

      Блокам контента и сайдбара можно ширину тоже в процентах задать. Минимальная ширина задается свойством min-width: 600 px; Максимальная — max-width: 1000 px; 
      То есть получается так:
      #wrapper {
      1. min-width600px;
      2. max-width1000px;
      3.   margin0 auto;
      }
      Шапка аналогично делается. Ширина задается 100%.
      Вообще удобно каркас делать вот в этом сервисе.

  2. Dmitry:

    Спасибо, все работает.

  3. SUPER!!! Urok klassss!!!Mnogo novogo uznal =)

  4. Oleg:

    .cat { padding-right:7px; border-right: 1px solid #fff;}.cat a { font-style:italic;}Не получилось с этим,незнаю в коде все верно(HTML)Но когда перезагружаю страницу нечего не меняется,остается так , будто мы не применили эти настройки

  5. Remii:

    Перерыла интернет(( не могу найти окно как у тебя на видео с всплывающими подсказками. Можно узнать название плагина/программы к Notepad++?

  6. Сергей:

    http://img714.imageshack.us/img714/7704/25765495.png Вот так ведут себя заголовки если превью поста меньше картинки по высоте, как это исправить?

  7. Сэр_Йожик:

    Я сравнил ваши файлы index.html и style.css со своими, вроде все ошибки исправил, но блок «контент» у меня почему-то находится правее, чем нужно. Из-за этого «сайдбар» не умещается( ( А ещё у вас ширина «футера» равна ширине «wrap», а у меня нет, и содержимое «футера» естественно тоже не укладывается по ширине((

  8. Геворг:

    Хорошии уроки, пожимаю руку тебе! Но чего не хватает это урок верстки фона. Спасибо за уроки.

  9. Sargon:

    Ден, расскажи пожалуйста о значении display: block; 

    • Это свойство делает элемент блочным. В одной строке с этим элементом не могут находиться другие (если не задан float).

  10. Никита:

    Здравствуйте! Не могли бы вы поподробнее рассказать про программу picpic, пожалуйста?

  11. dim1983:

    Подскажите пожалуйста как выровнять два блока div по высоте при верстке сайта . Все время получается разная высота колонок.

  12. Дмитрий:

    Здоровские уроки, спасибо Денис !Вопрос, как не удаляя текст в контенте, сделать так, чтобы он отображался как в шаблоне ?

  13. Baser:

    .more-link {   float:right;   display:block;...Если мне память не изменяет, то<code>display:blockне нужен, ибо прописывая <code><code>  floatмы автоматом делаем элемент блочным, если он таковым не был</code>

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика