« anterior próximo »
Páginas: [1]

Autor Tema: Efecto CSS esquinas redondeadas, border-radius ejemplo sobre tabla HTML CU01058D  (Leído 2888 veces)

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Efecto CSS esquinas redondeadas, border-radius ejemplo sobre tabla HTML CU01058D
« en: 22 de Abril 2017, 14:59 »
Muy buenos dias!
Les dejo mi ejercicio correspondiente a la entrega CU01058D del tutorial de desarrollador web desde cero con CSS.

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Curso CSS estilos aprenderaprogramar.com-->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>

<body>

<div id="contenedor">
   
    <table>
    <thead>
        <tr>
            <th id="color-curva-toplila"> Standard </th>
            <th id="color-curva-toplila"> Professional </th>
            <th id="color-curva-top"> Enterprise </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr> 
        <tr>
            <td> <div id="x"> </div> </td>
            <td> <div id="x"> </div> </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td id="color"> <div id="ok"> </div> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td id="color-curva-bottomlila"> $99 </td>
            <td id="color-curva-bottomlila"> $199 </td>
            <td id="color-curva-bottom"> $399 </td>
        </tr>
    </tfoot>
   
   
</table>
    </div>   
   
</body>

</html>



CSS:

Código: [Seleccionar]

#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
#ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
#x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}

#color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
#color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}

« Última modificación: 18 de Junio 2017, 18:39 por Alex Rodríguez »
En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Efecto CSS esquinas redondeadas - (CU01058D)
« Respuesta #1 en: 28 de Abril 2017, 00:06 »
Buenas.

Has repetido id en muchos elementos, los id deben ser únicos en un documento, es decir cada elementos puede tener un id que no se repita en el resto del documento. Aunque no te de ningún error es la forma adecuada de actuar, si quieres que varios elementos compartan propiedades css usa clases.

Saludos.  ;D
En línea

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
Re:Efecto CSS esquinas redondeadas, border-radius - (CU01058D)
« Respuesta #2 en: 29 de Abril 2017, 19:55 »
Pedro muchas gracias por la paciencia de siempre!

Adjunto de nuevo el ejercicio:

HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<!--Has repetido id en muchos elementos, los id deben ser únicos en un documento,
es decir cada elementos puede tener un id que no se repita en el resto del documento.-->

<html>
   
<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="CSS(58)Ejerciciofinal.css">
</head>

<body>

<div id="contenedor">
   
    <table>
    <thead>
        <tr>
            <th class="color-curva-toplila"> Standard </th>
            <th class="color-curva-toplila"> Professional </th>
            <th id="color-curva-top"> Enterprise </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <div class="x"> </div> </td>
            <td> <div class="x"> </div> </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr> 
        <tr>
            <td> <div class="x"> </div> </td>
            <td> <div class="x"> </div> </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
        <tr>
            <td> Datos </td>
            <td> Datos </td>
            <td class="color"> <div class="ok"> </div> </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td class="color-curva-bottomlila"> $99 </td>
            <td class="color-curva-bottomlila"> $199 </td>
            <td id="color-curva-bottom"> $399 </td>
        </tr>
    </tfoot>
   
   
</table>
    </div>   
   
</body>

</html>



CSS:

Código: [Seleccionar]


#contenedor {margin:auto; margin-top:20px; border:solid 1px black; width:450px;}
table tr,th {background-color:#dfdfdf; text-align:center; width:150px; height:60px;}
.ok {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/OK50x50.jpg);}
.x {margin:auto; width:50px; height:50px; background-image: url(http://elsitiodeale.byethost7.com/x50x50.jpg);}

.color {background-color:#e2f4c4;}
#color-curva-top {background-color:#e2f4c4; border-top-right-radius: 5px; border-top-left-radius: 5px;}
#color-curva-bottom {background-color:#e2f4c4; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-bottomlila {background-color:#dfdfdf; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
.color-curva-toplila {background-color:#dfdfdf; border-top-left-radius: 5px; border-top-right-radius: 5px;}

En línea

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Re:Efecto CSS esquinas redondeadas, border-radius - (CU01058D)
« Respuesta #3 en: 08 de Mayo 2017, 23:38 »
Buenas alefaletti.

Ahora mucho mejor.

Solo recomendarte que en vez de llamar a una clase x, intentes siempre que se pueda darle un nombre que sea significativos para que sea más fácil comprender el código.

Aún así ya puedes dar como terminado este ejercicio.

Saludos. ;D
En línea
Páginas: [1]
« anterior próximo »
 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".