3:45 PM Центриране на сайт с CSS | |
Днес ще разгледаме как да центрирате сайт с помощта на CSS.Този метод действа под всички браузъри.Всички браузъри имат stylesheet по подразбиране , които се зареждат автоматично при зареждане на даден сайт.Firefox например има body margin по подразбиране 8px.Това е прост начин да ресетнете стойностите на css .Ще сведем кода до минимум
Пример:*{margin: 0; padding: 0; } Ще използваме div с ID - wrapper.Може да изберете width,в примера е дадена 960 px. Пример;#wrapper{width:960px; margin:0 auto; text-align:left; background-color: #fff; } Но първо трябва да нагласим позиционирането на текста да е центрирано,защото ще изведе грешка в IE. Пример;body{text-align: center; /*For IE6 */ } Това е целия код. html код.<html><head> <link href="css.css" rel="stylesheet" type="text/css" /> </head> <body > <div id="wrapper"> Verdana, Arial, Helvetica Verdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, A rial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial , HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, HelveticaVerdana, Arial, Helvetica </div> </body> </html> CSS код.*{margin: 0; padding: 0; background-color: #c0c0c0; } body{ text-align: center; /*For IE6 */ } #wrapper{ width:960px; margin:0 auto; text-align:left; background-color: #fff; } | |
|
| |
Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
| Всички коментари: 0 | |
