SlideShare una empresa de Scribd logo
1 de 9
Listas Ordenadas en HTML
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
Nos da como Resultado
Listas desordenada
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
Nos da como Resultado
Viñetas
<ul id="navi">
<li>inicio</li>
<li>acerca
de</li>
<li>contactos<
/li>
</ul>
Codigo CSS
#navi {
list-style-type:square;
}
#navi {
list-style-type:circle;
}
#navi {
list-style-
image:url(images/vineta.png);
}
Tambien le Podemos
agregar
#navi {
list-style:none;
}
<STYLE>
#navi {
list-style:none;
margin:0;
padding:0;
}
#navi {
}
#navi li {
margin:2px;
padding:2px;
border:1px solid#CCCCCC;
}
</style>
<body>
<ul id="navi">
<li>Nuestro Instituto</li>
<li>Catedratiocos</li>
<li>Carreras </li>
</ul>
</body>
Vínculos
<ul>
<li><a href="#">Nustro Instituto</a></li>
<li><a href="#">Catedraticos</a></li>
<li><a href="#">Carreras </a></li>
</ul>
MENÚ
HORIZONTAL<html>
<head>
<title> prueba </title>
<style>
#navi {
list-style:none;
margin:0;
padding:0;
}
#navi li {
margin:2px;
padding:2px;
border:1px solid #CCCCCC;
float:left;
}
</style>
</head>
<body>
<ul id="navi">
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
DIFERENTES ESTILOS DEL MENÚ
<ul id="navi">
<li><a href="#">inicio</a></li>
<li><a href="#">acerca de</a></li>
<li><a href="#">contactos</a></li>
</ul>
#navi { list-style:none;
margin:0;
padding:0;}
#navi li {margin:2px;
padding:0;
float:left;}
#navi li a {display:block;
width:100px;
padding:4px 0;
text-decoration:none;
text-align:center;
font-size:11px;
color:#FFFFFF;
background-color:#000000;}
#navi li a:hover {
color:#99CC00;
background-color:#003366;}
Presentacion css
Presentacion css

Más contenido relacionado

Similar a Presentacion css (11)

Presentación CSS y HTML en Gummurcia
Presentación CSS y HTML en GummurciaPresentación CSS y HTML en Gummurcia
Presentación CSS y HTML en Gummurcia
 
listas HTML
listas HTMLlistas HTML
listas HTML
 
CSS, Introducción
CSS, IntroducciónCSS, Introducción
CSS, Introducción
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
menú(listas)css
menú(listas)cssmenú(listas)css
menú(listas)css
 
Listas en HTML
Listas en HTMLListas en HTML
Listas en HTML
 
Anthony saravia documentacion-php
Anthony saravia documentacion-phpAnthony saravia documentacion-php
Anthony saravia documentacion-php
 
Maquetacion
MaquetacionMaquetacion
Maquetacion
 
Toggle - merinadesign
Toggle - merinadesignToggle - merinadesign
Toggle - merinadesign
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
Menus CSS Grupo#3
Menus CSS Grupo#3Menus CSS Grupo#3
Menus CSS Grupo#3
 

Último

TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
jlorentemartos
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
EduardoJosVargasCama1
 

Último (20)

Los dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la VerdadLos dos testigos. Testifican de la Verdad
Los dos testigos. Testifican de la Verdad
 
Los avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtualesLos avatares para el juego dramático en entornos virtuales
Los avatares para el juego dramático en entornos virtuales
 
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESOPrueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
Prueba de evaluación Geografía e Historia Comunidad de Madrid 2º de la ESO
 
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptxCONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
CONCURSO NACIONAL JOSE MARIA ARGUEDAS.pptx
 
Tema 11. Dinámica de la hidrosfera 2024
Tema 11.  Dinámica de la hidrosfera 2024Tema 11.  Dinámica de la hidrosfera 2024
Tema 11. Dinámica de la hidrosfera 2024
 
Usos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicasUsos y desusos de la inteligencia artificial en revistas científicas
Usos y desusos de la inteligencia artificial en revistas científicas
 
Actividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docxActividades para el 11 de Mayo día del himno.docx
Actividades para el 11 de Mayo día del himno.docx
 
Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024Interpretación de cortes geológicos 2024
Interpretación de cortes geológicos 2024
 
Posición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptxPosición astronómica y geográfica de Europa.pptx
Posición astronómica y geográfica de Europa.pptx
 
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdfFeliz Día de la Madre - 5 de Mayo, 2024.pdf
Feliz Día de la Madre - 5 de Mayo, 2024.pdf
 
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
TEMA 14.DERIVACIONES ECONÓMICAS, SOCIALES Y POLÍTICAS DEL PROCESO DE INTEGRAC...
 
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdfPlan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
Plan-de-la-Patria-2019-2025- TERCER PLAN SOCIALISTA DE LA NACIÓN.pdf
 
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdfPROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
PROPUESTA COMERCIAL SENA ETAPA 2 ACTIVIDAD 3.pdf
 
Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024Tema 19. Inmunología y el sistema inmunitario 2024
Tema 19. Inmunología y el sistema inmunitario 2024
 
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docxPLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
PLAN DE REFUERZO ESCOLAR MERC 2024-2.docx
 
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdfFICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
FICHA PROYECTO COIL- GLOBAL CLASSROOM.docx.pdf
 
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
Procedimientos para la planificación en los Centros Educativos tipo V ( multi...
 
Power Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptxPower Point E. S.: Los dos testigos.pptx
Power Point E. S.: Los dos testigos.pptx
 
Desarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por ValoresDesarrollo y Aplicación de la Administración por Valores
Desarrollo y Aplicación de la Administración por Valores
 
La Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración AmbientalLa Sostenibilidad Corporativa. Administración Ambiental
La Sostenibilidad Corporativa. Administración Ambiental
 

Presentacion css

  • 1.
  • 2. Listas Ordenadas en HTML <ol> <li>item</li> <li>item</li> <li>item</li> </ol> Nos da como Resultado Listas desordenada <ul> <li>item</li> <li>item</li> <li>item</li> </ul> Nos da como Resultado
  • 3. Viñetas <ul id="navi"> <li>inicio</li> <li>acerca de</li> <li>contactos< /li> </ul> Codigo CSS #navi { list-style-type:square; } #navi { list-style-type:circle; } #navi { list-style- image:url(images/vineta.png); }
  • 4. Tambien le Podemos agregar #navi { list-style:none; } <STYLE> #navi { list-style:none; margin:0; padding:0; } #navi { } #navi li { margin:2px; padding:2px; border:1px solid#CCCCCC; } </style> <body> <ul id="navi"> <li>Nuestro Instituto</li> <li>Catedratiocos</li> <li>Carreras </li> </ul> </body>
  • 5. Vínculos <ul> <li><a href="#">Nustro Instituto</a></li> <li><a href="#">Catedraticos</a></li> <li><a href="#">Carreras </a></li> </ul>
  • 6. MENÚ HORIZONTAL<html> <head> <title> prueba </title> <style> #navi { list-style:none; margin:0; padding:0; } #navi li { margin:2px; padding:2px; border:1px solid #CCCCCC; float:left; } </style> </head> <body> <ul id="navi"> <li><a href="#">inicio</a></li> <li><a href="#">acerca de</a></li> <li><a href="#">contactos</a></li> </ul>
  • 7. DIFERENTES ESTILOS DEL MENÚ <ul id="navi"> <li><a href="#">inicio</a></li> <li><a href="#">acerca de</a></li> <li><a href="#">contactos</a></li> </ul> #navi { list-style:none; margin:0; padding:0;} #navi li {margin:2px; padding:0; float:left;} #navi li a {display:block; width:100px; padding:4px 0; text-decoration:none; text-align:center; font-size:11px; color:#FFFFFF; background-color:#000000;} #navi li a:hover { color:#99CC00; background-color:#003366;}