Maak een eenvoudige tabel-loze sjabloon voor onze blog

Stileren template elementen

We zagen eerder dat stileren de basiselementen van de HTML-pagina. Laten we eens kijken hoe gestileerd via CSS, de elementen van de sjabloon blog eigenaars, of degene aan die we hebben toegewezen ID's onderzocht in het eerste deel van het artikel.

De volgende CSS code:

 # BLOG







 {



    



 background: # FFFFFF;



    



 text-align: left;



    



 width: 750px;







 }







 # LOGO







 {



    



 background: # 336699;







 }







 # BODY







 {



    



 background: # FFFFFF;



    



 float: left;



    



 width: 490;



    



 padding: 5px 5px 5px 5px;







 }







 # MENU







 {



    



 background: # FFFFFF;



    



 float: left;



    



 width: 245;



    



 padding: 5px 5px 5px 0px;







 }







 HANDTEKENING #







 {



    



 background: # 336699;



    



 color: # FFFFFF;



    



 clear: left;



    



 width: 740px;



    



 padding: 5px 5px 5px 5px;







 }

De belangrijkste container, geïdentificeerd als BLOG, wijst de achtergrondkleur van het sjabloon, lijnt u alle elementen aan de linkerkant (de centrale afstemming van alle blog direct aangegeven via HTML gezicht) en geeft het formaat in de breedte de hele lay-out.

Het logo, geïdentificeerd als een logo, gewoon toe te wijzen de achtergrondkleur van de doos met het logo van de site die gelijk zal zijn aan de achtergrondkleur van het beeld, ook al op dit punt, moet je een transparante GIF te creëren.

Het lichaam van de pagina, geïdentificeerd als BODY, specificeert de achtergrond kleur, grootte, vulling en niet-wrap.

Het menu van de pagina, geïdentificeerd als MENU, het gedraagt ​​zich precies zoals het lichaam.

De ondertekening van de bladzijde, geïdentificeerd als een handtekening, naast al de stilering het geval omdat de achtergrond, tekstkleur, padding en zo verder, verwijdert de niet-carriage return.

Persoonlijke conclusie

In dit artikel zagen we hoe u een eenvoudige tabel-loze lay-out voor onze blog op te bouwen, zagen we hoe de onverenigbaarheden tussen IE en andere browsers te overwinnen ... geweldig! Maar laat mij, tot slot, een persoonlijke overweging en absoluut twijfelachtige uitdrukken: ze waren comfortabel met goede, oude tafels ;-)

• <<
• 1
• 2
• 3
• >>