Hola
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> Y en CSS de esa pagina
Código:
#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;
}
Como lo ven, tengo la nocian de que deberia ir en cada rama?
Saludos.
