Paso 2: Los códigos de CSS de la barra de navegación de CSS3
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
menú de .main {}
auto de margen: 50px;
width: 910px;
}
/ * La parte superior Logo * /
{} de la placa
texto-alinee: Centro;
width: 908px;
altura: 48px;
altura de línea: 48px;
border: 1px solid rgb(25,25,25);
frontera-radio: 4px 4px 0 0;
posición: pariente;
Background:-WebKit-linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
Background:-moz-linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
Background:linear-gradient(Top,RGB(49,50,52),RGB(12,13,14));
caja-sombra: inserción 0 1px 0 rgb (62,63,65), recuadro 1px 0 0 rgba(75,75,80,0.4);
}
Placa grupo de .btn {posición: absolute; top: 0; izquierda: 8px;}
placa .search-campo {posición: absolute; top: 0; derecha: 20px;}
/ * El signo de y parte de registro * /
placa botón {}
altura: 27px;
relleno: 0 15px;
línea-altura: 25px;
border: 1px solid rgb(15,15,15);
50%,rgb(15,16,17)) de background:-WebKit-linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
50%,rgb(15,16,17)) de background:-moz-linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
50%,rgb(15,16,17)) de background:linear-gradient(Top,RGB(67,68,68),RGB(41,42,43);
color:RGB(200,200,200);
Box-shadow: inserción 0 1px 0 rgb (77,77,78), 1px 0 rgb(42,43,44) 0;
fuente-peso: 500;
texto-sombra: 1px 1px 0 rgb(15,15,16);
-webkit-transition: color 300ms facilidad;
-moz-transición: color 300ms facilidad;
transición: color 300ms facilidad;
}
placa en .sign {frontera-radio: 14px 0 0 14px; border-derecha: 0 none;}
placa .register {frontera-radio: 0 14px 14px 0;}
/ * La insignia * /
placa .logo {}
color:RGB(255,255,255);
fuente-tamaño: 25px;
font-weight: más audaces;
texto-sombra: 0-1px 0 rgb(111,111,111), 0 - 2px 0 rgb(32,33,34);
}
/ * El cuadro de búsqueda * /
placa entrada {en}
anchura: 140px;
altura: 26px;
frontera: ninguno;
relleno: 0 0 0 30px;
frontera-radio: 13px;
color:RGB(255,255,255);
background-color:RGB(0,0,0);
Box-shadow: 0 1px 0 rgb(43,44,45);
}
placa .search-icono {}
posición: absoluto;
Display: block;
izquierda: 10px;
Top: 0;
fuente-familia: icono-búsqueda;
fuente-tamaño: 13px;
color:RGB(100,100,100);
cursor: pointer;
-webkit-transition: color 300ms facilidad;
-moz-transición: color 300ms facilidad;
transición: color 300ms facilidad;
}
/ * El efecto Hover * /
placa botón: hover {color:rgb(255,255,255);}
placa botón: active {background:-*-linear-gradient(top,rgb(15,16,17),rgb(41,42,43) 50%,rgb(67,68,68))};
placa .search-icono: hover {color:rgb(255,255,255);}
/ * La parte de la barra de navegación de CSS3 * /
NAV {fondo-color: rgb (175,175,175); border-radius: 0 4px 0 4px;}
NAV > li {flotante: izquierda;}
/ * Los elementos y botones de la barra de navegación * /
NAV > li > a {}
Display: block;
color:RGB(50,50,50);
altura: 38px;
fuente-tamaño: 13px;
font-weight: bold;
línea-altura: 38px;
relleno: 0 20px;
border: 1px solid;
margen-derecho: 1px;
border-color:RGB(254,254,254) rgb(227,227,227) rgb(210,210,210);
Background:-WebKit-linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
Background:-moz-linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
Background:linear-gradient(Top,RGB(248,248,248),RGB(184,184,184));
sombra: 0 1px 0 rgb(229,229,229);
}
NAV > li:first-niño un {frontera-radio: 0 0 0 4px;}
NAV > li:last-niño {posición: relative;}
NAV > li:last-niño > un {}
frontera-radio: 0 4px 0 0;
relleno: 0 32px 0 22px;
margen: 0;
}
/ * El marcador de triángulo del menú Drop-down * /
NAV > li:last-niño > un: antes de {}
contenido:'';
posición: absoluto;
derecha: 15px;
parte superior: 18px;
frontera: 5px solid transparentes;
border-color:RGB(50,50,50) transparente transparente transparente;
}
/ * El efecto activo de los artículos/botones de navegación y Hover * /
NAV > li:hover > un {}
border-color:RGB(255,255,255) rgb(240,240,240) rgb(221,221,221);
Background:-*-linear-gradient(Top,RGB(255,255,255),RGB(203,203,203));
}
NAV > li:not(:last-child) > a: active {background:-*-linear-gradient(top,rgb(203,203,203),rgb(255,255,255));}
NAV > li:hover ul {display: block;}
/ * El Drop-down Menu * /
más deporte {}
posición: absoluto;
ancho: 478px;
parte superior: 100%;
derecha: 0;
margen-parte superior: 13px;
relleno: 46px 0 61px 0;
border: 1px solid;
border-color:RGB(250,250,250) rgb(226,226,226) rgb(234,234,234);
frontera-radio: 4px;
Background:-WebKit-linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
Background:-moz-linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
Background:linear-gradient(Top,RGB(227,227,227),RGB(193,193,193));
color:RGB(0,0,0);
Mostrar: ninguno;
}
/ * Rellena el espacio entre la barra de navegación y menú desplegable * /
más deporte: antes de {}
contenido:'';
posición: absoluto;
anchura: 100%;
altura: 14px;
fondo: 100%;
izquierda: 0;
}
/ * Crear el marcador triángulo * /
más deporte: después de {}
contenido:'';
posición: absoluto;
fondo: 100%;
derecha: 40px;
anchura: 0;
altura: 0;
frontera: 5px solid transparentes;
color del borde: rgb(227,227,227) transparente transparente transparente;
}
/ * Uso de display: inline-block para realizar diseños de varias columnas * /
más deporte li {}
Display: inline-block;
anchura: 153px;
vertical-align: top;
}
/ * estilo de etiqueta de elemento de cada columna * /
más deporte li a {}
Display: block;
margen-izquierdo: 13px;
color:RGB(0,0,0);
fuente-tamaño: 13px;
font-weight: bold;
padding: 2px 5px;
sombra: 0 1px 0 rgb(240,240,240);
frontera-radio: 7px;
}
/ * encabezado * /
más deporte .header {}
Display: block;
posición: absoluto;
Top: 0;
izquierda: 0;
margen-izquierdo: 18px;
línea-altura: 48px;
color:RGB(33,33,33);
sombra: 0 1px 0 rgb(246,246,246);
}
/ * pie de página * /
más deporte .footer {}
Display: block;
posición: absoluto;
parte inferior: 0;
izquierda: 0;
anchura: 100%;
color:RGB(145,145,145);
texto-sombra: 0 1px 0 rgb(242,242,242);
línea-altura: 49px;
background-color:RGB(228,228,228);
frontera-radio: 0 0 3px 3px;
texto-guión: 20px;
}
/ * El botón pie de página * /
más deporte .footer {un}
posición: absoluto;
derecha: 10px;
Top: 50%;
margen superior:-15px;
color:RGB(50,50,50);
texto-sombra: 0 1px 0 rgb(247,247,247);
altura: 28px;
línea-altura: 28px;
relleno: 0 12px;
texto-guión: 0;
border: 1px solid rgb(200,200,200);
frontera-radio: 4px;
Background:-WebKit-linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Background:-moz-linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Background:linear-gradient(Top,RGB(252,252,252),RGB(234,234,234));
Box-shadow: inserción 0 1px 0 rgb (255,255,255), rgb(210,210,210) de 3px de 1px 0;
-webkit-transition: todos de 300ms de facilidad;
-moz-transición: todos de 300ms de facilidad;
transición: todos de 300ms de facilidad;
}
/ * La effectof de suspender los elementos * /
más deporte li a: hover {}
color:RGB(0,31,99);
Background:RGB(150,150,150);
}
/ * La libración y el efecto activo de los botones * /
más deporte .footer un: hover {color:rgb(0,31,99);}
más deporte .footer a: active {background:-*-linear-gradient(top,rgb(234,234,234),rgb(252,252,252));}
/ * icono * /
{
font-family: 'búsqueda de icono';
Fuente: url('font/icon-search.eot');
Fuente: url('font/icon-search.eot?#iefix') format('embedded-opentype'),
URL('font/Icon-Search.woff') format('woff'),
URL('font/Icon-Search.ttf') format('truetype'),
format('svg') de URL('font/Icon-Search.svg#Icon-search');
font-weight: normal;
estilo de fuente: normal;
}
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
