10:37 AM Лепкав header с CSS | |
| Днес ще разгледаме как да направим header, който при скролиране пак да си стой. Ще ни трябват 2 файла: 1.Първия .html (header.html) 2.Втория .css (css.css) Пример:header.html<html> <head> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> <div id="header_wrap"> <p> LEPKAV HEADER </p> </div> </div> <div id="content"> <div id="centercontent"> </div> </div> </body> </html> css.css #header{ width: 100%; height: 66px; background-color: orange; background-repeat: repeat-x; position: fixed; top: 0px; left: 0px; } #header_wrap{ width: 900px; height: 70px; margin: 0 auto; } #content{ width: 900px; height: 1200px; background-color: black; margin: 0 auto; } #centercontent{ width: 900px; height: 600px; float: left; margin-top: 300px; background-color: green; } Сега да поясним кода как точно става 1.Задаваме #header и #header_wrap в css файла. 2.Задаваме на хедъра да се разпъва на 100% с width: 100%. 3.Задавате на хедъра желана височина с height: 70px; можете да го промените на каквото си искате вие. 4.Тук вече дефинираме лепкавия хедър.С position: fixed; задаваме на хедъра да се скорлва при завъртане на скрола.С top и left задаваме къде да стой в примера е винаги в най-ляво и най-горе. 5.header_wrap в него седи съдържанието на хедъра.С width и height задаваме дължината и ширината. С margin: 0 auto; задаваме на съдържанието на хедъра да седи винаги в центъра на страницата не трябва да се променя | |
|
| |
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
