✅ Оформление с CSS класове от 960 Grid System

Съдържание

The CSS 960 Grid System frameworkТова не е нищо повече от стандартизация на стиловете, която предоставя необходимите класове за внедряване на колони в уеб страница, с различни размери, с които лесно и подредено да подреждаме съдържанието си.
960 Grid System има това име, защото е решетъчна система за създаване на страници с ширина 960 пиксела. Колоните, които можем да поставим в мрежата, ще имат различна ширина, но общата ширина на страницата винаги ще бъде 960 пиксела.
С тези предварително дефинирани css класове можем да използваме 12 или 16 колони за създаване на нашите оформления, всяка от колоните има ляво и дясно поле от 10px, за да създадем 20px разделяне между колони. Знаейки това, казваме, че ако използвам 12 колони, всяка колона ще бъде по 60 пиксела, а ако използвам 16 колони, ширината на всяка ще бъде 40 пиксела.
За да имаме gui, добавяме изображение за това как се разпределят колоните.
Оформянето по този начин е много лесно и като погледнем изображението получаваме представа как да го направим. За целите на този урок ще създадем оформление за структуриране на уебсайт и организиране на информация.
Започваме нашия пример, като създаваме файл 960test.html и добавяме следния css между маркерите
[цвят = # 000000]

[/Цвят]
Тези файлове са тези, които имат класовете на рамката на мрежата 960, ако имаме нужда от нов css, ще ги приложим в отделен файл, никога няма да променим рамката, за да я поддържаме стандартна.
Ето едно просто оформление за по -добро обяснение на използването на 960 Grid

Автомобили

Платете
RSS

Заглавна страница
Новини
Членове
Промоции
Свържете се с нас

Малко заглавие

Donec malesuada dictum orci. Pellentesque felis arcu, malesuada eget, convallis sed, suscipit eget, tellus. Nullam lectus. Nam elementum feugiat mi. Nulla quis leo ut dui varius blandit. Cras viverra eros vitae hate. Fusce ut urn eu освобождава luctus malesuada. Nulla quam arcu, adipiscing quis, hendrerit ac, malesuada ut, ante.

Automoviles.com Авторско право 2014 | Реклама | Правни | Контакт

След това, за да завършим примера, добавяме файл mystyles.css

 @charset "iso-8859-2"; / * CSS документ * / div.spacer {височина: 1em; } #top {ширина: 100%; фон: # 29231e; позиция: относителна; отгоре: 0; ляво: 0; } #top ul {margin: 10px 0 10px 0; цвят: #FFFFFF; } #top ul li {display: inline; } #bodyMain {background: url (… /images/nubes-background.jpg.webp) отгоре в центъра без повторение; } #rss {background: url (… /images/rss-logo.gif.webp) без повторение вдясно; подложка: 5px 30px 5px 0; } a # лого {background: url (… /images/vos-voz.gif.webp) no-repeat; ширина: 470px; височина: 92px; поплавък: ляво; марж-топ: 150px; } img # city-logo {float: left; } #header {border-bottom: 5px solid # 29231e; фон: url (… /images/header.jpg.webp) без повторение; височина: 173px; } #contentMain {фон: #FFFFFF; подплата: 10px; border-bottom: 5px # A1DEF0 solid; } #contentMain h1, #contentMain h3 {color: #4991a5; } # меню {фон: # e7f7fb; } #menu ul {padding-top: 10px; margin-bottom: 10px; } #меню ul li {display: inline; шрифт: 20px удебелен Arial, Helvetica, sans-serif; }. статия {margin-left: 15px; } img.border-blue {border: 5px solid # e7f7fb; margin-bottom: 10px; } #footer {font-size: 11px; }

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка