Coding A CSS3 & HTML5 One Page Template | Tutorialzine demo

Разметка вверху будет для каждой статьи. Вначале идет разделяющая полоса (по типу hr сейчас ). Далее идет новый тег article с уникальным ID, который используется для прокрутки страницы.

Внутри статьи также присутствует новый тег для показа картинок к статье.

В конце у нас идет тег футера.

Шаг 3 — CSS

Поскольку мы используем HTML5, нам необходимо предпринять дополнительны меры для стилизации. Теги новой версии HTML не содержат стилей по умолчанию пока еще. Но это легко поправить несколькими дополнительными строками CSS и страница будет выглядет так, как это необходимо.

header,footer, article,section, hgroup,nav, figure < display:block; >article .line< /* Разделяющая полоса: */ background-color:#15242a; border-bottom-color:#204656; margin:1.3em 0; > footer .line < margin:2em 0; >nav < background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; padding:0 5px; position:absolute; right:0; top:4em; border:1px solid #FCFCFC; -moz-box-shadow:0 1px 1px #333333; -webkit-box-shadow:0 1px 1px #333333; box-shadow:0 1px 1px #333333; >nav ul li < display:inline; >nav ul li a, nav ul li a:visited < color:#565656; display:block; float:left; font-size:1.25em; font-weight:bold; margin:5px 2px; padding:7px 10px 4px; text-shadow:0 1px 1px white; text-transform:uppercase; >nav ul li a:hover < text-decoration:none; background-color:#f0f0f0; >nav, article, nav ul li a,figure< /* Applying CSS3 rounded corners: */ -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; >

Нам необходимо установить значение правила display на block для новых тегов. После этого можем обращаться с ними также, как и с обычными тегами.

Мы придаем стиль горизонтальной линии, статьям, и кнопкам навигации. В самом низу мы прописываем свойство border-radius для четырех разных типов элементов сразу для экономии.

/* Стили для статей: */ #page < width:960px; margin:0 auto; position:relative; >article < background-color:#213E4A; margin:3em 0; padding:20px; text-shadow:0 2px 0 black; >figure < border:3px solid #142830; float:right; height:300px; margin-left:15px; overflow:hidden; width:500px; >figure:hover < -moz-box-shadow:0 0 2px #4D7788; -webkit-box-shadow:0 0 2px #4D7788; box-shadow:0 0 2px #4D7788; >figure img < margin-left:-60px; >/* Стили для футера: */ footer < margin-bottom:30px; text-align:center; font-size:0.825em; >footer p < margin-bottom:-2.5em; position:relative; >footer a,footer a:visited < color:#cccccc; background-color:#213e4a; display:block; padding:2px 4px; z-index:100; position:relative; >footer a:hover < text-decoration:none; background-color:#142830; >footer a.by < float:left; >footer a.up

Во второй части кода мы придаем более детальные стили нашим объектам.

Давайте перейдем к последнему шагу.

Шаг 4 — jQuery

Для модернизации данного шаблона мы создадим плавный эффект скролла после нажатия на ссылку с использованием jQuery плагина scrollTo. Для его работы необходимо пройтись по всем ссылкам и присвоить событие onclick, которое вызовет функцию $.srollTo(), описанную в скрипте плагина.

$(document).ready(function()< /* Выполнение скрипта после загрузки страницы */ $('nav a,footer a.up').click(function(e)< // Если нажата ссылка - плавный скролл к нужному объекту: $.scrollTo( this.hash || 0, 1500); e.preventDefault(); >); >);

В этом уроке мы ознакомились с возможностями новых семантических свойств HTML5 и их помощью создали одностраничный красивый шаблон. Можете использовать его в собственных целях.

Данный урок подготовлен для вас командой сайта ruseller.com

Источник

How to Make A blog Template Design Using HTML CSS

hello viewers, in this article I will tell you how to create custom blog template design help of html CSS. this template is very simple and very attractive. you have seen lots of blog template on internet but this different by all. because we are not use a download template design. we create design by your manual coding. you can easily modify this template design to your need according. this blog theme is based on two main colours first one is blue colour and second one is black colour you can see that on this project. colour combination is main part of your template because if your colour choice is not good so that your template design is also not looks good. when you create a web template design two main things you have one is web template fonts and second one is web template colour combination. if you have chased correct colour and fonts. then your web template design looking are very attractive and unique.

now you can copy the source code in below and then paste your html document

Blog
  
Latest
  
Contact
  
Subscribe

actually want to read
Try it