За връзка с екипа: Цъкни тук!
Как да поставим профилите в ляво?: Цъкни тук!
Искаш да помогнеш на веригата?: Цъкни тук!
Зареждане на сървърите...

[Урок] - Как да си направим навбар!

C++, HTML, PHP, MySQL, Perl, CSS, JavaScript, Photo Shop и други.
Потребителски аватар
Nixe
offline
Потребител
Потребител
Мнения: 29
Регистриран: 06 дек 2017 23:46
Nickname: Nixe

[Урок] - Как да си направим навбар!

Мнение от Nixe » 12 дек 2017 11:33

Саздавате два файла един HTML и един CSS едитваме хтмл документа и пишем в него

// Има 2 начина за саздаването на навбар но и двата правят едно и съящо нещо !! сега ще използваме по-простия начин !!
Коментарите в хтмл се слагат в ъглови скопи пример <!-- Tova e comentar -->
index.html

Код: Избери всички

<!DOCTYPE html>  <!-- Девинираме, че съдържанието в файла е HTML5 -->
<html> <!-- отварящ таг оказваш началото на хтмл документа -->
<head> <!-- Това е главната част "главата на документа" моше да съдържа хипер връски, мета дани, инфо, и полезна информация за самия документ -->
<meta charset="utf-8" /> <!-- Това е мета таг разпознаващ изиците не може без него -->
<meta lang="en" /> <!-- Това също е мета таг но той дава информация на какъв език е написън кода -->
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- Това инклудва цсс файла в хтмл документа  -->
<!-- Толкова за хеад часта тези дани са ни достатачни за да си направим готиния навбар :д -->
</head> <!-- Край на хеад тага -->

<body> <!-- Това е отварящ таг на бодито тоест тялото на документа -->
<div class="navbar">
<!-- Start  Links -->
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<a href="#">начало</a>
<!-- End Links -->
</div> <!-- Navbar -->
</body> <!-- Това е затварящия таг на бодито -->
</html <!-- End html -->


Това беше навбара нищо сложно!! :)
Преминаваме към цсс файла:

В цсс /* Tova e coment */
style.css

Код: Избери всички

* { padding: 0px; margin : 0px; } /* Премахва отстъпа от хтмл документа демек ня да е малко на ляво или на дясно */
а { text-decoration: none }  /* Премахва декоративният бордер */
li { list-style-type: none } /* Премахва декоративните приставки на ли тага */
.navbar {
 width: 1000px; /* Дължина 1000px /*
 height 35px; /* Щирина 30px */
background-color: #333; /* Черен Фон */
border-top: 3px solid dodgerblue; /* Бордер от горната страна на навбара 3пх в син цвят */
border-bottom: 3px solid dodgerblue; */ Същото само, че от долу */
margin: auto; /* Центрира навбара */

.navbar a { 
display: block; /* Придаваме на а тага да е блоков елемент */
font-weight: bold; /* Текста да е одебелен */
font-size: 11px;  /* Текста ще е 11 пиксела */
text-transform: uppercase; */ Не зависимо дали сме го написали с малки или големи букви то ще се показва с големи */
color: dodgerblue; /* Цвета на текста */
padding-left: 10px; /* текста ще се одалечи с 10 пиксела от ляво */
padding-right: 10px; /* текста ще се одалечи с 10 пиксела от дясно */
line-height: 35px; /* Текста ще е по средата на навбара хоризонтално */
float: left; /* Ще дръпне текста на ляво с цел да е хоризонтално навбарче */
font-family: Tahoma;
Това е за направата на навбар ако има нещо не ясно пишете в темата или на лс :)

Ето и демо :) https://imgur.com/Vc8sFBr
Начинът на мислене се променя с промяната на положението.

Заключена