Equipos Programas Media Internet Telecomunicaciones Seguridad Base de Datos Programación Calidad Desarrollo Empresa

Ruta: >Programación>CSS

CSS Ejemplos

Tabla de Contenido

  1. Menu Vertical TIC
  2. Bloque de navegación
  3. Noticia
    1. Area de noticia
    2. Titulo de noticia
    3. Párrafo de noticia
  4. Lista de Menu
    1. Titulo de menus
    2. Grupo de item de menu
    3. Item menu

Contenido

  • Menu Vertical TIC

    Descripcion

    HTML

    <div id='idMenuIzq'>
  <h2 id='idtituloMenuIzq' class='tituloMenuIzq' >MixPb1</h2>
  
  <ul id='idxMenuIzq' class='Nivel0' >

    <li id='idLenguajes' class='Nivel0'>Lenguajes
    <ul id='idxMenuIzq' class='Nivel0'>
      
      <li id='idDatos Jerárquicos' class='Nivel1'>Datos Jerárquicos
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idEstándares de la Web' class='NTerMenuIzq'>
        <a href='.../INEstandares.htm' class='navlink' shape='rect'
        title='Estándares de la Web'>Estándares de la Web</a></li>
        <li id='idHTML' class='NTerMenuIzq'>
        <a href='.../HTMLContenido.htm' class='navlink' shape='rect'
        title='HTML'>HTML</a></li>
        <li id='idCSS' class='NTerMenuIzq'>
        <a href='.../CSSContenido.htm' class='navlink' shape='rect'
        title='CSS'>CSS</a></li>
        <li id='idXML' class='NTerMenuIzq'>
        <a href='.../XMLContenido.htm' class='navlink' shape='rect'
        title='XML'>XML</a></li>
        <li id='idXSL' class='NTerMenuIzq'>
        <a href='.../XSLContenido.htm' class='navlink' shape='rect'
        title='XSL'>XSL</a></li>
        <li id='idXPATH' class='NTerMenuIzq'>
        <a href='.../XPATHContenido.htm' class='navlink' shape='rect'
        title='XPATH'>XPATH</a></li>
        <li id='idXSD' class='NTerMenuIzq'>
        <a href='.../XSDContenido.htm' class='navlink' shape='rect'
        title='XSD'>XSD</a></li>
        <li id='idDTD' class='NTerMenuIzq'>
        <a href='.../DTDContenido.htm' class='navlink' shape='rect'
        title='DTD'>DTD</a></li>
        <li id='idXSLFO' class='NTerMenuIzq'>
        <a href='.../XSLFOContenido.htm' class='navlink' shape='rect'
        title='XSLFO'>XSLFO</a></li>
      </ul>
      </li>

      <li id='idAPPML' class='Nivel1'>APPML
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idAppml' class='NTerMenuIzq'>
       <a href='.../AppmlContenido.htm' class='navlink' shape='rect'
       title='Appml'>Appml</a></li>
      </ul>
      </li>

      <li id='idAPIs' class='Nivel1'>APIs
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idADO' class='NTerMenuIzq'>
        <a href='.../ADOContenido.htm' class='navlink' shape='rect'
        title='ADO'>ADO</a></li>
        <li id='idDOM' class='NTerMenuIzq'>
        <a href='.../DOMContenido.htm' class='navlink' shape='rect'
        title='DOM'>DOM</a></li>
      </ul>
      </li>

      <li id='idBD Relacional' class='Nivel1'>BD Relacional
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idSQL' class='NTerMenuIzq'>
        <a href='.../SQLContenido.htm' class='navlink' shape='rect'
        title='SQL'>SQL</a></li>
      </ul>
      </li>

      <li id='idScripts en Cliente' class='Nivel1'>Scripts en Cliente
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idVBasic Script' class='NTerMenuIzq'>
        <a href='.../VBSContenido.htm' class='navlink' shape='rect'
        title='VBasic Script'>VBasic Script</a></li>
        <li id='idJava Script' class='NTerMenuIzq'>
        <a href='.../JSContenido.htm' class='navlink' shape='rect'
        title='Java Script'>Java Script</a></li>
      </ul>
      </li>

      <li id='idScripts en Servidor' class='Nivel1'>Scripts en Servidor
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idASP' class='NTerMenuIzq'>
        <a href='.../ASPContenido.htm' class='navlink' shape='rect'
        title='ASP'>ASP</a></li>
        <li id='idPHP' class='NTerMenuIzq'>
        <a href='.../PHPContenido.htm' class='navlink' shape='rect'
        title='PHP'>PHP</a></li>
        <li id='idJSP' class='NTerMenuIzq'>
        <a href='/A_desarrollar.htm' class='navlink' shape='rect'
        title='JSP'>JSP</a></li>
      </ul>
      </li>

      <li id='idGenéricos' class='Nivel1'>Genéricos
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idVisual Basic' class='NTerMenuIzq'>
        <a href='.../VBContenido.htm' class='navlink' shape='rect'
        title='Visual Basic'>Visual Basic</a></li>
        <li id='idC++' class='NTerMenuIzq'>
        <a href='.../Cplusplus.htm' class='navlink' shape='rect'
        title='C++'>C++</a></li>
        <li id='idJava' class='NTerMenuIzq'>
        <a href='.../JavaContenido.htm' class='navlink' shape='rect'
        title='Java'>Java</a></li>
        <li id='idComparación de Lenguajes' class='NTerMenuIzq'>
        <a href='.../CLContenido.htm' class='navlink' shape='rect'
        title='Comparación de Lenguajes'>Comparación de Lenguajes</a></li>
      </ul>
      </li>

      <li id='idDiseño' class='Nivel1'>Diseño
      <ul id='idxMenuIzq' class='Nivel1'>
        <li id='idUML' class='NTerMenuIzq'>
        <a href='.../UMLContenido.htm' class='navlink' shape='rect'
        title='UML'>UML</a></li>
      </ul>
      </li>
    </ul>
    </li>

    <li id='idLibrerias' class='Nivel0'>Librerias
    <ul id='idxMenuIzq' class='Nivel0'>
      <li id='idLibrerias (XSD, XSL, XML, CSS)' class='NTerMenuIzq'>
      <a href='.../Librerias.htm' class='navlink' shape='rect'
      title='Librerias (XSD, XSL, XML, CSS)'>
      Librerias (XSD, XSL, XML, CSS)</a></li>
    </ul>
    </li>
  </ul>

</div>

    CSS

    Comentarios

  • Bloque de navegación

    Descripcion

    Area vertical para poner menus y noticias.

    Los distintos bloques verticales se ponen

    • flotantes
    • alineados a la izquierda
    • con la anchura definida

    HTML

    div class='navBlock'
 
o bien
div id='idMenuIzq'
div id='idMenuDer
div id='idContenido'

    CSS

    #idMenuIzq
{
  float:left; /* se coloca a la izquierda del contenedor  */
  width:20%;
  border: none;
  color: #000
  background-color: #ffffff;
}

    Comentarios

  • Noticia

    • Area de noticia

      Descripcion

      Area dentro de un bloque de navegación, para poner una noticia.

      HTML

      div class='spot'

      CSS

      Comentarios

    • Titulo de noticia

      Descripcion

      HTML

      h2 class='spot-block'

      CSS

      Comentarios

    • Párrafo de noticia

      Descripcion

      Parrafo explicativo de la noticia que puede incluir enlaces.

      HTML

      p class=spot-block'

      CSS

      Comentarios

  • Lista de Menu

    • Titulo de menus

      Descripcion

      navHead

      HTML

      h2 class='navHead'

      CSS

      Comentarios

    • Grupo de item de menu

      Descripcion

      Se definen con ul. La distancia al bloque se establece con el paddin

      HTML

      ul id='idxMenuIzq' class='Nivel0' ul id='idxMenuIzq' class='Nivel1'

      CSS

      div#IdMenuIzq  ul
{
margin-top: 1px;
margin-left=1px;
border-top: 4px inset #ff0000;
padding: 2px;
/*

list-style-type:none; /* Microsoft deja espacio de vineta Firefox no */
*/
}

      Comentarios

    • Item menu


Página generada automáticamente desde la Base de Datos: CSS/ el 27/3/2008 19:59:31

Copyright © TIC 2003-2008. Email: ilopeztic@hotmail.com