Simple 2 колона CSS оформление
Това е настойнически за това как да се използва CSS да се създаде проста два часа колоната оформление.
Структурата се състои от заглавна част, основно съдържание колона, за страничната лента, както и долен колонтитул. А доста основни оформление, а не на всички е трудно да се създаде с CSS веднъж знаете как да се справят с неизбежните грешки Internet Explorer.
1. Основна структура
Първо, ние създаваме основния HTML структура:
След това, ще оставя някои съдържание в различните раздели:> <div id = "header" > <h1> Company Name </h1> <h4> Type your slogan </h4> </div> <div id = "sidebar" > <h2> Navigation </h2> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About us </a> </li> <li> <a href = "#" > Srevices </a> </li> <li> <a href = "#" > Contact </a> </li> <li> <a href = "#" > Sitemap </a> </li> </ul> </div> <div id = "main" > <h2> Content </h2> <p> Lorem ipsum dolor sit amet, consectetuer dipiscing elit. <div ID = "page"> <div ID = "header"> <h1> Име на фирмата </ h1> <h4> Тип ви лозунг </ h4> </ div> <div ID = "sidebar"> <h2> Навигация </ H2> <ul> <li> <a href = "#"> Начало </ A> </ Напред> <li> <a href = "#"> За нас </ A> </ Напред> < Напред> <a href = "#"> Srevices </ A> </ Напред> <li> <a href = "#"> Контакти </ A> </ Напред> <li> <a href = "#"> Карта на сайта </ A> </ Напред> </ ул.> </ div> <div ID = "main"> <h2> съдържание </ H2> <p> Lorem Ipsum печал седне amet, consectetuer dipiscing Елит. Заедно покаже творчески montes, nascetur ridiculus Мус. 1 януари 2002 Lorem Ipsum печал седне amet, consectetuer adipiscing Елит. Заедно покаже творчески montes, nascetur ridiculus Мус. > <h2> Footer </h2> </div> </div> 1 януари, 2002 </ P> </ div> <div ID = "footer"> <h2> Footer </ H2> </ div> </ div>
2. CSS код
Сега ние създаваме CSS код:
margin : 0 ; padding : 0 ; } body { font-size : 100 %; font-weight :normal ; font-family :Arial , Helvetica, sans-serif ; } * html, body { height : 100 %; min-height : 100 % /*firefox*/ ; } / * стил два часа колоната оформление * / * (граница: 0; капитониране: 0;) орган (размер на шрифта: 100%; шрифта тегло: нормални; шрифт семейство: Arial, Helvetica, без-сериф;) * HTML, орган (Височина: 100%; мин-Височина: 100% / * Firefox * /;)margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ; padding : 0 ; width : 1009px ; height : 100 %; } HTML, # страница (граница: 0; капитониране: 0; Височина: 100%;) (# страница граница: 0 авточасти; капитониране: 0; ширина: 1009px; Височина: 100%;); } a :hover { text-decoration :underline } ul,ol,li { margin : 0 ; padding : 0 ; } h1,h2,h3,h4,h5,h6 { margin : 0 ; padding : 10px 0 0 20px ; } h1 { font-size : 28px ; } h2 { font-size : 24px ; } h3 { font-size : 18px ; } h4 { font-size : 12px ; } h5 { font-size : 10px ; } p { margin : 0 ; line-height : 18px ; padding : 0 0 10px 20px ; font-size : 12px ; } #page { margin : 0 auto ; padding : 0 ; width : 1009px ; height : 100 %; } #header { margin : 0 ; padding : 0 ; width : 100 %; height : 151px ; display :block ; background-color : #eeeeee ; } #sidebar { float :left ; margin : 0 ; padding : 0 ; display :inline /*internet explorer*/ ; width : 200px ; height : 100 %; background-color : #cccccc ; } #sidebar ul { list-style-type :none ; } #sidebar ul li { display : inline /*internet explore*/ ; } #sidebar ul li a { padding : 3px 4px ; display :block ; margin : 0px 0 0 16px ; text-decoration :none ; color : #0000E8 } #sidebar ul li a :hover { color : #CC0000 } #main { margin : 0 ; padding : 0 ; float :left ; display :block ; width : 809px ; height : 100 %; background : #dddddd } #footer { margin : 0 ; padding : 0 ; display :block ; width : 100 %; height : 50px ; background : #eeeeee ; overflow :hidden ; } (едно текстово декорация: няма;) А: навъртам (текстови декорация: подчертая) UL, OL, Ли (граница: 0; капитониране: 0;) H1, H2, H3, h4, Н5, h6 (граница: 0; капитониране: 10px 0 0 20px;) h1 (размер на шрифта: 28px;) H2 (размер на шрифта: 24px;) (H3-размер на шрифта: 18px;) (h4-размер на шрифта: 12px;) (Н5-размер на шрифта: 10px;) P (граница: 0; линии височина: 18px; капитониране: 0 0 10px 20px; размер на шрифта: 12px;) (# страница граница: 0 авточасти; капитониране: 0; ширина: 1009px; Височина: 100%; ) (# заглавна граница: 0; капитониране: 0; ширина: 100%; височина: 151px; дисплей: блок; фон-цвят: # eeeeee;) (# Sidebar поплавъка: ляво; граница: 0; капитониране: 0; дисплей: Вграден / * Internet Explorer * /; ширина: 200px; Височина: 100%; фон-цвят: # cccccc;) (# Sidebar ул. списък стил тип: няма;) # Sidebar ул. Li (дисплей: Вграден / * интернет проучат * /;) # Sidebar ул. Ли един (капитониране: 3px 4px; дисплей: блок; граница: 0px 0 0 16px; текстови декорация: няма; цвят: # 0000E8) # Sidebar ул. Li A: навъртам (цвят: # CC0000) # основните (граница: 0; капитониране: 0; сал: ляво; дисплей: блок; ширина: 809px; Височина: 100%; фон: # dddddd) (# крайна граница: 0; капитониране: 0; дисплей: блок; ширина: 100%; височина: 50px; фон: # eeeeee; преливник: скрити;)
Накрая ние сме прави. Ние създадохме прости 2 колона CSS layout.Click тук, за да видите пример
Свързани членове:
ако ви хареса четене тази статия, моля, проверете и други предмети, свързани по-долу:
Изпратете коментар