Самите основи на уебсайт, базиран на Div: 7 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:56

Тази инструкция ще ви покаже самите основи за това как да създадете уебсайт с диви. Защото таблиците, използвани за оформление, са зли!: pЗа да разберете тази инструкция, ще трябва да знаете основни html и css. Ако не разбирате нещо, не се колебайте да попитате. Моята лична начална страница също използва този вид структура на div.

Стъпка 1: Създайте основните файлове

Първо създайте своя html файл. Ще добавим самите основи към него. Css файлът ще бъде празен за сега.html файлът сега съдържа: test Запазете вашия html файл като something.html. Можете сами да изберете името. Вашият css файл трябва да бъде записан като.css. Уверете се, че му давате същото име, както е споменато в html файла. В този случай "style.css". Сега имаме обикновена празна html страница, когато се визуализира в нашия браузър.

Стъпка 2: Редактирайте основния маркер за основни цветове, шрифтове, …

Ще оставим html файла такъв, какъвто е, и ще редактираме само css файла. Добавете следния код към вашия css файл: body {background: #444444; семейство шрифтове: verdana, arial, sans-serif; цвят: #444444; размер на шрифта: 12px; margin: 0px;} С този бит код ще дефинираме всички свойства на маркера body. Тъй като цялото съдържание е в основния маркер, тези настройки ще засегнат цялата страница. Фонът и цветът на шрифта (цвят) са настроени на тъмно сиво. Фамилията шрифтове (семейство шрифтове) е зададена на verdana. Ако компютърът, използван за разглеждане на нашия уебсайт, няма шрифта „verdana“, той ще покаже нашия сайт с шрифта „arial“. Можете да добавите още шрифтове към списъка. "Sans-serif" е общият тип, който ще се използва, когато не е наличен предоставен от вас шрифт. Размерът на шрифта (размер на шрифта) е зададен на 12 пиксела. Това е абсолютна стойност. Ако искате да редактирате други размери на шрифта (като заглавки, абзаци, елементи от менюто …), можете да използвате съответната единица "em" вместо "px". По този начин, ако искате да промените размера на уебсайта си, ще трябва само да промените размера на основния шрифт. Маржът е зададен на 0px за всичките четири страни на маркера на тялото. Това се прави, за да се гарантира, че сайтът ще се придържа към горната част на прозореца.

Стъпка 3: Добавяне на контейнер с заглавка и съдържание

Сега ще добавим контейнера. Това е просто центриран div, който ще съдържа целия ни уебсайт. В този контейнер ще добавим още два div; div и заглавен div. Нашият html файл сега ще изглежда така: test Content Header Ще добавим следния код към нашия css файл: div#container {width: 800px; марж: 0px автоматично; фон: #FFFFFF; padding: 0px;} div#content {width: 800px; подплата: 100px; фон: жълт;} div#header {ширина: 800px; височина: 100px; фон: син; позиция: абсолютна; отгоре: 0px;}. clearfix: след {content: "."; дисплей: блок; височина: 0; ясно: и двете; visibility: hidden;}. clearfix {display: inline-block;}/* Скриване от IE Mac \*/. clearfix {display: block;} div#container означава, че имаме div tag с id "container". Ще добавим някои цветове и "margin: 0px auto;" за да сме сигурни, че нашият контейнер е центриран в страницата. Трябва да дадем на съдържанието padding-top и заглавката абсолютна стойност с „top: 0px“, за да сме сигурни, че заглавката е позиционирана над другото съдържание. грозните цветове. Това е просто за да улесним четенето на цветовете и да видим различните диви. Ще се нуждаем от този странен код за ясна корекция, за да сме сигурни, че нашите навигационни и съдържателни диви (добавени в следващата стъпка) не изпадат от околния div.

Стъпка 4: Направете две раздела в Content Div за навигация и действително съдържание

Сега ще добавим още две диви в съдържателния div. Един за навигация и един за действителното съдържание. Между съдържателния маркер; ще добавите новия код:

Навигация Основно съдържание Ще добавим малко css код, за да покажем навигацията и разделите за основно съдържание; div#nav {width: 200px; поплавък: вляво; фон: оранжев;} div#maincontent {ширина: 600px; поплавък: надясно; фон: розово;} Обърнете внимание на факта, че и двете диви са плаващи. Ако не бяхме поставили допълнителния код за изчистване в предишната стъпка, div -овете щяха да изплуват извън заобикалящия div. С метода clearfix ще се уверим, че това не се случва.

Стъпка 5: Добавете някои допълнителни Divs за структура в навигацията

Сега ще добавим няколко допълнителни div към двата "nav" div, за да създадем някаква структура в нашата уеб страница. Променете следния бит код:

• Фу
• Бар

Сега ще обявим парче код, за да определим как трябва да се показва div "navblock". Имайте предвид, че navblock има клас, а не идентификатор. Причината за това е проста; divs с id се показват само веднъж (навигационният блок, заглавката, долния колонтитул, …). Divs с класове могат да се показват повече от веднъж. Тук ще използваме клас. Само в случай, че по -късно ще искаме да добавим нов навигационен блок on.div.navblock {width: 180px; марж: 5px автоматично; рамка: 1px плътно червено;} Ако искаме да добавим още един блок за навигация, просто трябва да добавите нова … структура. Вашият код сега ще изглежда така;

• Фу
• Бар
• Бу
• Далеч

Стъпка 6: Добавете някои допълнителни диви за структура в основното съдържание

Сега ще направим същото и за maincontent div. Кодът сега изглежда така:

Lorem ipsum dolor sit amet,…

Отново ще добавим парче код към нашия css файл, за да определим как трябва да се показва div: div.contentblock {width: 580px; марж: 5px автоматично; border: 1px solid white;} Сега можем да добавим още един блок от съдържание, като добавим още „…“в div на maincontent като този;

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Стъпка 7: Направете сайта малко по -малко грозен

Сега забавната част; цветове. Сега, когато имаме основната структура на div, можем да променим цветовете на нещо малко по -малко хаотично/грозно/… Просто си поиграйте с цветовете във файла css. Ето пълния html файл на уеб страницата, показан на изображението: тест

• Фу
• Бар
• Бу
• Далеч

Lorem ipsum dolor sit amet,…

Nunc cursus, justo eget elementum dictum,…

Заглавка И това е пълният css файл: body {background: #444444; семейство шрифтове: verdana, arial, sans-serif; цвят: #444444; размер на шрифта: 12px; марж: 0px;} div#контейнер {ширина: 800px; марж: 0px автоматично; фон: #FFFFFF; padding: 0px;} div#content {width: 800px; подплата: 100px; фон: #FFFFFF;} div #заглавка {ширина: 800px; височина: 100px; фон: #888888; позиция: абсолютна; отгоре: 0px;} div#nav {ширина: 200px; поплавък: вляво; фон: #FFFFFF;} div #maincontent {ширина: 600px; поплавък: надясно; фон: #DDDDDD;} div.navblock {ширина: 180px; марж: 5px автоматично; граница: 1px плътен #DDDDDD;} div.contentblock {width: 580px; марж: 5px автоматично; рамка: 1px плътен #FFFFFF;}. clearfix: след {content: "."; дисплей: блок; височина: 0; ясно: и двете; visibility: hidden;}. clearfix {display: inline-block;}/* Скриване от IE Mac \*/. clearfix {display: block;} Така че сега имате основите. Разбира се, има още много за редактиране като цветове, размери на шрифтове, по-добре изглеждащ блок за навигация … Но тези инструкции са само за структурата на div. Ако искате да видите други свързани инструкции, винаги можете да попитате. Ще видя дали ще намеря време.