Código SE4
<!DOCTYPE html>
<html>
<head>
<title>SE4 - 2013</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Estilos -->
<style type="text/css">
*{
font-family: Arial, Gadget, sans-serif;
font-size: 16px;
line-height: 30px;
}
body{
background-color: #000;
}
#contenedor{
width: 1000px;
height: 700px;
margin: 0px auto;
border-radius: 10px;
box-shadow: 0px 0px 40px #FC0;
background-image:url(logo.png);
}
#blanco{
top: 0px;
left: 0px;
width: 300px;
height: 200px;
float: left;
}
#blanco:hover{
-webkit-transform:rotate(360deg) scale(0.5,0.5);/* Anteponer prefijo -webkit-propiedad para Chrome */
-webkit-transition: 2s;
opacity: 0.5;
}
#marron{
width: 700px;
height: 200px;
background: #634425;
background-image:url(cabecera.png);
float: left;
}
#ocre{
width: 300px;
height: 500px;
background: #EE7C15;
float: left;
}
#crema{
width: 700px;
height: 500px;
background: #FCECBA;
float: left;
}
#ocre>nav{
display: block;
width: 150px;
height: 205px;
float: right;
}
#ocre>nav>ul{
position: relative;
top: -16px;
width: 140px;
height: 203px;
background: #000;
border: none;
float: right;
}
#ocre>nav>ul>li{
clear:both;
float: right;
width: 160px;
height: 30px;
list-style: none;
padding: 10px;
border-bottom: 1px solid #FCECBA; /* crema */
}
#ocre>nav>ul>li:first-child{
background-color: #FCECBA;
}
#ocre>nav>ul>li>a.colorletra{
color: #000;
}
#ocre>nav>ul>li>a{
text-decoration: none;
color: #FCECBA;
width: 160px;
height: 32px;
text-align:right;
float: right;
}
#ocre>nav>ul>li:hover{
background-color: #EE7C15;
}
#ocre>nav>ul>li>a:hover{
color: #000;
}
#ocre>nav>ul>li#primerelemento:hover{
background-color:#000;
}
#ocre>nav>ul>li#primerelemento>a#enlace:hover{
color: #FFFFD0;
}
.colorletra{
color: #000;
}
p{
font-size: 14px;
line-height: 20px;
padding: 40px;
}
img:hover{
border-radius: 0px;
}
.bordeizquierdosuperior{
border-top-left-radius: 10px;
}
.bordederechosuperior{
border-top-right-radius: 10px;
}
.bordeizquierdoinferior{
border-bottom-left-radius: 10px;
}
.bordederechoinferior{
border-bottom-right-radius: 10px;
}
</style>
<script type="text/javascript">
function permiso(){
var seleccion;
seleccion = window.confirm("Oprima Aceptar para comenzar con el proceso. \n Elija Cancelar para abortarlo.");
if (seleccion == true) alert("Transacción en proceso."); // El título de la ventana lo pone el navegador, no es posible personalizarlo!
}
function calcular(){
var operador1 = 0;
operador2 = 0;
var operador3 = 0, resultado = 0;
operador1 = parseInt(prompt("Ingrese el 1er. operador:", 0));
operador2 = parseInt(prompt("Ingrese el 2do. operador:", 0));
operador3 = parseInt(prompt("Ingrese el 3er. operador:", 0));
resultado = operador1 + operador2 + operador3;
alert("El resultado es: " + resultado);
}
function sumar(){
var operador1 = parseInt(prompt("Ingrese el 1er. operador:", 0));
var operador2 = parseInt(prompt("Ingrese el 2do. operador:", 0));
var operador3 = parseInt(prompt("Ingrese el 3er. operador:", 0));
var resultado = operador1 + operador2 + operador3;
alert("El resultado es: " + resultado);
}
function resolver(){
var resultado = 0;
for(i=1; i<=3; i++){
resultado = resultado + parseInt(prompt("Ingrese el operador nro. " + i + ":", 0));
}
alert("El resultado es: " + resultado);
}
</script>
<!-- Fin Estilos -->
</head>
<body>
<div id="contenedor">
<div id="blanco" class="bordeizquierdosuperior">
<img src="Logo.png" class="bordeizquierdosuperior"/>
</div>
<div id="marron" class="bordederechosuperior">
</div>
<div id="ocre" class="bordeizquierdoinferior">
<nav>
<ul>
<li id="primerelemento"><a href="#" id="enlace" class="colorletra" >Inicio</a></li>
<li><a href="#" onClick="javascript: window.alert('Verifique que la impresora esté activada.');" >Verificar conexion</a></li>
<li><a href="#" onClick="javascript: permiso()">Ejecutar componente</a></li>
<li><a href="#" onClick="javascript: calcular()">Realizar calculo</a></li>
</ul>
</nav>
</div>
<div id="crema" class="bordederechoinferior">
<p>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti.
Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit. Ea mei nullam facete, omnis oratio offendit ius cu.
</p>
</div>
</div>
</body>
</html>
<html>
<head>
<title>SE4 - 2013</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- Estilos -->
<style type="text/css">
*{
font-family: Arial, Gadget, sans-serif;
font-size: 16px;
line-height: 30px;
}
body{
background-color: #000;
}
#contenedor{
width: 1000px;
height: 700px;
margin: 0px auto;
border-radius: 10px;
box-shadow: 0px 0px 40px #FC0;
background-image:url(logo.png);
}
#blanco{
top: 0px;
left: 0px;
width: 300px;
height: 200px;
float: left;
}
#blanco:hover{
-webkit-transform:rotate(360deg) scale(0.5,0.5);/* Anteponer prefijo -webkit-propiedad para Chrome */
-webkit-transition: 2s;
opacity: 0.5;
}
#marron{
width: 700px;
height: 200px;
background: #634425;
background-image:url(cabecera.png);
float: left;
}
#ocre{
width: 300px;
height: 500px;
background: #EE7C15;
float: left;
}
#crema{
width: 700px;
height: 500px;
background: #FCECBA;
float: left;
}
#ocre>nav{
display: block;
width: 150px;
height: 205px;
float: right;
}
#ocre>nav>ul{
position: relative;
top: -16px;
width: 140px;
height: 203px;
background: #000;
border: none;
float: right;
}
#ocre>nav>ul>li{
clear:both;
float: right;
width: 160px;
height: 30px;
list-style: none;
padding: 10px;
border-bottom: 1px solid #FCECBA; /* crema */
}
#ocre>nav>ul>li:first-child{
background-color: #FCECBA;
}
#ocre>nav>ul>li>a.colorletra{
color: #000;
}
#ocre>nav>ul>li>a{
text-decoration: none;
color: #FCECBA;
width: 160px;
height: 32px;
text-align:right;
float: right;
}
#ocre>nav>ul>li:hover{
background-color: #EE7C15;
}
#ocre>nav>ul>li>a:hover{
color: #000;
}
#ocre>nav>ul>li#primerelemento:hover{
background-color:#000;
}
#ocre>nav>ul>li#primerelemento>a#enlace:hover{
color: #FFFFD0;
}
.colorletra{
color: #000;
}
p{
font-size: 14px;
line-height: 20px;
padding: 40px;
}
img:hover{
border-radius: 0px;
}
.bordeizquierdosuperior{
border-top-left-radius: 10px;
}
.bordederechosuperior{
border-top-right-radius: 10px;
}
.bordeizquierdoinferior{
border-bottom-left-radius: 10px;
}
.bordederechoinferior{
border-bottom-right-radius: 10px;
}
</style>
<script type="text/javascript">
function permiso(){
var seleccion;
seleccion = window.confirm("Oprima Aceptar para comenzar con el proceso. \n Elija Cancelar para abortarlo.");
if (seleccion == true) alert("Transacción en proceso."); // El título de la ventana lo pone el navegador, no es posible personalizarlo!
}
function calcular(){
var operador1 = 0;
operador2 = 0;
var operador3 = 0, resultado = 0;
operador1 = parseInt(prompt("Ingrese el 1er. operador:", 0));
operador2 = parseInt(prompt("Ingrese el 2do. operador:", 0));
operador3 = parseInt(prompt("Ingrese el 3er. operador:", 0));
resultado = operador1 + operador2 + operador3;
alert("El resultado es: " + resultado);
}
function sumar(){
var operador1 = parseInt(prompt("Ingrese el 1er. operador:", 0));
var operador2 = parseInt(prompt("Ingrese el 2do. operador:", 0));
var operador3 = parseInt(prompt("Ingrese el 3er. operador:", 0));
var resultado = operador1 + operador2 + operador3;
alert("El resultado es: " + resultado);
}
function resolver(){
var resultado = 0;
for(i=1; i<=3; i++){
resultado = resultado + parseInt(prompt("Ingrese el operador nro. " + i + ":", 0));
}
alert("El resultado es: " + resultado);
}
</script>
<!-- Fin Estilos -->
</head>
<body>
<div id="contenedor">
<div id="blanco" class="bordeizquierdosuperior">
<img src="Logo.png" class="bordeizquierdosuperior"/>
</div>
<div id="marron" class="bordederechosuperior">
</div>
<div id="ocre" class="bordeizquierdoinferior">
<nav>
<ul>
<li id="primerelemento"><a href="#" id="enlace" class="colorletra" >Inicio</a></li>
<li><a href="#" onClick="javascript: window.alert('Verifique que la impresora esté activada.');" >Verificar conexion</a></li>
<li><a href="#" onClick="javascript: permiso()">Ejecutar componente</a></li>
<li><a href="#" onClick="javascript: calcular()">Realizar calculo</a></li>
</ul>
</nav>
</div>
<div id="crema" class="bordederechoinferior">
<p>
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per. Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei. Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex. Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti.
Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit. Ea mei nullam facete, omnis oratio offendit ius cu.
</p>
</div>
</div>
</body>
</html>