elmc2
Usuario (México)
Hola amigos, este es mi primer aporte espero les sea de utilidad, como el titulo lo dise este post se trata de como crear una barra esilo facebook, que se mantenga siempre visibe en la parte de arriba de la pagína y ademas centrada y con transparencia, para los que son principiantes les dejo desde el principio primero en cualquier editor de texto (yo recomiendo Notepad++) creen un archivo llamado estilos.css y otro que digamos llamare barra_flotante.html, bueno, despues de esto pasamos al codigo, el cual lo describo acontinuacion. Codigo HTML <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <title> Vicente Madrid </title> <link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos--> </head> <body> <!--comienza la tabla--> <div class="menu_top"> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> <a href="#">     Opcion 1 </a> </div> <!--termina la tabla--> <!--comienza div para de mi nombre --> <div class="barra"> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> Vicente Madrid elmc2 <br/><br/><br/> </div> <!--termina div para de mi nombre --> </body> </html> Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS a:link{text-decoration:none; color:white; } <!-- estado del link antes de alguna accion--> a:visited{text-decoration:none; color:#BDBDBD;}<!-- estado del link cuando ya le has dado click --> a:hover{text-decoration:none; color:#81BEF7; font-size:100%;}<!-- estado del link cuando el raton pasa sobre el--> a:active{text-decoration:none; color:white; font-size:100%}<!-- estado del link en el momento del click--> .menu_top{position: fixed; font-family:arial; background-color:#134578; width: 55%; height: 5%; font-size: 80%; text-align:center;z-index: 10000;opacity:0.90;font-weight:bold;margin-left: -27.5%;top: 1%; left: 50%;} <!-- position:fixed es lo que hace este vicible en todo momento, font-family:arial#la#letra#sera#arial, background-color:#134578 el color de fondo sera el idicado, width: 55% height: 5% ancho y alto indicado en % es mejor en porcentaje qu en PX, font-size: 80% tamaño de la fuetne en %, text-align:center centrado del trexto, z-index: 10000 hace que este ensima de los demas elementos;opacity:0.90 hace la tranasparencia, font-weight:bold tipo de letra negrita--> <!-- Esta es la parte del centrado left: 50%; primero lo recoremos a la mitad desde la izquierda, esto hara que la esquina superior izquierda quede al centro horizontal. margin-left: -27.5%; como la esquina superior izquierda quedo en el centro horizontal. temos que correrla a la izquierda un poco esto sera recorrer la a la izquierda la mitad de el total de lo que mida la barra esto es 27.5% ya que la barra mide width: 55% pero como sera secorrido hacia atras por decirlo asi tendra que ser en negativo margin-left: -27.5% top: 1%; la distancia de arriba hacia abajo --> .barra{position: absolute;left: 50%;top: 10%;width: 10%;height: 125%;margin-top: 0%;margin-left: -5%; margin-bottom: -5%; background-color:#848484 } <!--Este es lo de la barra con mi nombre solo tiene largo alto y color de fondo--> .info_pie{position: fixed; bottom:0%; left: 50%;font-family:arial; width: 65%; margin-left: -32.5%; height: 5%;font-size: 70%;text-align:center } <!-- esta es la da informacionde abajo para que aparesca siempre abajo se utiliza position: fixed; bottom:0% --> Espero les sirva, comenten y le den like
Hola amigos, este es mi segundo aporte espero les sea de utilidad, como el titulo lo dise este post se trata de como crear unaformulario de registro esilo facebook, que tenga los valores por defecto y que se borren al comenzar a escribir y si borras lo escrito aparescan de nuevo, para los que son principiantes les dejo desde el principio primero en cualquier editor de texto (yo recomiendo Notepad++) creen un archivo llamado estilos.css y otro que digamos llamare formulario_face.html, bueno, despues de esto pasamos al codigo, el cual lo describo acontinuacion. en este post solo vere lo de html y lo de estilos ya subire otro con php para subir la informacion a la base de datos con MySQL <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="UTF-8"> <title> Vicente Madrid </title> <link rel="stylesheet" href="estilos.css" type="text/css" media="all"> <!--aEsta linea vincula el archivo HTML con la hoja de estilos, deven de estar en la misma carpeta ambos--> </head> <body> <div class="menu_top"> <p>                 XXXXXXX </p> </div> <p class="reg"> Regístrate </p> <p class="gratis"> Es gratis y lo será siempre. </p> <p class="fecha"> Fecha de nacimiento </p> <form action="" method="post" > <input class="nombre" type="text" name="nombre" placeholder="  Nombre" required> <input class="apellidos" type="text" name="apellidos" placeholder="  Apellidos" required> <input class="correo" type="text" name="correo" placeholder="  Tu correo electrónico" required> <input class="conf_correo" type="text" name="conf_correo" placeholder="  Vuelve a escribir tu correo" required> <input class="pass" type="password" name="contraseña" placeholder="  Contraseña" required> <input class="registrar" type="submit" name="enviar" value="Regístrate" > <select name="dia" id="dia" class="dia"></select> <select name="mes" id="mes" class="mes"></select> <select name="año" id="año" class="año"></select> <div class="hombre"> <input type="radio" name="hombre" value="020" > Hombre </div> <div class="mujer"> <input type="radio" name="mujer" value="020" > Mujer </div> <div class="acepto"> Al hacer clic en Unirme, aceptas las <a href="#">Condiciones</a> y que has leído la <a href="#">Política de uso de datos</a>, incluido el <a href="#">Uso de cookies</a>. </div> </form> <a href="#" class="porque"> ¿Por qué tengo que proporcionar mi fecha de nacimiento? </a> </body> </html> Hasta aqui todo facil y sin mucho chiste...Vamos ahora con el codigo de Estilos CSS .menu_top{position: absolute; font-family:arial; background-color:#134578; width: 100%; height: 13.7%; font-size: 250%; text-align:left;z-index: 10000;font-weight:bold;margin-left: -50%;top: 0%; left: 50%; color:white;} .reg{position: absolute;left: 57%;top: 18%;width: 14%;height: 6%;margin-top: 0%; font-family:arial; font-size: 220%; font-weight:bold; } .gratis{position: absolute;left: 57%;top: 27%;width: 20%;height: 6%;margin-top: 0%; font-family:Batang; font-size: 108%; } .fecha{position: absolute;left: 57%;top: 70%;width: 20%;height: 6%;margin-top: 0%; font-family:Batang; font-size: 100%; font-weight:bold; } .porque{position: absolute;left: 70%;top: 73%;width: 12%;height: 6%;margin-top: 0%; font-family:Batang; font-size: 80%;} .dia{position: absolute;left: 57%;top: 75%;width: 4%;height: 5%; color:white ; border: 1px solid #848484} .mes{position: absolute;left: 61%;top: 75%;width: 4%;height: 5%; color:white ; border: 1px solid #848484} .año{position: absolute;left: 65%;top: 75%;width: 4%;height: 5%; color:white ; border: 1px solid #848484} .hombre{position: absolute;left: 63%;top: 82%;width: 6%;height: 5%; color:black;font-weight:bold} .mujer{position: absolute;left: 57%;top: 82%;width: 6%;height: 5%; color:black ;font-weight:bold } .acepto{position: absolute;left: 57%;top: 87%;width: 26%;height: 6%;margin-top: 0%; font-family:Batang; font-size: 66%;} .registrar{position: absolute;left: 57%;top: 94%;width: 17%;height: 7.5%;margin-top: 0%; font-family:arial; font-size: 130%; font-weight:bold; background-color:#088A29; color:white ;border-radius: 7px; border: 1px solid #088A29}