lunes, 25 de julio de 2016
domingo, 24 de julio de 2016
FORMULARIO CON SELECT OPTION
<html>
<head>
<title> </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos">
</head>
<body>
<form action="guardar.php" method="post">
<label for="titulo"> CONTROL DE PRODUCTOS</label>
<label for="producto">PRODUCTO</label>
<input type="text" name="producto"></input>
<label for="producto">CATEGORÍA</label>
<select type="text" name="categoria">
<option>LATEOS</option>
<option>CARNES</option>
<option>BEBIDAS</option>
</select>
<label for="fecha">FECHA DE INGRESO</label>
<input type="date" name="fecha"></input>
<label for="cantidad">CANTIDAD INGRESADA</label>
<input type="text" name="cantidad"></input>
<label for="mostrar"><a href="mostrar.php">MOSTRAR DATOS<a></label>
<button type="submit" value="ingresar">INGRESAR</button>
</form>
</table>
</body>
</html>
_________________________________________________________________________________
APLICANDO CSS A NUESTRO FORMULARIO
form{
width:40%;
height:60%;
border:1px solid blue;
margin: 0 auto;
padding:12px 12px;
}
label{
display:block;
width:90%;
border-bottom:12px;
margin-bottom:15px;
}
input{
width:90%;
margin-bottom:15px;
border-bottom:12px;
}
select{
width:90%;
border-bottom:12px;
margin-bottom:15px;
}
button{
border:none;
background:gray;
padding:14px 14px;
border-radius: 0.5em;
cursor:pointer;
border:2px solid black;
}
input:focus{
border:2px solid black;
}
button:hover{
border:2px solid blue;
}
<head>
<title> </title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/estilos">
</head>
<body>
<form action="guardar.php" method="post">
<label for="titulo"> CONTROL DE PRODUCTOS</label>
<label for="producto">PRODUCTO</label>
<input type="text" name="producto"></input>
<label for="producto">CATEGORÍA</label>
<select type="text" name="categoria">
<option>LATEOS</option>
<option>CARNES</option>
<option>BEBIDAS</option>
</select>
<label for="fecha">FECHA DE INGRESO</label>
<input type="date" name="fecha"></input>
<label for="cantidad">CANTIDAD INGRESADA</label>
<input type="text" name="cantidad"></input>
<label for="mostrar"><a href="mostrar.php">MOSTRAR DATOS<a></label>
<button type="submit" value="ingresar">INGRESAR</button>
</form>
</table>
</body>
</html>
_________________________________________________________________________________
APLICANDO CSS A NUESTRO FORMULARIO
form{
width:40%;
height:60%;
border:1px solid blue;
margin: 0 auto;
padding:12px 12px;
}
label{
display:block;
width:90%;
border-bottom:12px;
margin-bottom:15px;
}
input{
width:90%;
margin-bottom:15px;
border-bottom:12px;
}
select{
width:90%;
border-bottom:12px;
margin-bottom:15px;
}
button{
border:none;
background:gray;
padding:14px 14px;
border-radius: 0.5em;
cursor:pointer;
border:2px solid black;
}
input:focus{
border:2px solid black;
}
button:hover{
border:2px solid blue;
}
miércoles, 20 de julio de 2016
MENU PRINCIPAL
PRIMERO HACEMOS NUESTRO MENÚ EN HTML
<html>
<head>
<title> pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="inicio.html">VISION</a></li>
<li><a href="inicio.html">MISIÓN</a></li>
<li><a href="inicio.html">NOVEDADES</a></li>
<li><a href="inicio.html">NOTICIAS</a></li>
</ul>
</nav>
</body>
</html>
_______________________________________________________
SEGUNDO APLICAMOS NUESTRO MENÚ CON CSS
body{
background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
}
nav{
/*Bordes redondeados*/
-webkit-border-radius:10px;/*Para chrome y Safari*/
-moz-border-radius:10px;/*Para Firefox*/
-o-border-radius:10px;/*Para Opera*/
border-radius:10px;/*El estandar por defecto*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
/*Degradados*/
background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/
background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/
background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
overflow:hidden;
padding:10px 10px;
width:1000px;
margin: 0 auto;
}
nav ul li{
/*Bordes redondeados*/
-webkit-border-radius:5px;/*Chrome y Safari*/
-moz-border-radius:5px;/*Firefox*/
-o-border-radius:5px;/*Opera*/
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:90px;
text-align:center;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFF;
}
nav ul li:hover{
/*Degradado de fondo*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
/*Sombras*/
-webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/
-moz-box-shadow: 1px -1px 0px #999;/*Firefox*/
-o-box-shadow: 1px -1px 0px #999;/*Opera*/
box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/
border:1px solid #E3E3E3;
}
nav ul li a{
color:#999;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
-webkit-transition: 0.4s linear all;
-moz-transition: 0.4s linear all;
-o-transition: 0.4s linear all;
transition: 0.4s linear all;
}
nav ul li a:hover {
color:#000;
}
<html>
<head>
<title> pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<nav>
<ul>
<li><a href="inicio.html">INICIO</a></li>
<li><a href="inicio.html">VISION</a></li>
<li><a href="inicio.html">MISIÓN</a></li>
<li><a href="inicio.html">NOVEDADES</a></li>
<li><a href="inicio.html">NOTICIAS</a></li>
</ul>
</nav>
</body>
</html>
_______________________________________________________
SEGUNDO APLICAMOS NUESTRO MENÚ CON CSS
body{
background: -webkit-linear-gradient(left, rgba(212,228,239,1) 0%, rgba(134,174,204,1) 100%);
}
nav{
/*Bordes redondeados*/
-webkit-border-radius:10px;/*Para chrome y Safari*/
-moz-border-radius:10px;/*Para Firefox*/
-o-border-radius:10px;/*Para Opera*/
border-radius:10px;/*El estandar por defecto*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));/*Para chrome y Safari*/
/*Degradados*/
background-image: -moz-linear-gradient(top center, #FFF, #CCC);/*Para Firefox*/
background-image: -o-linear-gradient(top, #FFF, #CCC);/*Para Opera*/
background-image: linear-gradient(top, #FFF, #CCC);/*El estandar por defecto*/
overflow:hidden;
padding:10px 10px;
width:1000px;
margin: 0 auto;
}
nav ul li{
/*Bordes redondeados*/
-webkit-border-radius:5px;/*Chrome y Safari*/
-moz-border-radius:5px;/*Firefox*/
-o-border-radius:5px;/*Opera*/
border-radius:5px;/*Estandar por defecto*/
float:left;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin-right:90px;
text-align:center;
/*Sombras para texto, los mismos parametros que box-shadow*/
text-shadow: 0px 1px 0px #FFF;
}
nav ul li:hover{
/*Degradado de fondo*/
background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to( #E3E3E3));/*Chrome y Safari*/
background-image: -moz-linear-gradient(top center, #FFF, #E3E3E3);/*Firefox*/
background-image: -o-linear-gradient(top, #FFF, #E3E3E3);/*Opera*/
background-image: linear-gradient(top, #FFF, #E3E3E3);/*Estandar por defecto*/
/*Sombras*/
-webkit-box-shadow: 1px -1px 0px #999;/*Chrome y Safari*/
-moz-box-shadow: 1px -1px 0px #999;/*Firefox*/
-o-box-shadow: 1px -1px 0px #999;/*Opera*/
box-shadow: 1px -1px 0px #999;/*Estandar por defecto*/
border:1px solid #E3E3E3;
}
nav ul li a{
color:#999;
display:block;
padding:10px;
text-decoration:none;
/*Transiciones*/
-webkit-transition: 0.4s linear all;
-moz-transition: 0.4s linear all;
-o-transition: 0.4s linear all;
transition: 0.4s linear all;
}
nav ul li a:hover {
color:#000;
}
martes, 12 de julio de 2016
aplicando css a html
index
_________________________________________________________
<html>
<head>
<title> pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<p id="parrafo"> CSS es un lenguaje utilizado en la presentación
de documentos HTML. Un documento HTML
viene siendo coloquialmente “una página web”. Entonces
podemos decir que el lenguaje CSS sirve para organizar
la presentación
y aspecto de una página web.
</p>
</body>
</html>
_________________________________________
css_______________________________________________________________________________
body
{
background-color:#0489B1;
}
#parrafo
{
color:#DF3A01;
font-family:arial;
font-size:20px;
}
_________________________________________________________
<html>
<head>
<title> pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<p id="parrafo"> CSS es un lenguaje utilizado en la presentación
de documentos HTML. Un documento HTML
viene siendo coloquialmente “una página web”. Entonces
podemos decir que el lenguaje CSS sirve para organizar
la presentación
y aspecto de una página web.
</p>
</body>
</html>
_________________________________________
css_______________________________________________________________________________
body
{
background-color:#0489B1;
}
#parrafo
{
color:#DF3A01;
font-family:arial;
font-size:20px;
}
miércoles, 6 de julio de 2016
index
<html>
<head>
<title>pagina</title>
<link rel="stylesheet" type="text/css"
href="css/estilos.css">
<meta charset="utf-8">
</head>
<body>
<table border="2" align="center" width="900">
<tr>
<td>
<div id="menu">
<ul>
<li><a href="inicio.html" target="principal">INICIO</a></li>
<li><a href="vision.html" target="principal">VISIÓN</a></li>
<li><a href="mision.html"target="principal">MISIÓN</a></li>
<li><a href="contactos.html"target="principal">CONTACTOS</a></li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
<iframe name="principal" src="inicio.html"
width="900" height="800"></iframe>
</td>
</tr>
</table>
</body>
</html>
viernes, 10 de junio de 2016
menu principal
table{
margin-top: 100px;
}
#menu{
height:200px;
text-align:center;
width: 1200px;
}
#menu a {
display: inline-block;
width: 200px;
}
#menu a img {
height: 150px;
width: 150px;
}
#menu a:hover img {
height: 180px;
width: 180px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
margin-top: 100px;
}
#menu{
height:200px;
text-align:center;
width: 1200px;
}
#menu a {
display: inline-block;
width: 200px;
}
#menu a img {
height: 150px;
width: 150px;
}
#menu a:hover img {
height: 180px;
width: 180px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
martes, 7 de junio de 2016
mostrar datos
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> tabla</title>
</head>
<body>
<center>
<center> <table border="1">
<thead>
<tr>
<th colspan="1"> <a href="index.html">nuevo</a></th><!--el href="index.html es para volver a
cargar el formulario principal por si deseo ingresar otro dato-->
<th colspan="5"> lista de alumnos</th>
</tr>
</thead>
<tbody><!--encabezado de una tabla-->
<tr>
<td> id </td> <!--variables que use en la base de datos-->
<td> nombre</td><!--variables que use en la base de datos-->
<td> grado </td><!--variables que use en la base de datos-->
<td> edad</td><!--variables que use en la base de datos-->
</tr>
<?php
include("conexion.php");
$query="SELECT * FROM alumnos ORDER BY 1";
$resultado=$conexion->query($query);
while($row=$resultado->fetch_assoc()){ //ciclo para llamar los datos//
?>
<tr>
<td><?php echo $row['id'];?></td> <!--son las variables que realice en la base de datos-->
<td><?php echo $row['nombre'];?></td><!--son las variables que realice en la base de datos-->
<td><?php echo $row['grado'];?></td><!--son las variables que realice en la base de datos-->
<td><?php echo $row['edad'];?></td><!--son las variables que realice en la base de datos-->
</tr>
<?php
}
?>
</tbody>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title> tabla</title>
</head>
<body>
<center>
<center> <table border="1">
<thead>
<tr>
<th colspan="1"> <a href="index.html">nuevo</a></th><!--el href="index.html es para volver a
cargar el formulario principal por si deseo ingresar otro dato-->
<th colspan="5"> lista de alumnos</th>
</tr>
</thead>
<tbody><!--encabezado de una tabla-->
<tr>
<td> id </td> <!--variables que use en la base de datos-->
<td> nombre</td><!--variables que use en la base de datos-->
<td> grado </td><!--variables que use en la base de datos-->
<td> edad</td><!--variables que use en la base de datos-->
</tr>
<?php
include("conexion.php");
$query="SELECT * FROM alumnos ORDER BY 1";
$resultado=$conexion->query($query);
while($row=$resultado->fetch_assoc()){ //ciclo para llamar los datos//
?>
<tr>
<td><?php echo $row['id'];?></td> <!--son las variables que realice en la base de datos-->
<td><?php echo $row['nombre'];?></td><!--son las variables que realice en la base de datos-->
<td><?php echo $row['grado'];?></td><!--son las variables que realice en la base de datos-->
<td><?php echo $row['edad'];?></td><!--son las variables que realice en la base de datos-->
</tr>
<?php
}
?>
</tbody>
</table>
</center>
</body>
</html>
Suscribirse a:
Entradas (Atom)