Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.


Temas - paramonso

Páginas: 1 ... 3 4 5 6 7 [8]
141
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS. Efecto degradado de un color a otro. CU01060D
« en: 18 de Junio 2017, 12:38 »
Hola. Aquí les dejo el Ejercicio de la entrega CU01060D del curso práctico de desarrollo web con CSS.


Código HTML

Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Aprenderaprogramar.com Ejercicio60 Cu01060D</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 1.27" />
<link rel="stylesheet" type="text/css" href="Ejercicio60.css">
<style type="text/css">
@charset "utf-8";/* CSS Document */
#header h1{ font-weight: bold; font-size: 38px;font-family: "Arial"; text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),  0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); color: orange; text-align: center;
}
#header h2{ font-weight: bold; font-size: 17px;font-family: "Arial"; text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),  0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15); color: #00bfff; text-align: center;
}
</style>
</head>

<body>
 <div id="header">
            <h1 class="name-title">
           Aprenderaprogramar.com </br>
           CSS desde cero</br>
            ejercicio60  </br>
              CU01060D</br>
           </h1>
           <h2> Pablo Ramón Pérez Blasco</h2>
         
<div id="Caja"></div>
</div>
</body>

</html>


Código CSS

Código: [Seleccionar]
*{ margin:20px auto;
padding:20px;
font-family:verdana,sans-serif;
background: -webkit-linear-gradient( #228d22, #006400, #008000);
}

#Caja{
border:2px solid;
/*float:left;*/
margin: 80px auto;
width:400px;
height:200px;
background: -webkit-linear-gradient(60deg, #ff0000, #ffffff, #0000cd);
}



142
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS y HTML cómo poner esquinas redondeadas a una tabla border-radius CU01058D
« en: 17 de Junio 2017, 18:22 »
Hola a Todos. Aquí dejo el Ejercicio nº CU01058D del curso práctico de desarrollo web con CSS desde cero.


Código HTML

Código: [Seleccionar]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="ejercicio58.css">
<link rel="stylesheet"  href="https://fonts.googleapis.com/css?family=Tangerine">
<link href="https://fonts.googleapis.com/css?family=Akronim" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Almendra+Display" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=UnifrakturCook:700" rel="stylesheet">
</head>

<body>
<div id="Div1">
<h1 id="cab"> Curso CSS estilos aprenderaprogramar.com</h1>
<h1 id="cab">Practicas de propiedades para Tablas </h1>
<h1 id="subcab">Propiedades de bordes redondeados</h1>
<h1 id="cab">Ejercicio Entrega 58 cu01058d</h1>
<h2 id="nom">Pablo Ramon Perez Blasco</h2>
</div>
<h1 align="center">Ejercicio Entrega 58 cu01058d</h1>
 <div class="Cont1" >
 
<table class="tab-des">

<!--<caption>: elemento opcional que permite poner un título de tabla. Muchas veces no se usa.-->
<thead>
 <!-- <tr> Filas  (table row).-->

<tr>
<!-- <th> Columnas de cabecera  -->
<th class="colum1">Standard</th>
<th class="colum2">Professional</th>
<th class="colum3">Enterprise</th>
</tr>
</thead>

<tbody>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1" ><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>

</tr>
 
 <tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>

</tr>

<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"></td>
<td class="colum2"><img src="http://imgur.com/0VfOuO8.png"></td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"></td>

</tr>

<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1"><img src="http://imgur.com/lZX3UpQ.png"> </td>
<td class="colum2"><img src="http://imgur.com/lZX3UpQ.png"> </td>
<td class="colum3"><img src="http://imgur.com/0VfOuO8.png"> </td>

</tr>
</tbody>
<tfoot>
<tr>
<!-- <td> Columnas normales de datos (table data cell). -->
<td class="colum1">$99</td>
<td class="colum2">$199</td>
<td class="colum3">$399</td>

</tr>
</tfoot>
</table>
</div>

   
</body>
</html>


Código CSS

Código: [Seleccionar]
body {font-family: verdana, sans-serif; margin:0;background-color:DarkSlateBlue; }
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<Presentacion cabecera>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
#Div1{ height:400px; width:75%x; }
#Menu{ height:450px; width:100%;}
#Div1, #Menu{ background-color:indigo; border-style:none; color:red; border-width:0px;}
#cab{color:#228B22; text-align:center; font-family: "Tangerine", serif; font-size:88px;
text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
#subcab{ color:#008000; text-align:center; font-family: "Akronim", cursive; font-size: 58px;
text-shadow: 4px 4px 4px #aaa; margin:0; padding:0; }
#nom{ color:#00FF7F; text-align:center; font-family: "Almendra Display", cursive; font-size:18px;
text-shadow: 4px 4px 4px #fff; margin:0; padding:0; }
#Menu{ font-family: "UnifrakturCook", cursive; font-size:20px;}
#menunom{color:#00FF7F; font-size:55px; text-align:center; text-shadow: 4px 4px 4px #fff;
  margin:50;padding:50;}
h1, h2 {text-align:center;}

/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<EJERCICIO Nº 58 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/* <<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/


/*<<<<<<<<<<<<<<<<CONTENEDOR PRINCIPAL >>>>>>>>>>>>>>>>>*/
.Cont1{
margin:4% auto;    /*Centrar el contenedor en el centro de la pagina*/
border: 2px solid white; /*Grosor del contenedor */
height: 450px; /*Altura del contenedor */
width: 900px; /*Anchura del contenedor*/
background-color:white; /*Color fondo contenedor*/
color:black; /*Color texto contenedor*/
font-size: 20px; /*Tamaño de la fuente*/
text-align:center; /*Alineacion del texto */
padding-top: 10px; /*Separación del borde de la cabecera*/
word-wrap:break-word; /*Cuando la letra llega al final de la caja se cortara en formato word*/
}

/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<DISEÑO DE LA TABLA  >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>><*/
/*<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/

.tab-des {  color: #333; /*se muestras los textos en la tabla con el color #3333 */
font-family: calibri;      /*tipo de fuente para la tabla*/
width: 840px;     /*ancho de la tabla*/
margin:0.5% auto;          /*Alineacion tabla*/

  }
   
td, th {
border: 1px solid transparent;       /* borde de 1 pixel solido color tranparente*/
height: 65px; /*altura de las celdas de cabecera y de datos 30px*/
border-collapse:collapse; /*Sin Bordes*/
color:black; /*color texto*/
text-shadow: 2px 2px #ffffff; /*sombra texto*/
}

th {
font-size:30px;
font-weight: bold; /*Fuente cabeceras negrita */
}
td {
background: #FAFAFA; /*color celdas de datos #FAFAFA */
text-align: center; /* alineado de texto en celdas de datos */
}

   
.colum1, .colum2{
background-color:#E6E6FA;/*Color del fondo de la caja*/
}

.colum3 {
background-color:#DAF7A6  ;/*Color del fondo de la caja*/
}
thead th{
border-top-left-radius:10px; /*esquinas redondeadas*/
border-top-right-radius:10px;

}
tfoot td{
font-family: Calibri; /*tipo de fuente para la tabla*/
font-weight: bold; /*fuente para el tfoot */
font-size:30px; /*tamaño fuente pa tfoot */
border-bottom-left-radius:10px;/*esquinas redondeadas*/
border-bottom-right-radius:10px;
}

143
Comunidad / Hola a tod@s Aprender programar El ignorante afirma, el sabio duda y reflexiona.
« en: 17 de Junio 2017, 17:02 »
Hola a todos! Soy nuevo en este foro y me gustaría saber cómo funciona no encuentro una pagina donde acudir.

Gracias.

Páginas: 1 ... 3 4 5 6 7 [8]

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