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

alefaletti

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 48
    • Ver Perfil
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 »

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

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;}


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

 

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".