Hace unos días yo estaba aplicando migas de pan en un sitio web que estoy trabajando. migas de pan no se utiliza a menudo, pero la mayoría de los sitios web corporativos están utilizando migas de pan. En este tutorial aprenderemos i cómo crear CSS escalable agradable basado pan rallado. Estoy usando sólo una gráfica sencilla. El resto de estilos CSS es básica con una lista desordenada como código HTML.

Final Preview

Esto es lo que hemos ido hoy en día. Descargar archivo (12,1 KB)

HTML Estructura

Aquí está nuestro código HTML. Es una lista sin orden simple:

 > <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > Main Lavel </a> </li> <li> <a href = "#" > Sub Lavel </a> </li> <li> <a href = "#" > Sub sub Lavel </a> </li> <li> Your Current page </li> </ul> <ul id = "breadcrumbs"> <li> href <a "#" => Inicio </ a> </ li> <li> href <a "#" => Principal Lavel </ a> </ li> < li> <a href = "#"> </ a> </ li> <li> href <a = Sub Lavel "#"> Sub Sub Lavel </ a> </ li> <li> su página actual </ li> </ ul> 

CSS Diseño

Aquí está un estilo simple CSS

  body ( 
  / 1 .13em "verdana" , arial, tahoma, sans-serif ; Fuente: 0 .69 em / 1 .13 em "Verdana, Arial, Tahoma, sans-serif;  
  ; background: # fff; 
  ) 

  ul, li ( 
  list-style-type: none; 
  padding: 0; 
  margin: 0; 
  ) 

  height : 2 .7em ;         border : 1px solid #c9c9c9 ; } # migas de pan (height: 2 .7 em; border: 1px solid # c9c9c9;) 

  # migas de pan li ( 
  float: left; 
  ; line-height: 2 .7 em; 
  ; color: # 777; 
  ; padding-left: .85 em; 
  ) 

 background : url ( breadcrums .jpg ) no-repeat right center ;         display :block ;         padding : 0 15px 0 0 ; } pan rallado # li a (background: url (breadcrums. jpg) no-repeat center right; display: block; padding: 0 15px 0 0;) 

Esta es la única imagen de flecha simple derecho de esquina, que es que estoy usando en este tutorial.

  , pan rallado # li a: link, 
  { pan rallado # li a: visited ( 
  ; color: # 777; 
  text-decoration: none; 
  ) 

  , a: link, a: visited,  
  , pan rallado # li a: hover, 
  { # migas de pan li a: focus ( 
  color: # 222 
  ) 

Resultado final

Aquí está el resultado final

Conclusión

Aplique estos consejos para sus proyectos en curso y el próximo, y seguramente apreciarán el esfuerzo.

Descargue el archivo de código fuente

Si lo desea, para comprobar su trabajo, usted puede descargar el archivo zip de este tutorial.

cssbreadcrumbs.rar (12,1 KB)

Si usted piensa que puede ser más tutorial mejor, por favor comparta con nosotros. Coméntanos

Si usted desea recibir más inspiración de nosotros, por favor considera suscribirte a nuestro feed de RSS o por correo electrónico.

Filed under: Css, Tutoriales por admin