[Artículo] Cómo hacer una Cartera CSS

by Robert 09/13/2016

En el diseño y la construcción de una página de la cartera, su trabajo debe hablar por sí mismo. Concéntrese en el estilo limpio y un fácil de navegar formato que no distraiga al visitante. Todo lo que necesitas para crear una cartera es algo de HTML básico y CSS, junto con imágenes de su trabajo. Este proyecto contribuye a la buena práctica CSS porque su diseño simple aún necesita un trucos de diseño de pareja. Usted aprenderá a centrar el contenido de la página y crear un formato de estilo de cuadrícula para mostrar imágenes con la información.

Instrucciones

Crear archivos y HTML

1

Bloc de notas abierto o un editor de código y comenzar con un nuevo archivo, en blanco. Copie y pegue el siguiente código en su archivo:

<! DOCTYPE html>
<Html>
<Head>

&lt;title>&lt;/title>

</ Head>
<Body>
<Body>
</ Html>

Escriba el nombre de su cartera entre los "<title>" etiquetas. Guarde el archivo con extensión 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 doctype HTML5, no es necesario añadir un atributo "tipo" de esta etiqueta. Crear un archivo en blanco y guárdelo 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 texto a su cartera. Este contenido se va dentro de los "<body>" etiquetas:

<Div id = "wrap">
<H1> Mi cartera </ h1>
<P> Parte de la información acerca de mí mismo y el trabajo que hago. </ P>
</ Div>

4

Coloque un conjunto de "<div>" etiquetas debajo de la propaganda sobre su cartera y darle un nombre de ID 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. Como se trata de una cartera, necesita una miniatura de la obra que se presenta así como un título y una frase o dos sobre lo que hiciste. Todo esto va a ir dentro de un solo, flotando DIV:

<Div class = "item">
<Img src = "path / to / 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 obra de caridad local. </ P>
</ Div>

Copie y pegue el ejemplo anterior en el código HTML, dentro del DIV cartera. Cambie la ruta del archivo y el texto para que coincida con su primer proyecto. Use esto como una plantilla para añadir más entradas a la página, colocando cada nueva DIV después de la última.

El estilo de la Cartera Con CSS

6

Vuelve a tu archivo CSS y el estilo de fondo y las fuentes de la cartera:

body {
background: url #eeeeee ('path / to / background.png');
color: # 555555;
font-family: Georgia, serif;
font-size: 13px;
}

En la propiedad "background", el primer valor que se muestra es un color hexadecimal, seguido de la ruta URL a una imagen de fondo. Saque la ruta URL si usted no desea utilizar una imagen. Los "colores" colores de propiedad del texto.

7

Estilo de texto para los títulos:

h1, h2 {
font-family: Arial, sans-serif;
color: # 333333;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 18px;
}

Dado que las partidas de este ejemplo ambos utilizan el mismo tipo de letra Arial gris y oscuro, se pueden encadenar "h1" y "h2", junto con una coma separando.

8

Establezca un ancho para el DIV envoltura y hacer que centrar en la página:

envuelva {

width: 960px;
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. Un ancho de 960 píxeles es común para los sitios web y se utiliza en muchos sistemas de redes CSS, en particular 960 Grid System.

9

Dé la cartera de una anchura y centrarla así; que llegará a ser centrado dentro del DIV envoltura:

cartera {

width: 900px;
margin-left: auto;
margin-right: auto;
}

10

Estilo y flotar cada entrada cartera:

.item {
float: left;
margin-right: 10px;
margin-bottom: 20px;
}

cartera img {

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 margen inferior para proporcionar el espaciamiento entre ellos.

Consejos y advertencias

  • Esta cartera se verá mejor si usted hace cada Thumbnail El mismo tamaño.

Te Podría Interesar...

Cómo hacer llamadas internacionales con una Carta de teléfono

Cómo hacer llamadas internacionales con una Carta de teléfono

Carta es la cuarta mayor empresa de proveedor de cable en los Estados Unidos. Además de televisión por cable, Carta ofrece servicios de telefonía e Internet de alta velocidad. Teléfonos charter son disponibles con numerosas opciones, como correo de v
Cómo hacer una sección de un color diferente en Joomla

Cómo hacer una sección de un color diferente en Joomla

Hay muchas plantillas gratuitas disponibles para el Sistema de Gestión de Contenidos Joomla (CMS). Encontrar uno con exactamente el diseño y esquema de color adecuado para su sitio web no es siempre fácil. Afortunadamente, cuando usted encuentra uno
Cómo utilizar un teléfono celular en una carta de apelación de entradas de coches

Cómo utilizar un teléfono celular en una carta de apelación de entradas de coches

Usted recibirá un billete de coche cuando usted viola las normas y leyes de la carretera. Si usted siente que su billete no se justifica, puede apelar su caso a las autoridades con una carta. Usted puede utilizar su teléfono celular en la carta de ap
Cómo escribir una carta de solicitud de un título de un Derecho de Retención

Cómo escribir una carta de solicitud de un título de un Derecho de Retención

En la mayoría de los estados, un acreedor se le da posesión del título hasta que el embargo está completamente satisfecho. La única manera de que el propietario del vehículo para obtener el título es por satisfacer el préstamo. Esto puede hacer que l
Cómo hacer una trampa casera ratón para Vehículos

Cómo hacer una trampa casera ratón para Vehículos

Hay dos tipos de trampas para ratones que usted puede hacer desde su casa para poner en su vehículo: el tipo que mata o hiere el ratón o el tipo que detiene el ratón para su posterior liberación. Las ratoneras son idénticos a los del tipo que pondría
Cómo escribir una carta a una organización benéfica para una donación de coches

Cómo escribir una carta a una organización benéfica para una donación de coches

Si usted tiene un viejo pero funcional vehículo que desea para el comercio en vez de arreglar, considere donar a una caridad digna que puede revenderlo en una subasta. Usted puede donar su coche, camión, furgoneta, autobús, barco o motocicleta a camb
Cómo transferir una carta de despido a través de AAA

Cómo transferir una carta de despido a través de AAA

Si quieres evitar las largas colas en el DMV y es miembro de la AAA, puede transferir una carta de despido, o que ahora se conoce más comúnmente como un título de automóvil, en la mayoría de las ramas Asociación Nacional de Automovilistas. La transfe
Cómo obtener un préstamo contra una carta de despido de coches

Cómo obtener un préstamo contra una carta de despido de coches

Si usted tiene una carta de despido es probable que su coche se paga y usted tiene un título de automóvil emitida en California. Una vez que su coche se paga se puede obtener un préstamo de un banco, pero que tomará su carta de despido como garantía.
Cómo hacer una bandeja de goteo para aceite de motor

Cómo hacer una bandeja de goteo para aceite de motor

¿Alguna vez han fugas de petróleo de uno de sus coches? ¿Cómo te das cuenta por lo general el problema? La gran mancha de aceite en el garaje o en la entrada, que es como! No se preocupe si usted no puede obtener inmediatamente su coche en el mecánic