Lecaw

Учимся создавать Web-сайты

Мой портал – единственный макет страницы для Вашего сообщества

June 5, 2012 627hits

Сегодня я подготовил новый большой шаблон. Это - элегантное расположение блоков в темных цветах. Он состоит из логотипа, социальных значков, навигационного меню, поиска, нижнего колонтитула, рекламного раздела, блока заголовка, и 2 других блоков: список элементов и последних новостей. Последние два блока - базируемые списки UL-LI.

 ДЕМО Исходные файлы

 

Начнем

Во-первых, подготовьте новую папку, и создайте в ней следующие папки:

  • css – для таблиц стилей CSS (reset.css, style.css)
  • images – для всех изображений
  • js – для файлов JS (jquery.spinner.js и script.js)

Разметка разделов

Теперь посмотрите на HTML разметку нашего заголовка:

 
<!DOCTYPE  html>
<html lang="en"><head>
<title>'My portal' single page layout | Script tutorials demo</title>
<meta charset="utf-8">     <!-- Link styles -->
<link rel="stylesheet" href="/css/reset.css" type="text/css" />
<link rel="stylesheet" href="/css/style.css" type="text/css" />     <!-- Link scripts -->
<script src="https://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.7.1");
</script>
<script src="/js/jquery.spinner.js"></script>
<script src="/js/script.js"></script>
</head>

Основное расположение

Основная часть состоит из 3 основных разделов: заголовок (логотип, социальные значки, навигационное меню и поисковая форма), основной раздел (Объявление, Заголовок и Последние новости), и нижний колонтитул (различные ссылки).

<body>
 <header><!-- Define the header section of the page -->
 <h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="/images/logo.png" alt=""></a>
</h1> <ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="/images/twitter48.png" alt=""></a></li>
.....
</ul> <nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
.....
</ul>
</nav> <form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form> </header> <div id="content"><!-- Define the content section --> <div class="box box1">
.....
</div> <div class="box box2">
.....
</div> <div class="box box3">
.....
</div> <div class="box box4">
.....
</div> </div> <footer><!-- Define the footer section of the page -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
.....
</ul>
</footer> </body>

Основные стили CSS

/* base styles */
body {
	background:#000;
	font-family:Arial, Helvetica, sans-serif;
	font-size:100%;
	line-height:1em;
	color:#000;
}
header {
	background:url("../images/header-bg.png") repeat-x scroll 0 0 transparent;
	height:160px;
	position:relative;
}
a {
	color:#2cbcfc;
	outline:none;
}
a:hover {
	text-decoration:none;
}
p {
	line-height:16px;
	margin-bottom:16px;
}
h1 {
	position:absolute;
	left:10px;
	top:49px;
}
h2 {
	font:bold 20px/24px Arial, Helvetica, sans-serif;
	color:#fff;
	text-transform:uppercase;
	margin-bottom:11px;
	padding:0 4px;
}
h3,.h3 {
	font:bold 13px/22px Arial, Helvetica, sans-serif;
	color:#2cbcfc;
	text-transform:uppercase;
}
.white {
	color:#FFF;
}
.blue {
	color:#22a2fb;
}
.gray {
	color:#696565;
}
.rm {
	width:108px;
	padding-left:14px;
	background:url(../images/rm-bg.png) no-repeat;
	font:bold 11px/29px Arial, Helvetica, sans-serif;
	display:inline-block;
	text-decoration:none;
	text-transform:uppercase;
	color:#fff;
	float:right;
}
.rm:hover {
	color:#000;
}
.upc {
	text-transform:uppercase;
}
.extra-wrap {
	overflow:hidden;
}
.clear {
	clear:both;
	line-height:0;
}
.blck {
	display:block;
}

Позиция шапки

Разметка шапки:

<header><!-- Define the header section of the page -->
 <h1 class="logo"><!-- Define the logo element -->
<a href="#"><img src="/images/logo.png" alt=""></a>
</h1> <ul class="soc-ico"><!-- Define social icons -->
<li><a href="#"><img src="/images/twitter48.png" alt=""></a></li>
<li><a href="#"><img src="/images/google48.png" alt=""></a></li>
<li><a href="#"><img src="/images/facebook48.png" alt=""></a></li>
<li><a href="#"><img src="/images/stumbleupon48.png" alt=""></a></li>
<li><a href="#"><img src="/images/rss48.png" alt=""></a></li>
</ul> <nav><!-- Define the navigation menu -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Radio</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">back to Script Tutorials</a></li>
</ul>
</nav> <form id="search"><!-- Define the search element -->
<input type="text" name="s" />
<input type="submit" value="" />
</form> </header>

CSS стили для блоков шапки

/* navigation menu styles */
header nav {
	position:absolute;
	top:82px;
	white-space:nowrap;
}
header nav li {
	float:left;
	margin-right:1px;
}
header nav li:first-child {
	margin-left:20px;
}
header nav a {
	background:url(../images/nav-sprite.png) 0 0 repeat-x;
	color:#fff;
	display:block;
	font:bold 14px/20px Arial, Helvetica, sans-serif;
	height:32px;
	padding:14px 18px 0;
	text-decoration:none;
	text-transform:uppercase;
}
header nav a:hover,header nav .active a {
	background-position:0 -70px;
}
/* header styles */
.logo {
	left:30px;
	position:absolute;
	top:20px;
}
.soc-ico {
	position:absolute;
	right:40px;
	top:25px;
	width:270px;
}
.soc-ico li {
	float:left;
	margin-left:5px;
}
#search {
	border:1px solid #000;
	position:absolute;
	right:50px;
	top:95px;
	width:226px;
}
#search input[type=text] {
	background-color:#4F4F4F;
	border-width:0;
	color:#FFF;
	float:left;
	font-size:12px;
	height:28px;
	line-height:28px;
	margin-right:1px;
	padding:0 5px;
	width:185px;
}
#search input[type=submit] {
	background:url(../images/search-submit.png) no-repeat;
	border:none;
	cursor:pointer;
	float:left;
	height:28px;
	width:30px;
}

Основная секция с контентом

Теперь займемся основным содержанием. Оно состоит из 4 различных блоков: Объявление (с jQuery ползунком), новый блок со встроенным видео, затем 2 блока со списками, сначала один – с изображениями (Вы можете использовать его в качестве списка элементов или фотографий), второй – без изображений (Вы можете использовать этот список, чтобы показать некоторые новости).

<div id="content"><!-- Define the content section -->
 <div class="box box1">
<div class="gallery">
<div class="pic"><img src="#" alt=""></div>
<ul class="imgs">
<li class="current"><a href="#"><img src="/images/thumb1.jpg" alt=""></a></li>
<li><a href="#"><img src="/images/thumb2.jpg" alt=""></a></li>
<li><a href="#"><img src="/images/thumb3.jpg" alt=""></a></li>
</ul>
</div>
<div class="fl">
<h3>Promo block - item title</h3>
<strong class="upc white">Promo block - item description</strong> </div>
</div> <div class="box box2">
<h2 class="fl"><span class="blue">Our</span> headline</h2>
<iframe width="332" height="187" src="http://www.youtube.com/embed/DzH_wX6Uauc" frameborder="0" allowfullscreen></iframe>
</div> <div class="box box3">
<h2><span class="blue">Last</span> members</h2>
<ul class="box-set">
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 1</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 2</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 3</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 4</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 5</h3>
<strong class="white upc">USA, New York</strong>
</li>
<li>
<a href="#"><img src="/images/thumbnail.jpg" alt=""></a>
<h3>Member 6</h3>
<strong class="white upc">USA, New York</strong>
</li>
</ul>
<a href="#" class="rm">read more</a><br class="clear">
</div> <div class="box box4">
<h2><span class="blue">Last</span> News</h2>
<ul class="list">
<li><a href="#"><span class="n">01</span><span class="extra-wrap blck"><span class="h3">Post title 1</span><br><strong class="white upc">Description of post #1 Description of post #1 Description of post #1</strong></span></a></li>
<li><a href="#"><span class="n">02</span><span class="extra-wrap blck"><span class="h3">Post title 2</span><br><strong class="white upc">Description of post #2 Description of post #2 Description of post #2</strong></span></a></li>
<li><a href="#"><span class="n">03</span><span class="extra-wrap blck"><span class="h3">Post title 3</span><br><strong class="white upc">Description of post #3 Description of post #3 Description of post #3</strong></span></a></li>
<li><a href="#"><span class="n">04</span><span class="extra-wrap blck"><span class="h3">Post title 4</span><br><strong class="white upc">Description of post #4 Description of post #4 Description of post #4</strong></span></a></li>
<li><a href="#"><span class="n">05</span><span class="extra-wrap blck"><span class="h3">Post title 5</span><br><strong class="white upc">Description of post #5 Description of post #5 Description of post #5</strong></span></a></li>
</ul>
<a href="#" class="rm">read more</a><br class="clear">
</div> </div>

Стиль для основного блока

/* main section */
#content {
	margin:0 auto;
	overflow:hidden;
	position:relative;
	width:1225px;
}
.box {
	float:left;
	font-size:11px;
	margin-bottom:10px;
	margin-right:8px;
	overflow:hidden;
	padding:14px;
    /* CSS3 Box sizing property */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
.box1,.box2 {
	background:#1a1a1a url(../images/block-bg1.png) repeat-x 0 0;
}
.box3 {
	background:#0d0d0d url(../images/block-bg2.png) repeat-x 0 0;
	width:615px;
}
.box4 {
	background:#0d0d0d url(../images/block-bg3.png) repeat-x 0 0;
	width:585px;
}
.box1 {
	width:840px;
}
.box2 {
	width:360px;
}
.gallery {
	margin-bottom:3px;
	overflow:hidden;
}
.gallery .pic {
	float:left;
	margin-right:4px;
}
.gallery .imgs {
	float:left;
}
.gallery .imgs>li {
	margin-bottom:4px;
}
.gallery .imgs>li>a {
	display:block;
}
/* list styles */
.list {
	display:block;
}
.list li {
	background:url(../images/g-separator.png) bottom repeat-x;
	margin-bottom:18px;
	padding-bottom:18px;
}
.list2 li {
	margin-bottom:10px;
	padding-bottom:10px;
}
.list a {
	text-decoration:none;
}
.list a span {
	cursor:pointer;
}
*+html .list li {
	margin-bottom:17px;
	overflow:hidden;
	padding-bottom:16px;
}
.list a .n {
	background:#4f4f4f;
	color:#fff;
	float:left;
	font:bold 13px/22px Arial, Helvetica, sans-serif;
	margin-right:11px;
	text-align:center;
	text-decoration:none;
	width:22px;
}
.list a:hover .n {
	background:#28b3fc;
	color:#000;
}
/* box set styles */
.box-set dl dt {
	float:left;
}
div.box-set {
	margin-top:-12px;
}
div.box-set dl {
	overflow:hidden;
	padding-top:12px;
	position:relative;
}
div.box-set dl dt {
	margin-right:10px;
}
div.box-set dl dd strong {
	font-size:11px;
	font-weight:700;
}
ul.box-set li {
	float:left;
	margin-bottom:16px;
	margin-right:10px;
}
ul.box-set li.last {
	margin-right:0;
}
ul.box-set li img {
	margin-bottom:8px;
}
.box-set dl,.box-set dl dd,ul.box-set {
	overflow:hidden;
}

Нижняя часть

И наконец – небольшая область нижнего колонтитула с дополнительными ссылками:

<footer><!-- Define the footer section of the page -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
<li><a href="#">News</a>|</li>
<li><a href="#">Photos</a>|</li>
<li><a href="#">Radio</a>|</li>
<li><a href="#">Forum</a></li>
</ul>
</footer>

CSS для нижней части сайта

/* footer section */
footer {
	background:url("../images/footer-bg.png") repeat-x scroll 0 0 transparent;
	height:63px;
	margin-top:50px;
	position:relative;
	width:100%;
}
footer ul {
	margin:0 auto;
	overflow:hidden;
	padding-top:24px;
	position:relative;
	width:410px;
}
footer li {
	color:#373838;
	float:left;
	font:12px/18px Arial, Helvetica, sans-serif;
	margin-right:10px;
}
footer li a {
	color:#757575;
	float:left;
	margin-right:10px;
	text-decoration:none;
}
footer li a:hover,footer li.active a {
	color:#fff;
}

JavaScript в шаблоне

Есть 2 файла JS (jquery.spinner.js и script.js). Первый файл - дополнительная jQuery библиотека для нашего рекламного блока. Второй – наш собственный код:

;(function($){
    $.fn.extend({
        praParent:function(name){
            var th = $(this);
            while (th = th.parent()) {
                if (th.is(name)) break
            }
            return th;
        }
    })
})(jQuery)
$(function(){
    $('.gallery .imgs a').each(function(){
        var th=$(this), img=$('img',th), tmp;
        if(tmp=img.height()) {
            th.css({height:tmp/2});
        } else {
            img.load(function(){
            th.css({height:this.offsetHeight/2})
            })
        }
        th.css({overflow:'hidden',position:'relative'}).append($('')
            .css({background:'url('+img.attr('src')+') 0 100% no-repeat',position:'absolute',left:0,top:0,width:'100%',height:'100%',opacity:0,cursor:'pointer'})
            .bind('mouseenter',function(){
                $(this).stop().animate({opacity:1})
            })
            .bind('mouseleave',function(){
                if(!$(this).praParent('li').is('.current')) {
                    $(this).stop().animate({opacity:0});
                }
            })
        )
        .bind('click',function(){
            var th=$(this),pic=th.praParent('div').find('.pic img');
            th.parent('li').addClass('current').siblings().removeClass('current').find('span').stop().animate({opacity:0});
            pic.spinner({
                filename:'images/ajax-loader.gif',
                src:th.attr('href')
            })
            return false
        })
        $('.gallery ul.imgs li.current span').css({opacity:1})
    })
})

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

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