Верстка целой страницы сообщества в черно-голубой гамме

11 октября 2015 | Опубликовано в css | 1 Комментарий »

Для этого урока мы подготовили еще одну привлекательную верстку, которая подойдет для страницы сообщества. Это строгая страница в темных тонах, которая может показаться интересной многим. В этом шаблоне будут такие элементы, как логотип, значки социальных сетей, основное меню, форма поиска, подвал, раздел рекламы, шапка, блок списка пользователей и блок свежих новостей. Последние два блока — списки на структуре ul – li.

Результат

Демонстрация работы – Скачать исходный код

Для начала

Для начала создайте новую папку для этой верстки и внутри нее следующие папки:

Папка под названием css для файлов стилей, т. е. reset.css и style.css в этом проекте.
Папка под названием images (изображения) для всех использованных изображений.
Папка под названием js для скриптов, jquery.spinner.js и script.js для этого урока.

Код раздела head

Теперь рассмотрим код HTML раздела head:

<!DOCTYPE html>
<html lang="en"><head>
<title>'My portal' single page layout | Script tutorials demo</title>
<meta charset="utf-8">

<!-- Подключаем таблицы стилей -->
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
<!-- Подключаем скрипты -->
<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>

Идем дальше — раздел body

Вся верстка состоит из трех основных разделов: шапка сайта с логотипом, значками социальных сетей, основным меню и формой поиска, основной раздел, в котором находятся четыре блока: блок с рекламой, блок для видео, блок с последними пользователями и блок свежих новостей и подвал сайта с разными ссылками. Целиком верстка выглядит так:

<body>

<header><!-- Раздел шапки страницы -->

<h1 class="logo"><!-- Логотип -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>

<ul class="soc-ico"><!-- Значки социальных сетей -->
<li><a href="#"><img src="images/twitter48.png" alt=""></a></li>
.....
</ul>

<nav><!-- Основное меню -->
<ul>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Members</a></li>
.....
</ul>
</nav>

<form id="search"><!-- Форма поиска -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>

</header>

<div id="content"><!-- Раздел содержимого -->

<div>
.....
</div>

<div>
.....
</div>

<div>
.....
</div>

<div>
.....
</div>

</div>

<footer><!-- Раздел подвала страницы -->
<ul>
<li class="active"><a href="#">Home</a>|</li>
<li><a href="#">Members</a>|</li>
.....
</ul>
</footer>
</body>

Вот основные стили CSS:

/* основные стили */
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;
}

Раздел шапки

Вот код HTML для раздела шапки сайта:

<header><!-- Раздел шапки страницы -->

<h1 class="logo"><!-- Логотип -->
<a href="#"><img src="images/logo.png" alt=""></a>
</h1>

<ul class="soc-ico"><!-- Значки социальных сетей -->
<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><!-- Основное меню -->
<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="https://www.script-tutorials.com/my-portal-single-page-layout-for-your-community/">back to Script Tutorials</a></li>
</ul>
</nav>

<form id="search"><!-- Форма поиска -->
<input type="text" name="s" />
<input type="submit" value="" />
</form>
</header>

Код CSS для раздела шапки страницы:

/* стили основного меню */
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;
}
/* стили шапки сайта */
.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;
}

Основной раздел содержимого

Теперь приступим к основному разделу содержимого. Он состоит из четырех блоков: блока рекламы с прокручивающейся галерей на jQuery, блока со встроенным видео, например, для какой-то рекламы, и двух блоков списков — первый с изображениями, который можно использовать как список зарегистрированных пользователей веб-сайта или для каких-то фотографий, второй без изображений, его можно задействовать для показа новостей на веб-сайте.

<div id="content"><!-- Основной раздел содержимого -->

<div>
<div class="gallery">
<div><img src="images/promo1.jpg" alt=""></div>
<ul class="imgs">
<li class="current"><a href="images/promo1.jpg"><img src="images/thumb1.jpg" alt=""></a></li>
<li><a href="images/promo2.jpg"><img src="images/thumb2.jpg" alt=""></a></li>
<li><a href="images/promo3.jpg"><img src="images/thumb3.jpg" alt=""></a></li>
</ul>
</div>
<div>
<h3>Promo block - item title</h3>
<strong>Promo block - item description</strong> </div>
</div>

<div>
<h2 class="fl"><span>Our</span> headline</h2>
<iframe width="332" height="187" src="http://www.youtube.com/embed/DzH_wX6Uauc" frameborder="0" allowfullscreen></iframe>
</div>

<div>
<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>
</div>

<div>
<h2><span>Last</span> News</h2>
<ul>
<li><a href="#"><span>01</span><span class="extra-wrap blck"><span>Post title 1</span><br><strong>Description of post #1 Description of post #1 Description of post #1</strong></span></a></li>
<li><a href="#"><span>02</span><span class="extra-wrap blck"><span>Post title 2</span><br><strong>Description of post #2 Description of post #2 Description of post #2</strong></span></a></li>
<li><a href="#"><span>03</span><span class="extra-wrap blck"><span>Post title 3</span><br><strong>Description of post #3 Description of post #3 Description of post #3</strong></span></a></li>
<li><a href="#"><span>04</span><span class="extra-wrap blck"><span>Post title 4</span><br><strong>Description of post #4 Description of post #4 Description of post #4</strong></span></a></li>
<li><a href="#"><span>05</span><span class="extra-wrap blck"><span>Post title 5</span><br><strong>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>
</div>
</div>

Код CSS для основного раздела:

/* основной раздел */
#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 */
-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 {
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 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><!-- Раздел подвала страницы -->
<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 {
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 для шаблона

Для этой страницы нужно только два скрипта JavaScript: 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($('<span></span>')
.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})
})
})

Демонстрация работы – Скачать исходный код

Заключение

Поздравляем, мы закончили создание шаблона страницы в черно-голубой гамме. Надеемся, Вам понравился этот урок и он Вам пригодится.

Автор урока Andrew Prikaznov

Перевод — Дежурка

Смотрите также:

Опубликовано в css, октября 11, 2015
Метки: css, css3, верстка, урок css, урок css3, урок верстка

�

Верстка целой страницы сообщества в черно-голубой гамме

Результат

Для начала

Код раздела head

Идем дальше — раздел body

Раздел шапки

Основной раздел содержимого

Раздел подвала страницы

Скрипты JavaScript для шаблона

Заключение

Комментарии

Похожие статьи

Случайные статьи

Страницы

Друзья

Самые комментируемые