[CSS] Como usar la variable <li class

[fede5426]

La estructura basica de esa web seria algo asi:

Código HTML:

<div class="contenedor">
  <div class="login"></div>
  <header><!-- LOGO --></header>
  <nav><!-- Lista de items --></nav>
  <section class="contenido">
     <div class="izq"></div>
     <div class="der"></div>
     <article></article> 
  </section>
</div>
 

Código CSS:

*{
  margin:0;
  padding:0;
}
 
.contenedor{
  width:1280px;
  margin:0 auto;
  background-color:#000;
  /*Aca va tu imagen de fondo fondo*/
}
 
.login{
  width:100%;
  height:45px;
  background-color:#5f7ff6;
  position:absolute;
  top:0;
  left:0;
}
 
header{
  height:250px;
}
 
nav{
  width:695px;
  height:45px;
  background-color:#404040;
  margin:0 auto;
}
 
.contenido{
  width:695px;
  height:400px;
  background-color:#a1a1a1;
  margin:0 auto;
  position:relative;
}
 
.izq, .der{
  width:180px;
  height:250px;
  position:absolute;
}
 
.izq{
  background-color:#f4f44f;
  left:-180px;
}
 
.der{
  background-color:#4f4ff4;
  right:-180px;
}
 

Faltaria agregarle el resto de elementos.. pero basicamente es eso.

http://codepen.io/anon/pen/qEQwvO