jueves, 31 de marzo de 2016

Estructura basica de un diseño HTML con CSS

Código de una página web con HTML y CSS


<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Resultados</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/jquery-ui.css" rel="stylesheet">     
   </head>
   <body>
    <header>
     <div class="container">
       <div class="row">
           <div class="col-sm-12 titu">
                <h4>"Resultados de Calificaciones"</h4>
           </div>
       </div>
     </div>
  </header>



    <nav class="Menu">
      <ul class="nav nav-tabs nav-justified" role="tablist">
      <li role="presentacion" class="active"><a href="index.php">INICIO</a></li>
        <li role="presentacion" class="active"><a href="Listado.php">NOTAS</a></li>
        <li role="presentacion" class="active"><a href="Listado_docente.php">VISUALIZAR</a></li>
        <li role="presentacion" class="active"><a href="Docentes.php">DOCENTES</a></li>
      </ul>
    </nav>
  <section>
      <div class="container">
        <div class="row">
          <div class="col-sm-6 ">
          <img class="img-responsive" src="img/imagen1.jpg" />
          </div>
            <div class="col-sm-5 col-sm-offset-1 form well">
              <form role="Formulario" action="inc/Guardar.php" method="POST" nombre="Estudiantes">
              <h1>Datos de Estudiante</h1>
              <label for="Nombre">Nombre</label>
              <input for="Nombre" class="form-control" name="Nombre" placeholder="Ingresar Nombre" ></label>
              <label for="PI">PI</label>
              <input for="PI" class="form-control" name="PI" placeholder="Primer Parcial" ></label>
              <label for="PII">PII</label>
              <input for="PII" class="form-control" name="PII" placeholder="Segundo Parcial" ></label>
              <label for="Promedio">Promedio</label>
              <input type="Promedio" class="form-control" name ="Promedio" placeholder="Obtener Promedio" >
              <button type="submit" style="margin-top: 20px;"class="btn btn-default">Guardar</button>
              </form>
             </div>
          </div>
      </div>
    </section>


    <footer>
    <div class="container">
       <div class="row">
           <div class="col-sm-12 titu">
             <h3>UNAN-FAREM-CHONTALES 2014</h3>
          </div>
         </div>
        </div>
     </div>
    </footer>

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-ui.js"></script>    
   
  </body>
</html>

Código CSS

body{
    background-color:blue;
}
header{
    background-color: #CCDBDB;
}
header .titu h4{
    text-align: center;
    font-family: serif;
    margin-top: 30px;
    font-size: 25px;
}
.Menu{
    margin-top: 10px;  
}
.form{
    margin-top: 120px;
    text-align: center;

}
 h3{
    text-align: center;
    font-family: 50px;
   
}
h4{
    text-align: center;
    font-family: 50px;
}


.centrar{
    text-align: center;
    margin: auto;
}
img{
    margin-top: 20px;
    margin-left: 20px;
    width: 440px;
    height: 180px;
}
 

1 comentario: