-
Cómo hacer una Cartera CSS
-
En el diseño y la construcción de una página de la cartera, su trabajo debe hablar por sí mismo. Se concentran en un estilo limpio y un formato fácil de navegar que no distraiga al visitante. Todo lo que necesita para crear una cartera es un poco de HTML básico y CSS, junto con capturas de pantalla de su trabajo. Este proyecto contribuye a las buenas prácticas de CSS, ya que su diseño simple aún necesita unos trucos de diseño de pareja. Usted aprenderá a centrar el contenido de la página y crear un formato de cuadrícula para mostrar imágenes con la información.
Instrucciones
Crear archivos y HTML
1 Abrir Bloc de notas o un editor de código y comenzar con un nuevo archivo, en blanco. Copia y pega el siguiente código en su archivo:
<! DOCTYPE html>
<Html>
<Head><title></title></ Head>
<Body>
<Body>
</ Html>Escriba el nombre de su cartera entre los "<title>" etiquetas. Guarde el archivo con una extensión de HTML.
2 Añadir esta línea de código por debajo de los "<title>" etiquetas:
<Link rel = "stylesheet" href = "portfolio.css">
Desde su HTML utiliza el tipo de documento HTML 5, no es necesario añadir un atributo "tipo" de esta etiqueta. Crear un archivo en blanco y guardarlo como "portfolio.css".
3 Crear un DIV y darle un nombre de identificación de la "envoltura". Dentro de ese DIV, añadir un título y un poco de texto a su cartera. Este contenido se va dentro de los "<body>" etiquetas:
<Div id = "wrap">
<H1> Mi cartera </ h1>
<P> Algunas informaciones sobre mí mismo y el trabajo que hago. </ P>
</ Div>4 Coloque un conjunto de "<div>" etiquetas por debajo de la propaganda sobre su cartera y darle un nombre de identificación de "cartera". Este DIV cartera contendrá una galería de imágenes de su trabajo.
<Div id = "cartera">
</ Div>5 Creación de la primera entrada de la cartera. Dado que esta es una cartera, se necesita una versión en miniatura del trabajo que se presenta así como un título y una frase o dos acerca de lo que hizo. todo esto va a ir dentro de una única, flotaba DIV:
<Div class = "elemento">
<Img src = "ruta / a / thumbnail1.png" alt = "Mi Primer Proyecto">
<H3> Mi Primer Proyecto </ h3>
<P> Un proyecto de diseño que hice para la universidad. Esto era para una organización benéfica local. </ P>
</ Div>Copiar y pegar el ejemplo anterior en el código HTML, dentro del DIV cartera. Cambiar la ruta del archivo y el texto para que coincida con su primer proyecto. Use esto como una plantilla para añadir más elementos a la página, colocando cada nueva DIV después de la última.
Estilo de la cartera con CSS
6 Vuelve a tu archivo CSS y el estilo de fondo y las fuentes de la cartera:
cuerpo {
background: url #eeeeee ( 'ruta / a / background.png');
color: # 555555;
font-family: Georgia, serif;
font-size: 13px;
}En la propiedad "de fondo", el primer valor que se muestra es un color hexadecimal, seguido por la ruta URL para una imagen de fondo. Sacar la ruta URL, si no desea utilizar una imagen. El "color" de propiedad colores del texto.
7 Estilo de texto para los encabezados:
h1, h2 {
font-family: Arial, sans-serif;
color: # 333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}Dado que los títulos de este ejemplo, ambos utilizan el mismo tipo de letra Arial y gris oscuro, se pueden encadenar "h1" y "h2" junto con una coma que separa.
8 Establecer un ancho para el DIV envoltura y hacer que se centre en la página:
envuelva {
Ancho: 960;
margin-left: auto;
margin-right: auto;
}Este código, junto con la envoltura de DIV, se centrará todos de los contenidos de la página. Una anchura de 960 píxeles es común para los sitios web y se utiliza en muchos sistemas de rejilla CSS, en particular 960 Grid System.
9 Dar la cartera de una anchura y centrarlo así; llegará a estar centrado dentro del DIV envoltura:
portafolio {
Anchura: 900px;
margin-left: auto;
margin-right: auto;
}10 Estilo y flotar cada entrada de la cartera:
.ít {
flotador izquierdo;
margin-right: 10px;
margin-bottom: 20px;
}img {portafolio
frontera: #bbbbbb sólido 1px;
padding: 5px;
fondo: #ffffff;
}Cuando usted flota DIVs dentro de un DIV que contiene, van a llenar todo el espacio horizontal y luego continuar en la siguiente fila de abajo. Esto crea un efecto de mosaico. Dé a cada elemento de un derecho y el margen inferior para proporcionar el espaciamiento entre ellos.
Consejos y advertencias
- Esta cartera se verá mejor si se hace cada Thumbnail El mismo tamaño.
