Algunos simples CSS, HTML, JS notas para todo el mundo para compartir la esperanza de ayuda para usted

## css y html

1. rebanada Exportar formato web imagen
2.tinypng.com (página web de imágenes comprimidas)
3. <img src = "Imagen / imagen .jpg Nombre (dirección de imagen)" alt "descripción de la imagen"> (alt única carga en el cuadro cuando se produce un fallo) (alt conducente a la búsqueda de imágenes)
4.overflow: hidden; (más allá oculto)
5.

<A href = "URL" target = "_ negro">
Inicio
</a>

(Hipervínculos) (_ página negro se abre en una ventana nueva) (escribir la URL completa)
6.a {
text-decoration: none;
}
(quitar el subrayado de hipervínculo)
7.f12 (ver el código fuente de la página)
Un 8.nav_ul {
color: # 333;
}
(color de hipervínculo a negro)
9.nav_ul a: hover {

}
(cuando el ratón para cambiar el color de fondo de hipervínculos al hipervínculo superior)
10.ctrl + '+' para ampliar PS lienzo
11.line-height: altura de la fila; (de modo que la línea central texto vertical)
etiquetas 12.block: etiqueta a nivel de bloque (dominan línea; conjunto anchura y altura)
etiquetas en línea: Etiquetas restringido dentro de las etiquetas de fila (línea coexistencia; ancho establecido y altura)
inline- bloque: la fila de bloques (fila coexistencia; fácilmente conjunto anchura y altura)
de la pantalla: inline-block; (propiedades de cambio de placa cambiar fácilmente la anchura y altura)
= 13.text-alinear a la izquierda: Centro; (centrado horizontalmente contenido)
14. Inglés: Arial, Verdana
chino : Microsoft elegante negro (Microsoft Yahei), Times New Roman (Simsun), negrita, Ping colmillo
font-family: ....; (Inglés frontal fuente, fuentes chinas, los chinos cotizaciones de fuente de lucha)
font-size: 16px; (ajustar el tamaño de la fuente)
(configuración de fuente) fuentes seguras
15.transition (animación de transición) (que cambió que escribió el anterior)
Transición: Todos los 0,5s; (transición tiempo de animación) (sólo para el cambio en el valor: por ejemplo, de ancho superior)
Si no se cambia el valor, es posible utilizar la opacidad = 0; opacidad = 1; dos fueron escritos en la etiqueta para lograr un cambio en el valor de
animación añadir a una etiqueta:
(1) primer estilo añadir a la etiqueta en el archivo css (
animación: nombre animación (tomado a la ligera) lineal tiempo de animación (la el movimiento uniforme) cifras (el número de animación ejecuciones, no escribir el valor predeterminado es 1,
si en lugar de utilizar número infinito, ilimitado realizará la animación) alternativa (la etiqueta es que dar marcha atrás después de ejecutar la animación);
)
(2) de nuevo Añadir estilo css:
@keyframes nombre de la animación (el mismo que (1) el nombre de la animación) {
0% {
ubicación original;
}
20% {
posición de transición;
}
............. .
100% {
terminando posición animación;
}
}
animación-retardo (3).: infinito tiempo (movimiento infinito) alternativo (ida y vuelta); (tag animación escrita archivo CSS correspondiente, representa el tiempo de retardo correspondiente al inicio de la animación)
16 etiquetas .span (hacen una pequeña cantidad de texto Con el estilo especificado)
17. pantalla oculta etiqueta (todavía) después de escondite: ninguno;
A UL-.nav: hover {
el display: none;
}
pantalla etiquetada display: inline / bloque / inline- bloque;

18. Un método de cambiar la etiqueta margen-top: -150px; (desplazado hacia arriba para aplicar una etiqueta 150 píxeles)
margin-bottom: ....; (movimiento hacia abajo)
19. El escalado transformar (modificado)
, siempre que: Write por encima de aquella a la que utiliza el anterior trabajo oculto excede
transformar: escala (1,1); (en la dirección horizontal, la dirección vertical amplificado doble)
(1 puede cambiar el valor a acercar y alejar)
de rotación transformar: (rotateX) (180 grados ); // girar 180 grados sobre el eje x
transformar: (rotateY) (180 grados) ; // girar 180 grados sobre el eje y
transformar: (rotateZ) (180 grados) ; // girar 180 grados alrededor del eje z
para cambiar el origen de rotación
TRANFORM origen: 0 480px; ( x eje, eje y)
perspectiva (cerca de la mucho más pequeña)
perspectiva: 500px;
filtros 20.CSS3 (cambio de color de imagen, búsqueda en Internet)
21. la referencia de estilo común a las referencias anteriores, el contenido
22. Alt + derecha (capa seleccionada rápido)
23. ver al exportar imágenes JPG y PNG, elija pequeña, si tan grande como la elección png
24. oculto más allá del contenido debe overflow: hidden; escrito en la imagen, no escrito en el hipervínculo
25.p etiquetas: indica un párrafo (el texto es en una línea separada, en trozos)
26. Lugar: posición (Para ser controlado por la izquierda y la posición superior de la etiqueta)
posición: static; (posicionamiento estática) predeterminado
Absoluto; (posicionamiento absoluto) marcador de posición no puede correr en el navegador (para cubrir las otras fichas)
fijo; (situado de manera fija, en términos de los corresponde ventana del navegador para una posición fija en el navegador por la izquierda, arriba )
relativo; (posicionamiento relativo) del posicionamiento etiqueta tubo absoluta, la etiqueta dom
z-index: valor; (todo lengüeta de posicionamiento que tiene un valor de índice z, el valor predeterminado es 0. la etiqueta más grande, más pequeño puede cubrir, por posición estática no válido)
de manera que un contacto cercano con la página exterior etiqueta (a la derecha se puede cambiar cambiando la posición de la etiqueta y el valor superior): z-index: valor;
derecha: 50%;
la parte superior: 50%;
margin-right :-( página tag anchura + anchura);

. 27 "> símbolo" enlazador única etiqueta
28. Los transparentes y translúcidos (cambiar la transparencia)
Opacidad: ~ 0. 1; (mejor 0.8)
de filtro: alfa (opacidad = 0 ~ 100); // navegadores antiguos (IE8 etc.)
29. color transparente
RGB (255, 0 0 ~ ~ ~ 255 255, 0);
RGBA (0 ~ 255, 0 255, 0 ~ ~ ~ 255, 0. 1);
de la imagen de fondo png directamente puede ser utilizado cortado puede lograr
30.ul y Li son elementos de bloque (sin necesidad de escribir una anchura lateral pueden ser cubiertos)
página 31. icono de estilo
(1) etiqueta img: el contenido de la imagen sólo uso (no se recomienda)
(2) de fondo CSS añadir imágenes decorativas, incluyendo iconos (i etiquetas: cursiva texto en cursiva)
font-style: cursiva; (cursiva)
I Etiquetas: icono (que es una etiqueta en línea reservada) (3).
(4) seudo objetos, etiquetas de pseudo: (etiquetas: etiquetas antes: Después de (más a la vanguardia de una etiqueta antes de la etiqueta)
(para añadir una etiqueta para ser visible antes de connet en los que: "";))
etiqueta contenida funcionalmente equivalente
32. la única línea de texto supera Ocultar y puntos suspensivos
indispensable
anchura: etiquetar la anchura restricción;
overflow: hidden;
Blanco Espacio-: nowrap; (fuerza no wRAP)
texto-overflow: e llipsis; (si el texto se desborda, puntos suspensivos aparecido)
etiqueta 33.h1 ( `<h1> Noticias </ h1>`) (tag titulares)
34.border-bottom: 1px Dashed # 333; etiqueta li presenta a continuación que el espesor de un 1 píxel de color negro línea discontinua
35. total etiqueta de la página: una etiqueta en varias etiquetas li div
div etiqueta: text-align = left: Centro;
unas etiquetas: el display: inline-block;
36.Math.floor () (abajo redondeada)
toma Math.ceil () (hasta conjunto)
Math.round () (redondeada)

# Js
clase de prioridad es más alta que la etiqueta
1. salida de la consola (console.info ();)
2.x> Y (console.info (X)) :( console.info (Y));? (Salida máxima ) (si x> valor de salida Y de X, de lo contrario el valor de salida de y)
3. abajo redondeado (Math.floor (25,4);) igual a 25
redondeo (Math.ceil (25,4);) igual a 26 es
4 NaN3 (Not a Number)
5. la función de parámetros
objeto parámetro de la función viene con un built-in!
argumentos "parámetro"
argumentos número arguments.length
argumentos [0] para los parámetros específicos
6.clink evento Click
7. Cuatro mantra (JS)
Encuentra una etiqueta
1. Encontrar (evento donde la etiqueta) a sí mismo: onclick por escrito dentro del presente
2 el evento fue un objetos integrados de función: evento evento objeto
evento de destino event.target, donde la etiqueta evento (en el archivo js)
3. encontrar una etiqueta por el anteriormente Identificación del mencionado
el objeto de documento documento, especialmente una página
etiqueta correspondiente en html usando id = "mydiv" controlar hasta
var mydiv = document.getElementById ( "mydiv" ); (JS archivos)
para adquirir, cambiar el contenido de la etiqueta
de adquisición: etiqueta xx.innerHTML de contenido HTML
div onclick = "this.innerHTML = 'que \' llo '" Hola / div (Haga clic hola, hola luego se convierte en hola)
Cambio: xx.innerHTML =' nuevos contenidos ';
\ función:. 1 remove un significado especial: símbolo \ '\'
Añadir un significado especial: cartas

para adquirir, cambiar la propiedad label
adquisición: atributos de etiqueta.
cambio: label = nuevo atributo de la propiedad;
[atributos personalizados] escribir sus propios bienes
var y = xx.getAttribute ( "nombre de la propiedad"); (adquirido su propiedad)
xx.setAttribute ( "nombre de atributo", "valor de la propiedad");
cambiar el estilo de etiqueta (primero debe encontrar la etiqueta) (= FU continuación id.onmouseover)
(1) el atributo de etiqueta .style = "valor de atributo"; (cambio directo) (para pequeños cambios)
xx.style.background = "# F00";
(2) (antes del cambio para cambiar el estilo de clase nombre de la clase)
xx.className + = "el nuevo nombre de la clase";
(archivo CSS debe estar escrito en el estilo del nuevo nombre de la clase)
(nuevos espacios en frente del nombre de la clase esencial)
enfoque más clásico no cambia el estilo original :()
var classZz = / \ b nueva nombre de la clase \ b /; (\ estilo de nombre similar había previamente b no sustituir, \ b el nuevo nombre de la clase \ b no son palabras independientes)
var cN = xx.className;
= CN.replace xx.classNam (classZz, "");
(regular: b palabra \ de principio y al final)
8. Botón etiqueta (tag debe formar en el interior)
etiqueta INPUT: `<input type = "botón "value =" -">` ( etiqueta única; "-" indica un contenido de botón)
(botón en botón pulsador) (Enviar botón para enviar: presentar datos)
cuadro de texto: `<input type = "text "value =" texto del cuadro de texto">`

<Input type = "text" value = "texto en el cuadro de texto" marcador de posición = "mensajes de texto en un cuadro de texto, por ejemplo: Introduzca la contraseña:">

cuadro Contraseña: `<input type = "password valor "=" contraseña">`
9. La elementos de formulario
Formulario: Formulario de etiqueta
1. Aceptar la entrada del usuario [Contenido]: Haga clic en un ratón, teclado, voz ......
datos pondrá en los elementos de forma en
los datos de procesado 2: daemon a procesar

<action = forma "proceso de fondo de dirección">
<la entrada del tipo = valor "el botón" = "-">
</ desde>

10.js para convertir una cadena en un valor numérico
parseInt (cadena) (conversos cadena en un int) (sólo se encuentran entero) (tipo int encuentra en los datos de lectura continua)
de la izquierda de la cadena para empezar a buscar los datos
parseFloat (cadena) (la cadena de datos en el tipo float) (disponible decimal)
Número de la (cadena) (CAST)
si los datos 11. Analizar NaN3
isNaN (NUM) se compara con cierto, como el error de falso
12. el menú secundario :( premisa: primer nivel de menú para hacerlo)
// hace dos etiquetas cubren otras etiquetas
de menú secundario debe haber posicionado absolutamente
un menú debe tener un pariente posicionamiento
var li = nombre Identificación del .getElementsByTagName ( "li") ; (la probabilidad de encontrar un número de variables li, la naturaleza de la matriz)
(se puede evitar un montón de Identificación) nombre Identificación de abajo para encontrar todos los especificada etiqueta
var Li = ID nombre de .children; (para encontrar un menú de todos li)
li: nth-child (1) (en la primera etiqueta li li)
encontrar una etiqueta: qyerySelector función
mytime 13.var = nueva fecha (); ( se puede especificar en () puntos de tiempo: minutos y segundos con la fecha cuando se separa) (Get el momento de la ejecución del código) (hora) (ordenador mes adquirida Menos de un mes: un equipo desde enero 0-11)
(más allá de la víspera del Año Nuevo 11 meses automático)
14. name = setInterval (iniciar el temporizador)
clearInterval (nombre) (aborto de temporizador)
15. Navegación a través de la columna (una escritura de ancho min: ....;)
16.var NUM = Math.random (); (un número generado aleatoriamente 0-1)
17. salto de página impedido haga clic en el hipervínculo

<a href="javascript:void(0)">
</a>

18. contenido un derecho
=-texto Alinear a la izquierda: right;
19. A adquiere el valor de índice
en el ciclo:; el nombre de la matriz [i] Nombre (ellos mismos a) = i // valor de índice almacenado
(. Este nombre) console.info; // obtener el valor de índice
20. el valor numérico adquirir un flotador
parseFloat (a.value)
21. una etiqueta o atributo se determina si hay:
(. nombre nombre identificador de atributo) iF {
}
22.var Student = {};
student.name = "" ;
Student [ "name"] = "";
23. Una función que llama debe ser escrito en paréntesis después del nombre de la función
24. la matriz vacía
nombre de la matriz = [];

## clásico comunicado
estilo común:
* {
margin: 0;
padding: 0;
}
.clears {
clear: both;
altura: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
body {
Font- family: Arial, Verdana, "en Microsoft YaHei", "el Simsun";
}
a {
text-decoration: none;
color: # 000;
}
img {
border: none;
/ imágenes * en el hipervínculo en algunos navegadores antiguos ( es decir) tienen un borde azul * /
}
UL, Li, OL {
list-style: none;
}

 


<Meta name = "keywords" content = "( separados por una coma)" />
<meta name = "la descripción" content = "(una frase completa.)" />

1./* flotado claro * /
.clears {
clear: both;
altura: 0;
line-height: 0;
font-size: 0;
overflow: hidden;
}
2.background: URL (../ Images / nav_bg.png ) REPEAT-X;
/ * hacer que la imagen de fondo por el NAV nav_bg.png lateral confluencia * /
3.línea-height: 82px; / * hacer que el texto centrado verticalmente * /
4./* cambió cuando el ratón en un hipervínculo hipervínculos y color de fondo * /
.nav_ul a: hover {
background: url (../ Images / nav_hover_bg.png) REPEAT-X;
}
5. el
/ * ID = "NUM"; JS lograr la resta * /
/ *
jia.onclick = function () {
var = Número num.innerHTML;
Number = Número El (Número) + 1;.
num.innerHTML = Número;
}
jian.onclick = function () {
var = Número num.innerHTML;
Number = Number (número) - 1;
= Número num.innerHTML;
}
* /
7. La expresión regular:
expresión regular por escrito: var = zz / Reglas /;
el uso regular de las expresiones:
var = ZZ / de He / I; (ignoro cadena regla representa capitalización) (i, entonces no debemos mayúsculas y minúsculas)
var = ZZ / de he / G; (G representa la búsqueda global)
var STR = "Jeje"; (cotizaciones de los contenidos ha de ser detectado)
Alerta (zz.test (str)); (juzgado si las normas cumplen el valor predeterminado es cierto, no se conforma con falso)


var zz = / abc * / i ; (* representativos de al menos 0 c, puede tener hasta un número C infinita)
ZZ var = / ABC + / I; (+ representantes de al menos 1 c, pueden tener hasta un número infinito C)
var ? zz = / abc / i; (? c nombre opcional, si sólo hay un c c)
var = ZZ / ella | xyz / i; (|, siempre y cuando él y el representante de una de las xyz)
ZZ var = / abc {2} / i ; ({2} tienen dos c consecutiva juntos representante)
var = ZZ / ABC {2,} / I; (2 {,} debe ser representativa de al menos dos c sucesiva juntos)
var = ZZ / (abc) {2} / I; ({2} tienen dos Representante juntos abc) consecutivo
var = ZZ / abc {2,4} / I; ({2,4} en conjunto tienen al menos dos representantes c, c puede tener como máximo 4 juntos)
var = ZZ / [ABC] / I ([ABC] deberá ser representativa de al menos un a o a o a b c)
var = ZZ / [^ abc] / i; ([^ abc] representante tener al menos una adición a, b, letras c)
var = ZZ / [AZ] / I; ([AZ] por lo menos uno debe ser un representante de la z letras)
ZZ = var / [^ AZ] / I; ([^ AZ] Representante tiene al menos una adición a una carta de z)
ZZ = var / \ W (en minúsculas) / i; (\ w Representante letras, números, subrayado)
var ZZ = / \ S (mayúsculas) / i; (\ S puede no ser representativa de espacios)
ZZ var = / \ B ...... \ b / ; ( debe ser una sola palabra, ninguna otra especie)

var zz = / ^ abc / i ; (^ abc abc como representante Para comenzar)
var = ZZ / abc $ / I; ($ ABC ABC nombre Para acabar)
8. Un latido del corazón a lograr la animación
.red {
fondo: F00 #;
font-size: 30px;
Animación: 0,5 s ANI Infinito;
}
@keyframes ANI {
0% {
Transformar: Escala (1,1);
}
80% {
Transformar: Escala (1.5, 1.5);
}
100 {%
Transformada: Escala (1,1);
}
}
9. la terminación de la función es
falso retorno; (cualquier valor puede ser devuelto)

 

Supongo que te gusta

Origin www.cnblogs.com/Liang-Tsai/p/12484320.html
Recomendado
Clasificación