Simples 2 coluna css layout
Este é um tutorial sobre como usar o CSS para criar uma simples duas coluna layout.
O layout é composto por um cabeçalho, um conteúdo principal coluna, uma barra lateral, e um rodapé. Uma bonita layout básico, e não a todos os difícil criar com a CSS, uma vez que você sabe como lidar com os inevitáveis erros Internet Explorer.
1. Estrutura básica
Primeiro de tudo, criar a estrutura básica HTML:
Após isso, colocar alguns conteúdos nas diferentes seções:> <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> Nome da Empresa </ h1> <h4> Digite seu slogan </ h4> </ div> <div "sidebar" id => <h2> Navegação </ h2> <ul> <li> <a href = "#"> Home </ a> </ td> <li> <a href = "#"> Sobre nós </ a> </ td> < li> <a href = "#"> Srevices </ a> </ td> <li> <a href = "#"> Contato </ a> </ td> <li> <a href = "#"> Mapa do Site </ a> </ td> </ ul> </ div> <div id = "main"> <h2> Conteúdo </ h2> <p> lorem ipsum dolor sit amet, consectetuer dipiscing elit. Cum dis parturient montes, nascetur ridiculus mus. 1. De janeiro de 2002 lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cum dis parturient montes, nascetur ridiculus mus. > <h2> Footer </h2> </div> </div> 1. De janeiro de 2002 </ p> </ div> <div id = "footer"> <h2> Footer </ h2> </ div> </ div>
2. Css Código
Agora vamos criar css código:
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*/ ; } / * estilo duas coluna layout * / * (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 * /;)margin : 0 ; padding : 0 ; height : 100 %; } #page { margin : 0 auto ; padding : 0 ; width : 1009px ; height : 100 %; } html, # page (margin: 0; padding: 0; height: 100%;) # page (margin: 0 auto; padding: 0; width: 1009px; height: 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 ; } a (text-decoration: none;) 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; exibição: 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) # principal (margin: 0; padding: 0; float: left; display: block; width: 809px; height: 100%; background: # dddddd) # footer (margin: 0; padding: 0; display: block; largura: 100%; height: 50px; background: # eeeeee; overflow: hidden;)
finalmente estamos a fazer. Criámos uma simples coluna 2 css layout.Click aqui para ver o exemplo
Artigos Relacionados:
Se você gozava leitura deste artigo, veja outros artigos relacionados a seguir:
Enviar um comentário