HTML / CSS de interfaz de usuario (15)

HTML / CSS de interfaz de usuario (15)

Transición cuando no utilizar autoeste valor.

display: noneNo es fácil usar la transición inmediatamente después, porque se tratará como si no hubiera un estado inicial y pasará directamente al estado final.

El colapso del borde solo existe en elementos de bloque. Cuando el borde está colapsado, el elemento también se puede convertir en elementos de bloque en línea para resolver el problema.

Animación

La transición consiste en cambiar el valor de un atributo del valor establecido en una regla al valor establecido en otra regla cuando cambia el estado. Este cambio se realiza durante un período de tiempo, no un cambio instantáneo.

La transición debe activarse (por ejemplo, después de que suba el cursor) para cambiar, pero la animación no la necesita.

La similitud entre las animaciones CSS y las transiciones es que ambas cambian durante un período de tiempo, la diferencia es que las animaciones tienen un mayor control sobre la forma en que cambian.

Cómo repetir la animación y controlar más profundamente todo el proceso de animación.

Pasos de definición:

1. Definir fotogramas clave
2. Usa animación en elementos.
3. Defina la duración de toda la animación.

Implementación simple

• Definir fotogramas clave

Si desea agregar efectos de animación a los elementos, debe tener una regla y la regla debe tener un nombre. Con estas reglas, puede usar el nombre para reutilizar la animación.

@keyframes 规则名{
    
}

Toda la regla debe tener uno o más bloques de fotogramas clave (es decir, el estado de uno por uno en la regla) y el efecto de una animación compuesta por varios bloques de fotogramas clave.

@keyframes myTest{
    0%{
        property1:value1;
    }
    100%{
        property1:value2;
    }
}

• 0% Significa cuál es el valor esperado del atributo de un elemento al comienzo de la animación.
• 100% significa que se espera el valor de atributo de un elemento al final de la animación.
• 75%, qué cambiar al 75%.

• Usa animación en elementos

  animation-name:value

  El valor de valor es el nombre de la regla definida previamente.

• Establecer la duración de la animación

  Mientras se aplique la animación al elemento, no es suficiente para que aparezca la animación, si no hay duración, la animación se puede reproducir pero termina en un instante. Por lo tanto, debe durar un cierto período de tiempo.

  animation-duration:value

  El tiempo es el mismo que s o ms

  • Si no se especifica 0% o 100%, el navegador creará automáticamente 0% y 100% utilizando el valor original del atributo que se va a animar.
  • Si desea especificar 0% y 100%, también puede utilizar las palabras clave desde y hasta. desde significa 0% y hasta significa 100%.
  • Los porcentajes de fotogramas clave no tienen que estar ordenados en orden ascendente.
  • Si las propiedades enumeradas en el fotograma clave de la animación no admiten la animación, se ignorarán.

  Configurar varias animaciones

  formato:animation-name:value

  El valor del valor 规则1,规则2....puede utilizar varios nombres de reglas.

  Si se utilizan varios nombres de reglas, puede establecer la duración de cada animación por separado, utilizando comas para separar los valores.

  Cuando se utilizan varios nombres de reglas, si el nombre de la regla en animation-name no existe, se ejecutarán otras, pero se ignorará la animación que no existe.

  Reproducción retrasada

  animation-delay, De forma predeterminada, la animación adjunta al elemento se inicia inmediatamente sin demora. Puede utilizarla para establecer la demora.

  La unidad también es so ms

  Número de iteraciones de la animación

  El valor de tiempo predeterminado se reproduce una vez.

  formato:animation-iteration-count

  • 1, el valor predeterminado.
  • Puede escribir cualquier número
  • infinito, infinito.

  Establecer la dirección de reproducción de la animación

  animation-direction

  • normal, el valor predeterminado, cada iteración de la animación es de 0% a 100%.
  • invertir, reproducir en orden inverso. Del 100% al 0%
  • Alternativamente, la animación se reproduce hacia adelante en momentos impares 1 \ 3 \ 5 y hacia atrás en momentos pares 2 \ 4 \ 6.
  • Alterna-reversa, la animación se reproduce al revés a 1 \ 3 \ 5 en momentos impares y hacia adelante a 2 \ 4 \ 6 en momentos pares.

  función de tiempo de animación, cambia el tiempo interno

  La secuencia de cambio y la transición es la misma.

  • facilidad, lento- "rápido-" lento.
  • velocidad lineal y uniforme.
  • facilidad de entrada, lento-> rápido

  Nota: La definición del atributo de función de temporización de animación es el ritmo de la animación CSS ejecutada en cada fotograma clave.

Animación de fotogramas clave

La función de temporización de animación puede utilizar pasos (número de pasos).

El número de pasos debe ser un número entero positivo, dividiendo la duración de la animación en segmentos correspondientes al número de pasos.

Cuando se utilizan pasos, los atributos no son transitorios sino que alcanzan directamente un cierto estado.

Introducción a la capacidad de respuesta

El diseño y la codificación receptivos son una forma. El sitio web se puede navegar y utilizar fácilmente en cualquier tipo de dispositivo y pantalla de cualquier tamaño.

El desarrollo del diseño web

• Diseño de ancho fijo El
  estilo del sitio web está diseñado para tener un ancho fijo, de modo que se adapte a los tamaños de escritorio y pantallas de notas más comunes. 2000年El ancho de la pantalla diseñada 800像素en 2005年este momento es , y el ancho de la pantalla diseñada en este momento es 1024像素ancho. Incluso con 800y 1024pixel ancho de la pantalla, pero hay también de pantalla más grande. En este momento, el estilo de diseño de la página web es dejar espacios en blanco adicionales en ambos lados para rellenar.

• Navegación web móvil

  20世纪90年代中期( 1990~1999), el acceso de teléfonos móviles a Internet no tiene la capacidad de mostrar el sitio web real, solo datos de texto explícitos (utilizando el formato HTML más básico para mostrar pronósticos del tiempo, informes de acciones, puntajes de competencia).

  2005年En los dispositivos de teléfonos inteligentes más avanzados, los navegadores móviles pueden utilizar explícitamente las tecnologías CSS2 y JavaScript "真正网页".

  07Lanzado en el año iphone(primera generación Iphone), puede aprovechar todas las web技术páginas web explícitas en ese momento . Pero los sitios web en ese momento eran todos 960像素más amplios o más amplios, pero la pantalla del iPhone era solo 320像素más ancha. La solución de Apple es reducir automáticamente las páginas web para que se ajusten al área de visualización de la pantalla. Luego permita que el usuario haga zoom en cualquier área de la página haciendo doble clic o pellizcando gestos, pero solo una pequeña parte de la página se puede navegar a la vez, lo que no puede producir una mejor experiencia de usuario.

  Los iphonediseñadores todavía están acostumbrados a crear páginas web de ancho fijo y hacer una iphoneversión móvil separada del sitio web (ancho de página fijo, adaptado a una pantalla de 320 píxeles de ancho). Si el usuario está utilizando un teléfono móvil, normalmente será redirigido automáticamente al sitio web para móviles (los sitios web para móviles suelen utilizar msubdominios, como sitios web normales www.baidu.comy sitios web para móviles m.badidu.com).

  Con el fin de expandir mejor el mercado, muchos fabricantes de teléfonos móviles han lanzado los correspondientes teléfonos inteligentes para hacer frente a los de Apple Iphone. Pero estos nuevos teléfonos inteligentes no tienen el mismo tamaño. Algunos son 320像素más anchos y otros 320像素más estrechos, por lo que 320像素el ancho del sitio móvil no se ajusta bien a esas pantallas.

  En 2010, Apple anunció iPadque la versión móvil del sitio web era demasiado pequeña para hacer un uso completo del iPadespacio de pantalla más grande, y el sitio web de escritorio de ancho fijo iPadparecía demasiado grande para verlo en modo vertical .

  En esencia, la pregunta anterior es: sin crear varios sitios separados, cómo hacer que un sitio web se muestre en una sola columna en una pantalla estrecha y se muestre en varias columnas en una pantalla grande. Cómo solicitar al navegador que cambie el diseño de la página web según las características del dispositivo que navega por el sitio web. Es por eso que hay un diseño receptivo.

Proceso de diseño receptivo

• Piense en los objetivos del sitio web

  Un sitio web es una herramienta que se utiliza para resolver problemas en la realidad, debe quedar claro desde el principio cuál es el objetivo del sitio web o del proyecto, pero este objetivo se obtiene del cliente o del director del proyecto.

  En el proceso de creación de un sitio web, se deben tomar muchas decisiones creativas, desde el contenido que se incluirá en el sitio web, hasta la ubicación de estos contenidos y la ruta para que los usuarios ingresen al sitio web. Si se aclara el objetivo del sitio web, se tomarán mejores decisiones durante el proceso de diseño.

• El contenido del sitio web

  El usuario visita el sitio web por el contenido, no por la página o la tecnología de desarrollo utilizada. No le importa si el sitio web responde o el ancho de la pantalla, solo le importa si el dispositivo que usa puede obtener fácilmente contenido relevante.

  Entonces, para un sitio web receptivo, lo primero que debe considerar es el contenido para garantizar que el contenido tenga un buen efecto de visualización en la pantalla pequeña (es decir, coloque el contenido en la pantalla pequeña primero, porque el contenido existente en el ancho fijo sitio web, será difícil comprimirlo en una pantalla más pequeña).

  El llamado contenido incluye no solo texto, sino también otras formas de información, como imágenes, videos y audio. Lo que debe pensar al considerar el contenido es lo que logra la página web y lo que quiere que haga.

  Dos reglas de planificación de contenido:

1. Al determinar qué contenido hay en el sitio web, puede hacer una lista de contenido.

2. Averigüe qué contenido se necesita para considerar dónde se ubican y cómo escribir contenido específico.

   1. Se pueden utilizar 倒金字塔formas para garantizar que las series importantes aparezcan primero, seguidas de detalles secundarios que los usuarios pueden ver o no.
      

   2. Encabezados jerárquicos, si el contenido de la página excede los dos o tres párrafos, divídalo en partes pequeñas. Esto permite a los usuarios comprender más fácilmente la estructura de la página y reconocer mejor el tipo de contenido de la página.

Un buen título puede dividir el contenido de la página web en varias partes de acuerdo con diferentes puntos clave.

Diseño lineal: lee todo el contenido de la página web de principio a fin. Para dispositivos móviles pequeños, todo el contenido se muestra básicamente en una sola columna, por lo que los usuarios siempre leen el contenido en un orden lineal.

Componente de contenido

Tenemos que decidir qué componentes de contenido aparecerán en la página, como el logotipo del sitio web, el cuadro de búsqueda, la barra de navegación principal, el texto, etc.

En el proceso de diseño en esta etapa, estos componentes deben considerarse como bloques de contenido separados, de modo que sus posiciones se puedan mover en la página cuando se cree el prototipo.

Cuando se organiza la mayor parte del contenido que debe aparecer en el nuevo sitio web, primero se crea un esquema simplificado de alto nivel del área de contenido y se refleja en la navegación principal del sitio web.

Dibujar bocetos, wireframes

Puede dibujar pequeños bocetos con solo unos pocos detalles y probar rápidamente una variedad de ideas.

El boceto comienza pensando en cómo se mostrará el sitio web en pantallas de varios tamaños (desde teléfonos móviles pequeños hasta pantallas grandes). En esta etapa, solo se necesitan gráficos y líneas simples, incluso si las líneas están sesgadas, no importa.

¿Por qué pasar de un teléfono móvil pequeño a una pantalla grande? Imagine que vive en una casa pequeña de 16 metros cuadrados y luego compra una casa de 200 metros cuadrados. En este momento, los muebles que tiene en la casa pequeña de 16 metros cuadrados se pueden colocar fácilmente en la casa de 200 metros cuadrados. Pero lo contrario no es posible.

Dibuja un prototipo

El dibujo del prototipo está cerca del dibujo de diseño del producto final, es decir, de alta fidelidad. Pero es solo un modelo.

En la etapa de prototipo de alta fidelidad, puede agregar colores, estilos de diseño de texto y algo de contenido sobre la marca del sitio web.

Herramientas de creación rápida de prototipos de sitios web:http://axure.intertechnology.cn/

Si su página necesita admitir varias resoluciones diferentes al mismo tiempo. Entonces, el orden de escritura de las páginas es de baja resolución a alta resolución.

Consultas de los medios

Para resolver el problema de que un conjunto de sitios web muestra diferentes efectos en diferentes pantallas, existe una consulta de medios.

Debido a que la aparición del mecanismo de consulta de medios puede restringir las hojas de estilo, solo aplique las hojas de estilo a medios específicos y medios que cumplan con condiciones específicas.

tipo de medio

• todos, todos los medios capaces de presentar contenido.
• impresión, vista previa de impresión de impresora o documento.
• pantalla, el medio de pantalla capaz de presentar documentos.

Consulta de medios básica

• Método 1: utilice el atributo de medios directamente en la etiqueta HTML para la consulta de medios.

<link rel="stylesheet" href="./screen.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="./print.css" type="text/css" media="print"/>
<style media='print'>
    h1 {
     
     
        color: red;
    }
</style>
<style media='screen'>
    h1 {
     
     
        color: blue;
    }
</style>

El valor del atributo media puede tener uno o más de un valor.

• Método 2: Utilice el bloque @media con estilo. Esta sintaxis se puede utilizar para definir estilos para varios medios en la misma hoja de estilo.

Consulta según las características del medio

No solo podemos usar el tipo de medio para realizar consultas, sino también aplicar estilos basados ​​en las características del medio, como el tamaño de la pantalla, la profundidad del color, etc.

Puede utilizar y para hacer coincidir varias características de los medios.

<link href="print.css" type="text/css" rel="stylesheet" media="print and (color),screen and (color)"/>

El print.csscódigo anterior se utiliza para hacer coincidir (el dispositivo de impresión está en color) o (el dispositivo de visualización está en color) siempre que pueda coincidir con cualquiera de los códigos anteriores .

Todos los datos, como la pantalla y (color), se denominan descriptores de medios. Cada descriptor de medios consta de un tipo de medio y una o más características de los medios, y las características de los medios deben colocarse entre paréntesis.

<link href="xxx.css" type="text/css" rel="stylesheet" media="screen and (min-width:600px) and (max-width:800px)"/>

Esto significa que xxx.css solo se introducirá cuando la configuración de la pantalla coincida y su ancho mínimo sea de 600 px, y el ancho máximo sea de 800 px.

<link href="xxx.css" type="text/css" rel="stylesheet" media="(min-width:600px) and (max-width:800px)"/>Esta forma de escritura omite el tipo de medio, y el valor predeterminado es todo después de omitirlo.<link href="xxx.css" type="text/css" rel="stylesheet" media="all and (min-width:600px) and (max-width:800px)"/>

El formato general:media=媒体类型 逻辑关键字 (媒体特性)

Palabras clave lógicas

• and, Se utiliza para encadenar dos o más funciones de medios a la vez, y cada función debe coincidir.

• not, Invertir, invertir el resultado de toda la consulta, solo se puede escribir al principio de la consulta de medios.media="not screen and (min-width:600px) and (max-width:800px)"

• ,, Las orpalabras clave no se pueden utilizar en consultas de medios , las comas juegan el papel de o

  media="print , not screen and (min-width:600px) and (max-width:800px)"

Funciones de medios en consultas de medios

• min-width: El ancho de la ventana gráfica es mayor que el ancho especificado (ancho mínimo, solo si es mayor o igual que).

• max-width: El ancho de la ventana gráfica es menor que el ancho especificado (el ancho máximo es menor o igual a).

• orientation: Especifique si el dispositivo está en una pantalla horizontal o vertical. Se juzga por la altura y el ancho. Si la altura es mayor o igual que el ancho, vuelve al estado vertical (retrato), y si el ancho es mayor o igual que la altura, vuelve al estado horizontal (paisaje).

• color, Ya sea para apoyar el color.

@media all and (color){/*能够显示颜色就应用这个样式表*/
    
}

Consultas de medios de uso común en la web

/*超小屏幕设备，屏幕小于768px的设备*/
@media (max-width:768px){
    
}
/*小屏幕设备， 大于等于768并且小于等于992px的设备*/
@media (min-width:768px) and (max-width:992px){
    
}
/*中等屏幕设备，大于等于992px，小于等于1200的设备*/
@media (min-width:992px) and (max-width:1200px){
    	
}
/*大屏幕设备，大于等于1200的设备*/
@media (min-width:1200px){
    
}

Los 768, 992 y 1200 establecidos aquí son los puntos de interrupción establecidos.

Establecer punto de interrupción: un punto de interrupción es un punto establecido en una consulta de medios y puede usar consultas de medios para cambiar el diseño de diseño en el punto de interrupción.

El rango de diseño es el rango de tamaño de pantalla cubierto entre dos puntos de interrupción. Puede haber diferentes estilos de diseño entre cada gama.

• xs, pantalla super pequeña
• sm, pantalla pequeña
• md, pantalla mediana
• lg, pantalla grande

Diseño de cuadrícula: proviene de un diseño plano, lo que significa que está compuesto por varias columnas del mismo ancho, con el mismo espacio entre las columnas, y todo el contenido de la página se basa en estas columnas.

El diseño de cuadrícula de 12 columnas más utilizado se debe a su flexibilidad 2, 3, 4, 6

Diseño de caja flexible

También llamado: diseño flexible, caja flexible, diseño flexible, diseño flexible, caja flexible.

Es un método de diseño simple y poderoso. El cuadro flexible puede especificar el método de asignación de espacio, la alineación del contenido y el orden visual de los elementos (y no está limitado por el orden del código fuente). El cuadro flexible es más adecuado para organizar el contenido en una dirección.

La característica más importante hace que el elemento esté listo para adaptarse a diferentes dispositivos de visualización con diferentes tamaños de pantalla.

El diseño flexible es la relación entre los elementos principales y los elementos secundarios.

Elemento padre: espacio flexible o contenedor flexible.

Elemento hijo: elemento flexible o elemento flexible.

Envase flexible

Los contenedores elásticos tienen muchas propiedades, y las que se utilizan con frecuencia también se establecen para contenedores elásticos.

Declare sobre el elemento display:flex(obtiene un elemento a nivel de bloque), que activa el diseño de caja flexible. Este elemento se convierte en un contenedor elástico, y el contenedor elástico es responsable de los subelementos integrados del espacio y controla el diseño de los subelementos.

Cuando se establece el display: flexelemento principal , los elementos secundarios se organizan horizontalmente. Si el ancho del elemento principal es menor que el ancho total de 6 cajas, se estirará automáticamente.

Elemento elástico

Los elementos secundarios del contenedor flexible se denominan elementos flexibles (solo los elementos secundarios directos se cuentan como contenido en el diseño del cuadro flexible y los elementos descendientes no se ven afectados).

Los elementos elásticos incluyen elementos secundarios y contenido generado en el contenedor elástico

En el contenedor elástico, cada elemento elástico está dispuesto sobre el eje principal. El eje principal puede ser horizontal o vertical.

• Eje principal: El contenido fluye a lo largo de este eje, indicando la dirección de flujo de los elementos elásticos. El eje principal predeterminado es horizontal, comenzando a la izquierda y terminando a la derecha.
• Eje vertical: (eje transversal, eje lateral, eje auxiliar), los elementos elásticos se apilan a lo largo de este eje y la dirección en la que se colocan las nuevas filas de elementos elásticos (el eje vertical es siempre perpendicular al eje principal). Por defecto, el eje vertical comienza en la parte superior y termina en la parte inferior.

Establecer la dirección del husillo

flex-directionEspecifique cómo colocar los elementos elásticos en el contenedor elástico y defina la dirección del eje principal.

• row, El borde inicial del eje principal está en el lado izquierdo del contenedor elástico y el extremo está en el lado derecho del contenedor elástico. (Valores predeterminados)
• row-reverse, El borde inicial del eje principal está en el lado derecho del contenedor elástico y el extremo está en el lado izquierdo del contenedor elástico. (Similar a flotar: derecha)
• column, El lado inicial del eje principal está en el lado superior del contenedor elástico y el lado final está en el lado inferior. El eje vertical se vuelve horizontal, comenzando por la izquierda y terminando por la derecha.
• column-reverse, El borde inicial del eje principal está debajo del contenedor elástico y el borde final está por encima del contenedor elástico.

Envoltura

Cuando el elemento elástico no se puede colocar en el eje principal del contenedor elástico, el elemento elástico no se envolverá por defecto.

Puede usar flex-wrap para controlar.

• nowrap, Sin salto de línea

• wrap, Para envolver a lo largo del eje vertical.

Cuando no se establece la
altura : Cuando se establece la altura: (El contenido adicional se divide uniformemente después del salto de línea)

Cómo se distribuyen los elementos elásticos en el eje principal

Por defecto, el espacio en blanco que dejan todos los elementos elásticos colocados en el contenedor elástico siempre aparece en la dirección del final del eje principal y el final del eje vertical.

También puede usar justify-contentatributos para establecer cómo distribuir los elementos elásticos en cada fila en el eje principal del contenedor elástico (cómo se divide el espacio extra).

• flex-start, Valores predeterminados. Cerca del borde inicial del eje.

• extremo flexible, cerca del final del eje.

• centro, el elemento elástico en su conjunto se muestra en el centro del eje principal.

• space-between, Coloque el primer elemento elástico de cada fila en el borde inicial del eje principal, el último elemento elástico de cada fila en el borde final del eje principal, y luego coloque una cantidad igual de espacio en blanco entre cada par restante de elásticos adyacentes elementos.

• space-around, Divida el espacio restante por el número de elementos elásticos en la fila, y luego obtenga el espacio que debe tener cada elemento elástico, y luego divida este espacio por dos, uno para cada uno a la izquierda y a la derecha.

• space-evenly, Calcule el número de elementos elásticos y agregue +1 sobre esta base para dividir el espacio extra en tantas piezas, coloque un espacio cada dos elementos elásticos en una fila y coloque el último después del último elemento elástico.

  Por ejemplo, el ancho es 810, un total de 6 divs, cada 100px, el cálculo final es(810-600)/7 = 30

  Incluso si una línea no puede caber, el método de diseño de justificar contenido se ejecutará en la línea recién abierta.

La disposición de flex-end es equivalente a la disposición de text-align: right.

¡no 'no!

y ， 与 ， &&

o ， 或 ， ||