Estilo y diseño web CSS+DIV: desde principiantes hasta catálogos de libros de dominio
Comentario en vídeo: 2 horas y 38 minutos
1.1 Estructura de página web bien diseñada 2
Seleccione etiquetas semánticas 2 para 1.1 .
1.1.2 Tipos de documentos y modos de navegador 7
1.2 Comprensión de CSS 8
1.2.1 ¿Por qué estás aprendiendo CSS 9?
1 . 2 . 2 Sintaxis básica de CSS 9
1.2.3 Revisión preliminar del diseño 10
1.3 Selector de CSS 12
1.3 .1 Descripción general del selector CSS 12
1.3.2 Selector de etiquetas 13
1.3.3 Selector de ID 14
1.3.4 Selector de clases 16
1.3.5 Selectores de pseudoclase y pseudoobjeto 17
1.3.6 Subselectores 19
1.3.7 Selectores adyacentes 20
1.3 .8 Selector de atributos 21
1.3.9 Selector universal 23
1.3.10 incluye el selector 23.
1.3.1 Selector de paquetes 25
1.3.12 Selector de especificación 26
1.4 Funciones básicas de CSS 26
1.4 .1 Cascada y especificidad 26
1.4.2 Herencia 31
1.5 Planificación, organización y mantenimiento de hojas de estilo 32
1.5.1 Aplicación de estilos a documentos 32
1.5.2 Código de comentario 34
1.5.3 Documentación de estilo 37
1.5.4 Organizar hojas de estilo para simplificar el mantenimiento 37
1.6 Propiedades CSS y Valores de propiedad 38
1.6.1 Propiedades CSS 38
1.6.2 Unidades CSS 44
1.6.3 Establecer colores 46
Capítulo 2 Uso de CSS para configurar fuentes y estilos de texto 48
Comentario en vídeo: 2 horas y 12 minutos
2.1 Conceptos básicos de fuentes y estilos de texto 49
2.1 .1 Definir el tipo de fuente 49
2.1.2 Definir el tamaño de fuente 51
2.1.3 Definir el color de fuente 53
2.1.4 Definir la fuente peso 54
2.1.5 Definir fuente cursiva 55
2.1.6 Definir subrayado, tachado y subrayado superior 56
2.1.7 Definir mayúsculas y minúsculas 57
p>
2.1.8 Definir alineación de texto 58
2.1.9 Definir alineación vertical 60.
2.1.10 define el interletraje y el interlineado 63
2.1.11 define el interlineado 64.
2.1.12 Definir sangría 67
2.2 Caso práctico 68
2.2.1 Diseño del logotipo de Baidu 69
Establecer estilo de título 70
2.2.3 Establecer estilo de texto 73
2.2.4 Establecer estilo de texto 75
2.2.5 Establecer estilo de párrafo de texto 79
2.2 .6 Configurar el estilo de diseño de párrafo 82
2.2.7 Diseñar un estilo de diseño de texto y gráfico mixto de una sola página 86
Capítulo 3 Usar CSS para configurar el estilo de imagen 92
Comentario de vídeo: 1 hora y 32 minutos
3.1 Conceptos básicos de la configuración del estilo de imagen 93
3.1.1 Definir el borde de la imagen 93
3.1.2 Definir el tamaño de la imagen 97
p>
3.1.3 define la alineación horizontal de la imagen 98
3.1.4 define la alineación vertical de la imagen 99
3.1.5 Establece el efecto de ajuste de texto 101
3.2 Caso práctico 103
3.2.1 Disposición mixta de imágenes y textos 103
3.2.2 Diseño de imagen 107
3.2.3 Disposición de varias imágenes 111
3.2.4 Figura de sombra 114
3.2.5 Imagen de esquinas redondeadas 116
3.2.6 Diseño de columnas con esquinas redondeadas 118
No. Capítulo 4 Uso de CSS para controlar imágenes de fondo 124
Comentario en video: 1 hora y 38 minutos
4.1 Base de configuración del estilo de fondo 125
4.1.1 Configuración del color de fondo de la página 125 .
4.1.2 Establecer color de fondo para bloquear la página 126.
4.1.3 Definir imagen de fondo 128.
4.1.4 Repetir la imagen de fondo 130
4.1.5 Definir la posición de la imagen de fondo 131.
4.1.6 Imagen de fondo fija 133
4.2 Caso práctico 134
4.2.1 Establecer el color de fondo de la página web 135.
4.2.2 Establecer borde de patrón 136.
4.2.3 Establecer un fondo fijo permanentemente 143.
4.2.4 Montar el módulo cilindro 144.
4.2.5 Disposición de columnas de diseño 149
4.2.6 Menú de diseño de puerta corredera 151
4.2.7 Diseño de publicidad de caja de luz 154
4.2.8 Diseñando el efecto de la página de inicio del blog 157
Capítulo 5 Usando CSS para controlar el estilo de lista 163
Explicación en video: 55 minutos
5.1 Bases de configuración del estilo de lista 164
5.1.1 Establecer el símbolo del elemento de la lista 164
5.1.2 Definir el símbolo de imagen 166 del elemento.
5.1.3 Conversión horizontal y vertical de lista 167
5.2 Caso práctico 169
5.2.1 Diseño de columna de noticias 169
5.2 .2 Diseño del menú de navegación 173
5.2.3 Diseño del menú multinivel 177
5.2.4 Aplicación del diseño de lista 182
5.2.5 Uso de listas para implementar diagramas Efecto de mezcla de texto 186
Capítulo 6 Diseño de estilos de tabla con CSS 192
Explicación en vídeo: 45 minutos
6.1 Bases de configuración del estilo de tabla 193
6.1.1 Configurar el color de la mesa 193
6.1.2 Configurar el borde de la mesa 194
6.2 Ejercicio de caso 196
6.2.1 Embellecer la mesa 197
6.2.2 Diseñar formularios eficientes 200
6.2.3 Hacer que las tablas sean más fáciles de usar 204
Diseño de tablas 207
Capítulo 7 Uso de CSS Diseño de estilos de formulario 211
Comentario en vídeo: 1 hora y 45 minutos
7.1 Conceptos básicos de la configuración del estilo de formulario c212
7.1.1 Formación de la estructura básica 212
7.1.2 Establecer estilo básico 216
7.1.3 Definir estilo de fuente 221
7.1.4 Definir estilo de borde 222
7.1 .5 Definir estilo de fondo 224
7.2 Caso práctico 228
7.2.1 Diseñar un estilo de menú desplegable colorido 228
7.2.2 Diseñar formulario de registro 230
Cuestionario de diseño 235
Formulario de comentarios de diseño 240
Capítulo 8 Uso de CSS para definir estilos de enlace 246
Comentario en vídeo: 1 hora y 12 minutos
8.1 Conceptos básicos de la configuración del estilo de enlace 247
8.1.1 Configuración del estilo de enlace 247
8.1.2 Diseño del estilo de subrayado 248
8.1.3 Configuración del estilo de indicación de tipo 249
8.1.4 Define el estilo de botón 251
8.1.5 define el estilo accedido 254.
8.1.6 Estilo de solicitud de enlace 254
8.2 Caso práctico 256
8.2.1 Estilo de mouse 256
Estilo de menú de diseño 259
8.2.3 Diseño del menú de navegación de Apple 261
8.2.4 Etiquetas de bloque 266
8.2.5 Exploración de imágenes 271
Página del Capítulo 9 diseño y diseño DIV+CSS 275
Comentario en vídeo: 2 horas y 47 minutos
9.1 Modelo de caja CSS 276
9.1.1 Modelo de caja cognitiva 276< / p>
9.1.2 Espacio exterior 278
9.1.3 Relleno 281
9.1.4 Borde 284
9.1.5 Ancho Alto 284
9.2 Reconstrucción de página web 287
9.2.1 Establecer tipo de documento 287
9.2.2 Seleccionar etiqueta 293
9.2.3 Estudio de caso: Intentando reconstruir el jardín zen 296
9.3 Tipografía de páginas web 299
9.3.1 Principios básicos de la tipografía de páginas web 299
9.3.2 Conceptos básicos de la web estándar Formulario de diseño 300
9.3.3 Métodos básicos de diseño de páginas web
9.4 Diseño DIV+CSS 305
9.4.1 Espacio de diseño 305
Posición de diseño 307
9.4.3 Diseño circundante 309
9.4.4 Flotante claro 311
9.4.5 Anidamiento de diseño 313
9.4.6 Ajustar el espaciado del diseño 316
9.5 Ejercicio de caso 321
9.5.1 Diseño de dos columnas 322
9.5.2 Diseño de tres columnas 327< /p >
Capítulo 10 Uso de CSS para posicionar y controlar el diseño de una página web 332
Comentario en vídeo: 1 hora y 53 minutos
10.1 Posicionamiento CSS 333
Utilice 10.1 para comprender la Posición 333
10.1.2 Posicionamiento estático 333
10.1.3 Posicionamiento absoluto 334
10.1.4 Posicionamiento relativo 335
10.1.5 Posicionamiento fijo 338
10.2 Referencia de posicionamiento 339
Objeto de referencia 339
10.2.2 Valor de coordenadas 343
10.2.3 Posicionamiento de propiedades especiales 344
10.3 Posicionamiento de la pila 347
10.3.1 Secuencia de apilamiento 347
10.3.2 Secuencia de apilamiento anidado 349
10.3.3 Cuadro de apilamiento de CSS 351
10.3.4 Preguntas frecuentes sobre CSS en cascada 354
10.4 Caso práctico 357
10.4.1 Diseño de página de álbum 357
10.4.2 Diseño de página de exposición 361
Diseño de página romántico 366
Capítulo 11 Resolver problemas comunes en el diseño CSS 372
Explicación en video: 2 horas
11.1 Declaraciones condicionales de IE 373
11.1.1 Comprensión de las declaraciones condicionales de IE 373
11.1.2 Uso básico de las declaraciones condicionales de IE 374
11.1.3 Ejercicio de caso: Diseño de menú multinivel compatible 376
11.2 Representación CSS y problemas 380
11.2.1 Activación y desactivación de la función de diseño de IE +0.
11.2.2 Método de configuración de la propiedad de diseño 381
11.2.3 Problema 1: el cuadro contenedor 384 no se puede expandir automáticamente.
11.2.4 Pregunta 2: Problemas y soluciones relacionados con diseños flotantes 387
11.2.5 Pregunta 3: Problemas y soluciones con diseños flotantes adyacentes 389
11.2. 6 Pregunta 4: Problemas y soluciones para el diseño de listas 390
11.2.7 Pregunta 5: Problemas y soluciones para el diseño de posicionamiento 392
11.3 Problemas y soluciones comunes de análisis de navegadores Solución 394
11.3.1 es compatible con el navegador IE6 395.
11.3.2 es compatible con el navegador 396 de la serie IE5
11.3.3 el navegador 398 es compatible con la versión IE7
11.3.4 es compatible con FF y otros navegadores estándar 399 .
11.3.5 Pregunta 1: Error 399 de hipervínculos
11.3.6 Pregunta 2: Error 400 de separación de contenido y fondo.
11.3.7 Pregunta 3: Error de búsqueda y escondite de IE6 402
11.3.8 Pregunta 4: Error de caracteres adicionales de IE6 403
11.4 Ejercicio de caso 403
11.4.1 Diseño de esquema de 3 columnas 403
11.4.2 Diseño flotante de tres columnas 408
Capítulo 12 Sitio web de hotel turístico 410
Explicación en vídeo: 2 horas y 18 minutos
12.1 Análisis del efecto de la página del sitio web 411
12.1.1 Análisis del efecto de la página "Viajes y vacaciones" 411
12.1.2 "Reserva de hotel" Análisis de efecto de página 411
12.2 Planificación y diseño de página de inicio 412
12.3 Diseño y reconstrucción de página web 414
12. dibujos de diseño 414
12.3.2 Tangtu 417
12.3.3 Reconstrucción del tema 419
12.4 Diseño de página 422
12. 1 Diseñar el estilo básico de la página 422
12.4.2 Diseñar el diseño y el estilo del encabezado 422
Diseñar el diseño y el estilo del área de búsqueda y diapositivas
12.4.4 Diseñar el área de navegación izquierda Diseño y estilo 427
12.4.5 Diseñar el estilo del área de contenido 428
12.4.6 Diseñar el estilo de la columna derecha 431.
Capítulo 13 Sitio web de noticias 434
Comentario en vídeo: 1 hora y 20 minutos
13.1 Análisis del efecto de la página del sitio web 435
13.1.1 Análisis del efecto de la página "Diálogo" 4335
13.1.2 Análisis del efecto de la página de vista global 435
13.2 Planificación y diseño del hogar 436
13.3 Diseño y reconstrucción de la página web 438
Realizar bocetos y dibujos de diseño 438
13.3.2 Recortar números 440
13.3.3 Reconstrucción del sujeto 442
13.4 Diseño de página 444
Página de estilo de diseño básico 445
13.4.2 Diseñar el diseño y estilo del encabezado 445
Diseñar el diseño y estilo del área principal de noticias 447
Diseñar el diseño y el estilo del área de noticias clasificadas 450
Capítulo 14 Usar JavaScript para controlar los estilos CSS 455
Comentario en vídeo: 2 horas y 47 minutos
Conocimientos básicos de JavaScript 456
14.1.1 Incrustar scripts de JavaScript en páginas web 456
14.1.2 Ubicación de scripts de JavaScript en documentos 457
Resolución Scripts JavaScript y CSS Conflictos entre estilos 457
14.2 Métodos de control tradicionales de los scripts CSS 459
14. 2.1 Comprensión de los objetos de estilo 460
14.2.2 Lectura y escribir estilos en línea 464
14.2.3 Estilos de lectura y escritura 467 en hojas de estilo
Acceder al estilo real de una página web 472
14.3 Métodos estándar para controlar scripts CSS 473
14.3.1 Interfaz de hoja de estilo CSS 474
14.3.2 Interfaz CSSStyleRule 474
14. 3 Interfaz de declaración de estilo CSS 475<. /p>
14.4 Usar JavaScript para controlar el tamaño del elemento 476
14.4.1 Leer los valores de estilo de largo y ancho del elemento 476
14.4.2 Usar offsetWidth y propiedades offsetHeight para leer el tamaño del elemento 479.
14.4.3 Leer el tamaño de elementos en estructuras complejas 481
14.4.4 Leer el tamaño de la ventana del navegador 485
Usar JavaScript para posicionar 486
La posición de 14.5.1 en la ventana 487
14.5.2 La posición relativa al elemento padre 489
14.5.3 La posición relativa del bloque contenedor 489
14.5.4 define la posición de desplazamiento 490.
14.5.5 Definir la posición relativa 490
14.5.6 Determinar la posición del cursor
Determinar la posición relativa del cursor 492
Determinar la posición de la barra de desplazamiento 493
Definir la posición de la barra de desplazamiento 493
14.6 Usar JavaScript para configurar la visualización y ocultar efectos 494
Establecer los efectos de mostrar y ocultar 494
Establecer transparencia 495
14.6.3 Controlar la duración de la animación 496
14.6.4 Diseñar efecto deslizante 499
Capítulo 15 Uso de CSS para diseñar estilos de documentos XML 502
Comentario en vídeo: 43 minutos
15.1 Conceptos básicos de XML 503
15.1.1 Estructura básica del documento XML 503
15.1.2 Informe 504
15.1.3 Instrucción de procesamiento 504
15.1.4 Nota 505
1.5 Etiqueta 505
15.1.6 Atributo 506
15.2 Configuración de estilos de documento XML 507
15.2.1 Hoja de estilos CSS 507
15.2.2 Hoja de estilos XSL 508
15.3 Asociación de documentos CSS y XML 510
15.3.1 Incrustar estilos CSS directamente 510.
15.3.2 Importar archivo de hoja de estilo CSS externo 512
15.3.3 @import 513
15.4 Ejercicio de caso 513
15. 4. 1 Diseñar efectos gráficos poéticos 513
15.4.2 Diseñar efectos de diseño de noticias 515
Capítulo 16 Usar filtros CSS 519
Video explicativo: 43 Horas y cero minutos
16.1 Descripción general de los filtros CSS 520
16.1.1 Uso básico 520
16.1.2 Selección adecuada de filtros 520
16.2 Filtros CSS de uso común 521
16.2.1 Canal (Alfa) 521
16.2.2 Desenfoque)
Desenfoque de movimiento (desenfoque de movimiento) 56638+06 . 3 586638686667
16.2.4 Croma)525
Flip 527
16.2.6 Resplandor)
16.2. /p>
65438+
16.2.9 Máscara 531
16.2.10 Tono) 532
16.2.11 Radiografía 534
Relieve (alivio) 25638.666486666637
16.2.13 Ola (ola) 56438.66668666661
16.3 Ejercicio de caso 537