Siempre he programado en WindowsForms, nunca se me ha dado Web, pero he tomado un proyecto y quiero sacarlo.
Estoy programando en C# con ASPX, y usando Bootstrap, y se me vino la duda, que deberia ir en HTML y que deberia ir en los CSS.
Actualmente ya tengo maquetada la idea, pero quizas tengo todo revuelvo, a su experiencia que pondrian ustedes en HTML y que en CSS, yo por ejemplo tengo esto.
Código HTML:
<head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Sistema Administrativo Tiger Combat - Ingreso</title> <link type="text/css" rel="stylesheet" href="/Css/estilo.css"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" /> <style> .mySlides {display:none;} </style> </head> <body> <form id="form1" runat="server"> <section class="encabezado"> <div class="container"> <div class="container-fluid"> <div class="row"> <img class="center-block" style="max-width:260px; margin-top: -7px;" src="../Imagenes/logo.png"/> </div> </div> </div> </section> <section id="seccion-login"> <script> //Array of images which you want to show: Use path you want. var images=new Array('Imagenes/01.jpg','Imagenes/02.jpg','Imagenes/03.jpg','Imagenes/04.jpg'); var nextimage=0; doSlideshow(); function doSlideshow(){ if(nextimage>=images.length){nextimage=0;} $('#seccion-login') .css('background', 'url("' + images[nextimage++] + '")') .fadeIn(500,function(){ setTimeout(doSlideshow,4000); }); } </script> <div class="container"> <div class="row vdivide" style="min-height:800px;"> <div style="padding-top:240px;" class="col-sm-6 text-center"> <h1 id="titulo-Principal">SISTEMA ADMINISTRATIVO DE FILIALES</h1> <h2 class="texto-Principal">___________________________________________________________</h2> <h3 class="texto-Principal">Es una plataforma de trabajo diseñada para todas las personas que formamos parte de Tiger Combat System ®</h3> </div> <div style="padding-top:180px;" class="col-sm-6 text-center"> <div class="panel panel-default"> <div class="panel-heading"></div> <div class="panel-body"> <div class="col-xs-offset-1 col-xs-10"> <ASP:TextBox id="txtUsuario" CssClass="form-control" runat="server" placeholder="Usuario" Width="215px" BorderWidth="2px" AutoCompleteType="None"></ASP:TextBox> <ASP:RequiredFieldValidator CssClass="Validador-Field" id="chkUser" runat="server" errormessage="Usuario es un campo requerido" controltovalidate="txtUsuario" display="Dynamic"></ASP:RequiredFieldValidator> <br /> </div> <div class="col-xs-offset-1 col-xs-10"> <ASP:TextBox id="txtPassword" CssClass="form-control" runat="server" TextMode="Password" placeholder="Password" Width="215px" BorderWidth="2px"></ASP:TextBox> <ASP:RequiredFieldValidator CssClass="Validador-Field" id="chkPassword" runat="server" errormessage="Password es un campo requerido" controltovalidate="txtPassword" display="Dynamic"></ASP:RequiredFieldValidator> <ASP:Label runat="server" id="LabelError" Visible="false" Text="Datos incorrectos"></ASP:Label> <br /> </div> <div class="col-xs-offset-1 col-xs-10"> <ASP:Button style="border-color:#3CABAA" CssClass="form-control" id="btnLogin" runat="server" text="Ingresar al sistema" width="215px" BorderWidth="2px" OnClick="btnLogin_Click"></ASP:Button> </div> </div> </div> </div> </div> </div> </section> <div id="footer"> <div class="container"> <br /> <p class="text-muted credit" style="text-align:center">Tiger Combat System ®</p> <br /> </div> </div> </form> </body>
Código:
Como lo ven, tengo la nocian de que deberia ir en cada rama?#seccion-login {
background-size: cover;
}
#titulo-Principal {
font-family: Arial, Geneva, sans-serif;
font-size: 40px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
}
.texto-Principal {
font-family: Arial, Geneva, sans-serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
text-align: left;
}
.panel-default {
height: 350px;
width: 315px;
}
.panel-heading {
background: url("../Imagenes/tiger.png");
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 170px;
}
.Validador-Field {
font-family: Arial, Geneva, sans-serif;
color: #FF0000;
}
#btnLogin {
font-family: Arial, Geneva, sans-serif;
color: #209D8B;
}
#txtEmail:focus {
border-color: #209D8B;
}
#txtPassword:focus {
border-color: #209D8B;
}
#btnLogin:hover {
color: #FFFFFF;
background: #209D8B;
}
#LabelError {
font-family: Arial, Geneva, sans-serif;
color: #FF0000;
}
Saludos.
