He aqui un ejemplo diseño con css de un tema (solo el index) wordpress, de 3 columnas, una barra de navegación , pie de página y cabecera de página, la imagen que se muestra debajo describe el funcionamiento del mismo, y los detalles que se aplican con el css, debajo de la imagen el codigo html para general la web y el css que la formatea.
Este diseño cuenta con lo siguiente:
– Container
– Header
-Top Navigation Menu
– Left Navigation Menu
– Right Navigation menu
– Content Part
– Footer
Aqui vemos el codigo html del index:
<div id=container>
<div id=»header»>
<h2>Header</h2>
</div>
<div id=»topnav-container»>
<ul id=»topnav»>
<li> <a href=»#»>Home</a> </li>
<li> <a href=»#»>Categories</a> </li>
<li> <a href=»#»>Services</a> </li>
<li> <a href=»#»>About us</a> </li>
<li> <a href=»#»>Contact us</a> </li>
</ul>
</div>
<div id=»leftnav»>
This is a left navigation bar.
This is a left navigation bar
This is a left navigation bar
</div>
<div id=»rightnav»>
This is a right navigation bar
</div>
<div id=»content»>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam
</p>
</div>
<div id=»footer»>
<h2>Footer</h2>
</div>
</div>
Aqui vemos el CSS que formatea este diseño:
#container {
margin: 10px auto;
width: 95%;
border: 1px solid gray;
}
#header {
padding: 3px;
border-bottom: 1px solid gray;
}
#topnav-container {
border-bottom: 1px solid gray;
padding: 4px 0;
background: #e0e0e0;
}
%