Ir al contenido principal

Listas usando números romanos, círculos, cuadros y letras griegas

Listas usando números romanos, círculos, cuadros y letras griegas

A partir de la página web que se te proporciona, debes escribir las reglas CSS necesarias para lograr una página web que tenga el mismo aspecto que la siguiente imagen:

Código en html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejemplo de listas</title>
<style>
.lista-sin {
  list-style-type: none;
}

.lista-circulos {
  list-style-type: circle; <!--jcon esta parte se modifica que aparezca la lista-circulos con círculos y así con los demas-->
}

.lista-cuadrados { 
  list-style-type: square;
}

.lista-romanos {
  list-style-type: lower-roman;
}

.lista-griegos {
  list-style-type: lower-greek;
}
</style>
</head>
<body>
<p>Lista sin elemento gráfico:</p>
<ul class="lista-sin">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con círculos:</p>
<ul class="lista-circulos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con cuadrados:</p>
<ul class="lista-cuadrados">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ul>

<p>Lista con números romanos:</p>
<ol class="lista-romanos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>

<p>Lista con letras griegas:</p>
<ol class="lista-griegos">
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
</ol>
</body>

Comentarios

  1. gacetafrontal.com/que-fue-el-renacimiento/
    Aquí se puede decir que hubo un antes y un después que estuvo enmarcado por lo que sería la salida del período medieval.

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Curriculum Vitae

Ejercicio: A partir de la página web que se te proporciona, debes crear una página web que tenga el mismo aspecto que la siguiente imagen: Código  htm l: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Curriculum Vitae de Bruce Wayne</title> <style> body {   font-family: Arial,Verdana,sans-serif; } h1 {  <!--Este se usa para el como se va a ver todos los lineas con h1-->   font-family: Georgia,Times,serif;   font-size: 32px;   font-variant: small-caps; } h2 { <!--Este se usa para el como se va a ver todos los lineas con h2-->   font-family: Georgia,Times,serif;   font-size: 24px;   font-style: italic;   font-variant: small-caps; } li  {   font-weight: bold; } strong {   font-weight: normal; } </style> </head> <body> <h1>Curriculum Vitae de Bruce Wayne</h1> <h2>Datos personales...

Formulario usando colores

Formulario usando colores Se desea obtener la siguiente imagen: Código  en html <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Registro - iDESWEB</title> <style> body {   font-family: Arial, Helvetica, sans-serif;   width: 90%;   margin: 0 auto; } header {   text-align: center; } h1, h2 {   font-family: Georgia, serif; } h1 {   font-size: 3em; } fieldset {   margin: 1em auto; } legend {   font-size: 1.2em;   font-weight: bold;   text-transform: uppercase; } label {   font-weight: bold;   display: block; } input:focus, select:focus {   background-color: yellow; } input:hover, select:hover {   background-color: red; } #boton-crear {   font-size: 2em;   padding: 0.5em; } .inline {   display: inline; } .centrado {   text-align: center; } </style> </head...

Ejercicio dos usasdo HTML y CSS

  En el siguiente enlace se muestra el código no modificado que da solución a la anterior imagen. codigo_sin_modifica Ahora se debe aplicar los siguientes cambios al código: Tienes que tener en cuenta los siguientes requisitos: El texto principal: El color del texto es azul: #00F. El color de fondo del texto es verde claro: #CFC. El tipo de letra es la secuencia: Georgia, Cambria, serif. El tamaño del texto: 16px. El encabezado de nivel 1: El color del texto es rojo claro: #F00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 32px. El encabezado de nivel 2: El color del texto es rojo claro: #A00. El tipo de letra es la secuencia: Verdana, Calibri, sans-serif. El tamaño del texto: 24px. El color de los campos de los datos del libro es verde oscuro: #060. El texto "Internet" y la "Web" cuando actúan como sustantivos: El tamaño del texto: 20px. Texto en negrita. El texto "Hypertext Markup ...