Від автора:Немає нічого подібного по створенню всього сайту, щоб показувало вам хороший огляд того, як повинна працювати розмітка CSS. У цій статті ми збираємося створити сайт-портфоліо, взяти файл PSD і зверстати його, використовуючи хороший чистий HTML і CSS.
Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.
Також завантажте вихідні коди собі на комп’ютер!
Крок 1
У цій статті ми тільки збираємося створити цю домашню сторінку, однак використовуючи її в якості бази Ви в змозі створити внутрішні сторінки, слідуючи тій же розмітці.
Крок 2
Перше, що потрібно зробити при створенні сайту портфоліо, це вирішити, як ми будемо структурувати наше побудова. Процес побудови полегшитися з часом, так як ви дізнаєтеся, як може працювати CSS розмітка. Для цього дизайну я думаю, що ми можемо здійснити дуже просте побудови, в якому використовується трохи абсолютного позиціонування і велике фонове зображення.
Що таке абсолютне позиціонування?
Коли ви розміщуєте HTML-елементів на сторінці (наприклад
і т. д.), то в них є природна позиція, яка визначена тим, що знаходиться перед ним. Так, наприклад, якщо Ви помістіть вниз
з якимось текстом в ньому, і потім помістіть інший
, то природно він з’явиться нижче першого
. Це буде звичайний потік щодо останнього елемента.
Абсолютне позиціонування відрізняється тим, що Ви вказуєте точне розміщення об’єкта і витягаєте його із звичайного потоку елементів. Так, якщо Ваш перший
залишити так, як і колись, але й для вашого наступного
Ви задали position:absolute ; left:500px; top:500px; тоді він з’явитися саме в цьому місці, незалежно від попереднього
.
Ви зможете встановити absolute position так:
.className {
position:absolute;
left:0px;
}
Недоліки абсолютного позиціонування
Основною проблемою при використанні абсолютного позиціонування є те, що елементи дійсно не пов’язані один з одним. Так, наприклад, якщо у вас один блок тексту вгорі сторінки, а інший блок тексту трохи нижче, це може виглядати добре, коли в кожному блоці тексту не багато. Але якщо у верхньому блоці буде велике есе, то замість зміщення наступного за ним блоку тексту вниз, він просто перекриє нижній блок. Це пояснюється тим, що ви берете елементи природного потоку на цій сторінці.
Тому абсолютне позиціонування дійсно корисно тільки для об’єктів, які на вашу думку, завжди будуть певного розміру, і які дійсно не повинні взаємодіяти з іншими елементами.
Чому це корисно для нас сьогодні?
Хороше в абсолютному позиціонування полягає в тому, що це, дійсно легко! Ви повідомляєте браузеру, де розташувати що-то і там це з’явиться! У добавок до всього, набагато менше проблем з сумісністю браузерів, хоча Ви ставите речі абсолютно. Зрештою 100px є 100px і в Firefox і Internet Explorer і Safari.
Отже наша розмітка
Таким чином спосіб, яким ми збираємося зробити наш веб сайт наступний:
Велике фонове зображення
Абсолютне позиціонування логотипу, меню, та заголовка панелі там, де вони точно повинні з’явитися
Весь наш інформаційний вміст з’явиться в постійному тезі
Наш нижній колонтитул знаходиться внизу
Не хвилюйтеся, якщо вам здається, що в цьому поки немає сенсу, Ви побачите, що сайт знаходить форму!
Крок 3
Тепер подивимося з точки зору фонових зображень: нам їх потрібно два. Одне з них буде гігантським, а насправді після того, як його зберегти як JPG, то його розмір буде близько 56Kb. Раніше це було занадто багато, але в наші дні це не має великого значення.
Отже, це основна область, але нам потрібно друге фонове зображення, яке буде тонким сектором. Цей фрагмент буде повторитися знову і знову справа, коли ми будемо змінювати розмір вікна браузера.
(Зверніть увагу, що логотип не повинен бути показаний нижче фонового малюнка, це був просто поганий скріншот, вибачте!)
Ви можете подивитися на ці два зображення, які я створив тут і тут.
Крок 4
Добре, тепер займемося нашим HTML. Спочатку ми закладемо деякі основи:
PSD vs NET
Як завжди краще працювати із зовнішньою стороною розмітки. Так що я зробив тут три головних тега
Я створив outside_container і container тому, що мені потрібно подвійний фонове зображення. Тобто мені потрібно повторюється (тонка смужка) фонове зображення, а потім на верхній частині того мені потрібно щось велике фонове зображення. Таким чином, в outside_container я поставлю фоном тонку смужку, а потім на container
Нижній колонтитул повинен бути поза контейнерів, тому що, якщо вікно браузера буде розтягуватися, нижній колонтитул теж повинен тягнутися. Оскільки у нього є свій власний фон, то він не може бути в контейнері — якби було так, і Ви розтягнули вікно браузера, Ви б побачили фон контейнера а не нижнього колонтитула!
Також ви побачите, що я додав трохи вмісту в нижній колонтитул, це просто міні логотип і текст. Я обернув текст в тег , щоб я міг ним керувати. Немає сенсу давати тегу ідентифікатор або клас, тому що ми можемо лише сказати #footer img і оскільки це єдине зображення там, ми можемо керувати ним так. Це робить наш HTML трохи простіше.
Крок 5
Тепер CSS. Для нашого коду наступний:
body {
margin:0px; padding:0px;
background-color:#11090a;
font-family:Arial, Helvetica, sans-serif;
}
#outside_container {
background:url(images/background_slice.jpg) repeat-x #000000;
}
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
}
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
}
Отже, йдемо по кроках:
Спочатку ми перевизначаємо тег body. Майже завжди це перша річ, яку я роблю. Ми позбавляємося від будь-якого заданого за замовчуванням margin і padding, встановлюємо колір фону і сімейство шрифтів для сторінок. Зверніть увагу, що колір фону це фактично колір фону нижнього колонтитула. Оскільки я згадував раніше, що якщо вертикально розтягнути вікно браузера ви будете бачити нижній колонтитул.
Потім у нас є тег з класом outside_container. Я надам йому фон (вузьку смужку), і повторю це лише вздовж осі X (тобто зліва направо) і скрізь, де немає ніякого фонового зображення, ми побачимо пряму чорну (#000000). Так, якщо сторінка стає довшою, фон не буде повторюватися вниз, тому що ми сказали повторити тільки зліва на право, замість цього ми отримаємо чорний фон. Це ідеальний варіант, тому що наша тоненька смужка зникає на чорному!
Потім у нас є container. Тут у нас є велика фонове зображення, яке не повинно повторюватися– так як воно з’являється тільки один раз. Зверніть увагу, що ми не визначали колір фону, якби він у нас був, то він охоплював би наш outside_container. Це пояснюється тим, що цей тег
Я також поставив контейнера мінімальну висоту, для того, щоб подивившись на сторінку HTML даний момент, ви могли побачити як вона приблизно буде виглядати, при наявності вмісту. Пізніше додамо змісту, і в будь-якому випадку буде мінімальна висота.
Нижній колонтитул це в основному тільки єдина лінія кордону і padding. Немає необхідності задавати колір фону, тому що ми встановили його раніше. Пам’ятаєте з визначенням padding, це відбувається наступним чином: padding: top right bottom left (за годинниковою стрілкою!)
Ось, де ми знаходимося зараз…
Перегляд результату
Крок 6
Завершимо нижній колонтитул, додавши кілька додаткових стилів наступним чином:
/*
Footer
*/
#footer {
border-top:1px solid #3f2324;
padding:30px 50px 80px 50px;
color:#674f5d;
font-size:9px;
line-height:14px;
}
#footer img {
float:left;
margin-right:10px;
}
#footer span {
display:block;
float:left;
width:250px;
}
#footer a {
color:#9e8292;
text-decoration:none;
}
#footer a:hover { color:#ffffff; }
Отже, тут я додав кілька штрихів до нашого #footer класу і створив ще кілька класів. Давайте розберемо все по кроках:
Передусім текст між / * і * / CSS є коментарями CSS. Добре, щоб були коментарі у Вашому файлі CSS, оскільки це дійсно розбиває його і робить більш зрозумілим. Взагалі, у великих проектах файли CSS можуть вийти з-під контролю, якщо Ви не обережні. Тому дійсно добре завести таку звичку: давайте хороші імена своїм селекторам, додайте коментарі, збережіть все це, розбийте на декілька файлів CSS великі проекти і так далі.
В #footer я додав колір шрифту, розмір шрифту, висоту рядка. Висота рядка є корисним текстовим атрибутом, оскільки вона допомагає Вам визначати інтервали між вашими рядками. Без висоти рядка текст може виглядати згрупованим і важко читати. Занадто велика висота рядка — і між рядками будуть настільки великі інтервали, що це буде виглядати дивно. Таким чином, ви можете поекспериментувати, щоб знайти правильну висоту для різних шрифтів та розмірів. Тут 14px здаються слушними.
Потім я встановив #footer img і #footer span float:left. Оскільки їм обом встановлено float left, то вони опиняться в колонках поруч один з одним. Я розповім більше про властивості float і стовпцях трохи далі в цій статті.
Нарешті, ми говоримо браузеру, що робити з тегами (тобто, посиланнями), які з’являються в нижньому колонтитулі. Зокрема, вони не повинні бути підкреслені, і повинні змінювати колір при наведенні курсору миші.
Ось як це буде виглядати з додаванням Footer:
Крок 7
Тепер з нижнім колонтитулом відійдемо вбік, і давайте додамо ще деякий інформаційний зміст сторінки основні блоки. Спочатку нам потрібно два нових зображення, які ми візьмемо з нашого файлу PSD:
Зверніть увагу, що я використовував зображення для великого текстового блоку. Взагалі краще використовувати текст для таких речей, оскільки він робить сторінку більш доступною для пошуку. Але це було б набагато важче зробити, так як ми повинні були б використовувати Flash і SIFr для досягнення такого ефекту. Але, так як це досить проста стаття, то я вирішив використовувати лише велике зображення 
Ось фрагмент нашого HTML-коду – тільки для частини контейнерів:
Отже, в
Наш логотип: пов’язаний, тому клацнувши по ньому, Ви перейдете на головну сторінку, і ID = «Logo»
Головне меню: простий ненумерованний список з ID = «Меню»
Меню правої сторони: це те ж меню, просто тут ID = «right_menu»
Велику картинку з текстом — це наш головний заголовок, збережений зображення id=»panel»
Content Div: І це — те, куди ми збираємося помістити весь наш інформаційний зміст сторінки в подальшому. Я залишив його порожнім зараз, за винятком коментарів HTML.
Тому, перш ніж почати її стилізацію, варто подивитися, як виглядає сторінка з усім цим:
Як ви бачите, ми збираємося зробити деякі серйозні зміни, щоб все стало на свої місця. Як ви пам’ятаєте, ми збираємося використовувати абсолютне позиціонування, щоб зробити це швидко і легко.
Крок 8
Ось CSS, який ми додаємо, щоб поставити наші елементи на свої місця:
#container {
background:url(images/background_main.jpg) no-repeat;
min-height:800px;
width:1000px;
position:relative;
}
/*
Logo / Menu / Panel Positioning
*/
#logo { position:absolute; top:58px; left:51px; }
#panel { position:absolute; top:165px; left:51px; }
ul#menu {
margin:0px; padding:0px;
position:absolute; top:145px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:145px; right:75px;
}
Знову розглянемо кожен шматочок детально:
Перш за все, Ви побачите трохи нашого старого коду — container. Я показав, як я додав ще два рядки до нього. У нього тепер width:1000px і position:relative. Це важливо, тому що, коли Ви встановлюєте контейнера position: relative, то всі теги всередині нього, яким призначено position: absolute позиціюються щодо цього контейнера. Це означає, що я можу помістити речі в цей блок, використовуючи факт, що я знаю, що його ширина 1000px. А саме, я буду використовувати це для right_menu.
Потім, оскільки це новий набір CSS, я розділив його коментарями.
Лого і панелі я присвоїв position:absolute. Як мені дізнатися, які цифри використовувати? Просто повернутися до вихідного документа Photoshop і взяти звідти, де вони повинні бути! Ви можете побачити, що це насправді звичайне визначення класу, тому абсолютне позиціонування є таким простим.
Потім з двома меню, вони також абсолютно позиціоновані, але тут я задав їм margin:0px; padding:0px;, щоб уберать будь-які задані за замовчуванням відступи, які мають невпорядковані списки.
Далі зверніть увагу на right_menu, я визначив position:absolute; right:75px. Це означає, що воно з’явиться в 75px від правого боку його контейнера. У звичайній ситуації це було б вікном браузера, але оскільки, пам’ятається рані я встановив контейнера position:relative, це означає, що він буде на відстані в 75px від правого боку
.
Тепер ви, напевно, подумали, а який сенс, хіба я не можу розміщувати що-небудь, використовуючи тільки left? Що ж, ви можете, але з нашим меню, якщо вам знадобиться додати додатковий пункт у меню, вам необхідно переміщати його знову і знову, так щоб було 75px від правого боку. Тоді як з допомогою right додаткові пункти меню покинуть потік, при додаванні їх. Спробуйте це і побачите!
Отже, ось тут ми знаходимося:
Крок 9
Як ви бачите на попередньому зображенні, логотип і назву елемента тепер виглядають подібно їх правильному розташуванню. Але меню виглядає досить дивно. Перш, ніж ми допрацюємо його, швидко зробимо застереження про logo / image panel. Ви могли б задатися питанням, якщо вони обидва зображення, чому б не зробити їх частиною фонового зображення?
Відповіддю є те, що логотип ми хочемо зробити кликабельним, так, щоб натиснувши на нього перейти до головної сторінки (робить сайт більш зручним), і основна текстова панель, ймовірно, буде змінюватися від сторінки до сторінки. Отже, маючи це одне зображення, у нас може бути багато сторінок HTML з використанням тих же стилів CSS, але просто розміщуючи там інше зображення з іншим текстом.
Тепер давайте розробимо два меню і зробимо так, щоб наша сторінка справді починала набувати форму. Для цього нам знадобляться наступний CSS:
ul#menu {
margin:0px; padding:0px;
position:absolute; top:138px; left:75px;
}
ul#right_menu {
margin:0px; padding:0px;
position:absolute; top:138px; right:110px;
}
ul#menu li, ul#right_menu li {
margin:0px; padding:0px;
list-style:none;
margin-right:10px;
font-size:9px;
text-transform:uppercase;
display:inline;
}
ul#menu li a, ul#right_menu li a {
text-decoration:none;
color:#bd92b2;
}
ul#menu li a:hover, ul#right_menu li a:hover {
text-decoration:none;
color:#ffffff;
}
Перші дві частини цього коду такі ж як і раніше (хоча я трохи скорегував позиції, щоб вони виглядали правіше після розробки). Зверніть увагу, що ці два визначення є окремими, оскільки у них різне позиціонування, але після цього ми об’єднали їх в один клас визначення, т. к. самі пункти меню повинні виглядати однаково. Формат для визначення двох класів разом:
.myClass, .myClass2 { … }
Це дуже відрізняється від цього визначення:
.myClass .myClass2 { … }
Оскільки друге визначення каже, всі елементи класу = “myClass2” всередині елемента класу = “myClass”.
У всякому разі давайте повернемося назад і пройдемо деякі важливі пункти:
Ми встановили
- елементів margin і padding 0, і positioning: absolute, оскільки ми обговорювали це раніше
- усередині елементів
- не повинно бути list-style (тобто ніякого оформлення), ми хочемо, щоб у них був розмір шрифту 9px, всі вони у верхньому регістрі, і важливо, вони, щоб вони були display:inline. Inline display означає ,що замість того, щоб бути блоками, які з’являться один під іншим, вони з’являться поруч один з одним!
- тегів, що знаходиться всередині
Таке визначення говорить, що для пов’язаних тегів , які з’являються всередині
Потім ми сказали, що у всіх елементів
І з цим, наша сторінка тепер виглядати непогано!
Крок 10
Тепер настав час додати трохи змісту! Спочатку давайте додамо фіктивний текст і зробимо так, щоб вийшли стовпці. Ось HTML:
a design sleek
Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
tutorials
Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
recent work
Dummy Text: This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
OK, так в цій частині коду, я додав 3 нових
— заголовок і далі частину тексту. Вони мають імена класів column1, column2 і column3. Щоб показати вам дещо про створення стовпців, я додав весь додатковий текст,
Спочатку давайте додамо CSS, щоб вони з’явилися як стовпці:
/*
Content
*/
#content {
padding-top:435px;
padding-left:85px;
width:815px;
color:#674f5d;
font-size:13px;
line-height:20px;
}
.column1 { float:left; width:230px; margin-right:30px; }
.column2 { float:left; width:230px; margin-right:30px; }
.column3 { float:left; width:270px; }
Як зазвичай я розбив наш новий бллок CSS за допомогою коментарів. Потім я встановив деякі стилі для #content. Зверніть увагу, скільки там padding-top… 435px! Це, щоб звільнити місце для всіх раніше абсолютно позиціонованих елементів. На відміну від тих елементів ця область інформаційного наповнення знаходиться в нормальному потоці сторінки.
Вона повинна бути в регулярному потоці, т. к., якщо Ви додаєте більше змісту до цієї області, то це має змістити нижній колонтитул. Якщо б це було позиціоновано абсолютно, то це просто пішло б поверх нижнього колонтитула.
Тепер три класи стовпців, зверніть увагу, що у кожного встановлені ширина і float:left. Це говорить їм, що вони повинні йти ліворуч від сторінки, вирівняні поруч з іншим зрушеним вліво елементом. Я поставив першим двом margin:right, щоб вони не прилипли один до одного.
Floating елемент змушує їх зміщуватися вліво або вправо, і каже всьому іншому обернутися навколо його. Коли інші елементи floated, вони формуються в стовпці. У цілому в будь-який момент ви бачите колонку розмітки, що використовує floats.
На жаль, є одна дивна проблема з floats. А саме, те, що у них проблема з їх контейнерами. Замість того, щоб відсунути такі елементи вниз, вони просто виявляються поверх Floating елементів. Спосіб рішення цієї проблеми складається в тому, щоб помістити який-небудь елемент із властивістю clear:both після Floating елементів.
Clear властивість каже, припинити обтікання навколо floating
Без clear:both
Ось як виглядає розмітка:
Подивіться, як колони попливли поверх нижнього колонтитула і в нижній колонтитул сам почала обходити навколо них. Це не правильно!
З clear:both
Рішення є досить простим, ми повинні додати
a design sleek
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
tutorials
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
recent work
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
Бачите
внизу? Це просто порожній
Кілька слів про Floats і їх Clearing.
Ви могли б задатися питанням, чому я не помістив «clear:both» у визначення
Мабуть, існує рішення, не пов’язане з вставкою марного
Крок 11
Добре, вже майже все. Основна розмітка вся видно і все, що ми повинні зробити, додати розробити наше зміст. Ось HTML для цього:
a design sleek
This design was produced for a photoshop and web development tutorial. You can see the first part up at PSDTUTS.com where you learn how to create a beautiful, but simple design using an abstract background and type.
The second part of the tutorial is available via NETTUTS.com where we do a quick build of the PSD into a viable, working HTML/CSS site.
tutorials
Psdtuts and nettuts provide tutorials on the following topics (sorta):
recent work
-
Working Within Limitations to Achieve Great Designs
Sean Hodge
-
Create a Slick Tabbed Content Area using jQuery
Collis Ta’eed
-
Creating a PayPal Payment Form
Collis Ta’eed
Це практично та ж сама структура, як і раніше, крім третьої колонки, я створив
- елемент у ній з класом work. Зверніть увагу, що цей
- визначення каже, що там не повинно бути ніякого list-style (тобто без маркерів). Теж саме говорить clear:both. Як Ви пам’ятаєте з останнього кроку, це повинно очистити floating елементи. І якщо Ви подивитеся трохи нижче, то Ви помітите, що у img визначення є float. Тому тут ми говоримо, що кожен новий елемент списку
- повинен бути очищений і не обтікати останнього.
Потім у частині, ми говоримо, що тег повинен відобразитися як блок. Тобто ми хочемо, щоб наші посилання були великим блоком, який включає зображення і текст. Ми даємо йому padding, щоб конкретизувати блок і встановити деякі стилі тексту, який повинен з’явитися.
Потім ми говоримо, що
в наших повинні бути зсунутий вліво з деякими відступами.
Нарешті ми визначаємо колір тексту у
.
- елемент я налаштував так, щоб було посилання (тега ) , обертаюча зображення, заголовок і текст. Таким чином, все це стане блокової посиланням. Це означає, що якщо ви наведіть курсор на зображення, текст, пов’язаний з ним змінить колір.
Отже, ось CSS для нашого змісту:
#content h2 {
font-family:Georgia, “Times New Roman’, Times, serif;
color:#dbaa70;
margin:0px 0px 20px 0px;
font-weight:normal;
}
ul.work {
margin:0px; padding:0px;
}
ul.work li {
list-style:none;
margin:0px; padding:0px;
clear:both;
}
ul.work li a {
color:#e0b882;
display:block;
padding:10px 5px 5px 10px;
text-decoration:none;
font-size:10px;
}
ul.work li a img {
float:left;
margin-right:20px;
margin-bottom:20px;
}
ul.work li a h4 {
color:#674f5d;
margin:0px;
font-weight:normal;
font-size:13px;
}
ul.work li a:hover, ul.work li a:hover h4 { color:#ffffff; }
Давайте пройдемо по класах один за одним:
Спочатку ми переглядаємо всі
, що з’являються всередині
. Ми могли, просто переглянути все
, але ви ніколи не знаєте, де може використовуватися ще який-небудь
. Так що, призначати подібні класи таким чином (#content h2 ) — це хороша звичка. Все, що я зробив тут, це змінив колір, шрифт, товщину і відступи, щоб це виглядало, як мені потрібно.
Потім у нас є визначення
. Перше
визначення просто змушує позбутися margin і padding.
Тоді
, але ви ніколи не знаєте, де може використовуватися ще який-небудь
. Так що, призначати подібні класи таким чином (#content h2 ) — це хороша звичка. Все, що я зробив тут, це змінив колір, шрифт, товщину і відступи, щоб це виглядало, як мені потрібно.
Потім у нас є визначення
- . Перше
- визначення просто змушує позбутися margin і padding.
Тоді
І от і все! Ми це зробили!
Готово!
Домашня сторінка сайту завершено. Створення сайту-портфоліо з нуля — зроблено. Ви можете завантажити ZIP of the site files , щоб подивитися , що міститься HTML-код для різних етапів цієї статті і, звичайно, можна побачити остаточний документ HTML:
Перегляд фінальної сторінки
Популярні
