Tabla de contenido
prefacio
Dificultad: ⭐⭐ (media) - adecuado para amigos que han aprendido html5 y css3 para consolidar ejercicios
Editor: WebStorm
Preparación para el inicio del proyecto
Estructura del archivo del proyecto:
- base.css se usa para almacenar estilos públicos:
body {
font-family: "PingFangSCRegular";
}
.center-wrap {
/* 版心 */
width: 1152px;
margin: 0 auto;
}
.clearfix {
/* 清除浮动 */
overflow: hidden;
}
.clearfix::after {
content: '';
display: block;
clear: both;
overflow: hidden;
}
.db {
display: block;
}
.dib {
display: inline-block;
}
.tac {
text-align: center;
}
- reset.css se usa para restablecer la etiqueta y borrar el estilo predeterminado de la etiqueta (puede citar lo que otra persona escribió en Internet, pero debe marcarlo):
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{
color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;padding:0}table{
border-collapse:collapse;border-spacing:0}fieldset,img{
border:0}address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;font-weight:normal}ol,ul{
list-style:none}caption,th{
text-align:left}h1,h2,h3,h4,h5,h6{
font-size:100%;font-weight:normal}q:before,q:after{
content:''}abbr,acronym{
border:0;font-variant:normal}sup{
vertical-align:text-top}sub{
vertical-align:text-bottom}input,textarea,select{
font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{
color:#000}#yui3-css-stamp.cssreset{
display:none}a{
text-decoration: none;}
- index.css se usa para almacenar estilos exclusivos de este proyecto
- fonts se utiliza para almacenar iconos de fuentes
- Coloque las imágenes deseadas en la carpeta de imágenes.
- Importe los tres archivos css en index.html y escriba el título y la descripción del proyecto, de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>慕云游商城-机票,酒店,旅游</title>
<meta name="Keywords" content="机票，酒店，旅游攻略，签证，出国，自由行">
<meta name="Description" content="慕云游商城有10多年旅游行业经验，为您提供全方位旅游服务">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
</body>
</html>
Desarrollo en la parte superior de la página.
1. Desarrollo del menú principal y secundario
Análisis del diseño de la parte superior de la página:
Descripción detallada:
- La parte con el cuadro desplegable a la derecha puede dar un menú de clase pública, y la flecha pequeña se coloca en el relleno del cuadro.
- La flecha hacia abajo se hace colocando dos cuadros en un cuadro grande para formar una cubierta. Ambos cuadros se giran 45 °. El cuadro inferior es blanco y el cuadro superior es del mismo color que el fondo. Al ajustar el valor superior, el la cubierta forma una flecha hacia abajo Cuando el mouse se mueve Después de llegar al texto a la izquierda de la flecha, el cuadro grande gira 180° y se agrega un efecto de transición.
<em class="arrow">
<b></b>
<i></i>
</em>
.site-head .topbar .shortcut-link > ul > li.have-menu .arrow{
position: absolute;
right: 0;
top:50%;
margin-top: -6px;
width: 12px;
height: 12px;
/*background-color: #978654;*/
}
.site-head .topbar .shortcut-link > ul > li.have-menu:hover .arrow{
transform: rotate(180deg);
transition: transform .2s ease 0s;
}
.site-head .topbar .shortcut-link > ul > li.have-menu .arrow b{
position: absolute;
left: 3px;
top: 2px ;
width: 6px;
height: 6px;
background-color: #fff;
transform: rotate(45deg);
}
.site-head .topbar .shortcut-link > ul > li.have-menu .arrow i{
position: absolute;
left: 3px;
top: 0.5px ;
width: 6px;
height: 6px;
background-color: #2A2A2A;
transform: rotate(45deg);
}
- El triángulo invertido está hecho de pseudo elementos, un cuadro es suficiente, el mouse se desplaza con un efecto de animación y el triángulo invertido selecciona 180 ° para convertirse en un triángulo regular.
.site-head .main-nav ul li.have-menu::before{
content: '';
position: absolute;
right: 0;
top: 18px;
width: 0;
height: 0;
border:5px solid transparent;
border-bottom:none;
border-top-color:white;
transition: transform .5s ease 0s;
}
.site-head .main-nav ul li.have-menu:hover::before{
transform: rotate(180deg);
}
- El menú secundario se oculta primero, use el atributo display: none y display: block cuando se desplaza el mouse;
2. Uso de iconos de fuentes
- Ingrese a la biblioteca de iconos de fuentes: https://www.iconfont.cn/
- Busque el ícono de fuente deseado, agréguelo a la biblioteca y descargue el código (con instrucciones)
Desarrollo de la página principal
1. El diseño de la pancarta grande
- Los íconos pequeños están hechos con tecnología CSS sprite, una forma efectiva de optimizar la velocidad de carga de la página web, lo que mejora la eficiencia de carga de la página al reducir la cantidad de solicitudes HTTP.
- Más partes a la derecha, escriba después de aprender JavaScript
2. Desarrollo de menús verticales
- Use una caja grande para envolver 6 cajas pequeñas, configure la altura de la caja grande al 100 %, configure la altura de la caja pequeña al 16,66 %, divídalas de manera uniforme y ajústelas
- Hay una línea divisoria entre cada cuadro pequeño, que ocupará una cierta altura del cuadro.Recuerde agregar box-sizing: border-box;atributo
index.html
<ul>
<li class="hot have-menu" data-t="hot">
<dl>
<dt>热门出发地</dt>
<dd>
<em>北京</em>
<em>上海</em>
<em>广深</em>
<em>西南</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="hk" data-t="hk">
<dl>
<dt>港澳台 国内</dt>
<dd>
<em>香港</em>
<em>澳门</em>
<em>台湾</em>
<em>国内其他</em>
</dd>
</dl>
</li>
<li class="jp" data-t="jp">
<dl>
<dt>日本 韩国</dt>
<dd>
<em>东京</em>
<em>大阪</em>
<em>冲绳</em>
<em>北海道</em>
<em>福冈</em>
</dd>
</dl>
</li>
<li class="as" data-t="as">
<dl>
<dt>东南亚南亚</dt>
<dd>
<em>泰国</em>
<em>新加坡</em>
<em>印尼</em>
<em>马来西亚</em>
<em>越南</em>
</dd>
</dl>
</li>
<li class="eu" data-t="eu">
<dl>
<dt>欧洲 美洲</dt>
<dd>
<em>英国</em>
<em>法国</em>
<em>美国</em>
<em>加拿大</em>
</dd>
</dl>
</li>
<li class="au" data-t="au">
<dl>
<dt>澳新 中东非</dt>
<dd>
<em>澳大利亚</em>
<em>新西兰</em>
<em>迪拜</em>
</dd>
</dl>
</li>
</ul>
índice.css
.banner .center-wrap .banner-nav ul{
/* 注意,这里的100%非常重要,如果忽略了,它的height就是0,那么它的子盒子设置16.6就没有意义了*/
height: 100%;
}
.banner .center-wrap .banner-nav>ul>li{
position: relative;
height: 16.66%;
width: 296px;
background:rgba(0,0,0,.53);
border-bottom: 1px solid #9e9e9e;
/* 让heigtht属性是盒子的总高度*/
box-sizing:border-box;
}
.banner .center-wrap .banner-nav>ul>li:last-child{
border-bottom: none;
}
.banner .center-wrap .banner-nav>ul>li dl {
position: absolute;
height: 48px;
top:50%;
margin-top: -24px;
padding-left: 42px;
color: white;
}
.banner .center-wrap .banner-nav>ul>li dl dt {
font-size: 18px;
}
.banner .center-wrap .banner-nav>ul>li dl dt {
font-size: 16px;
}
3. Parte nueva de película
- Cuando el mouse pasa sobre la imagen, la imagen se ampliará y toda la tarjeta tendrá un efecto de sombra. Tenga en cuenta que la caja grande debe estar oculta.
/* 鼠标触碰图片有放大效果*/
.content-part img{
transition:transform .4s ease 0s;
}
.content-part img:hover{
transform:scale(1.1);
}
.content-part li{
overflow:hidden;
}
.content-part li .picbox{
height: 184px;
overflow: hidden;
}
/* 阴影效果 */
.xxsw .center-wrap ul li:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
- Los 8 cuadros se dejan flotando, preste atención para eliminar el valor de margen del cuarto cuadro y el octavo cuadro, puede usar: nth-child (4n) child selector
.xxsw .center-wrap ul li{
float: left;
width: 264px;
height: 270px;
margin: 32px 32px 0 0;
}
.xxsw .center-wrap ul li:nth-child(4n){
margin-right: 0;
}
4. La parte de viaje gratis de la máquina de vino.
- La barra de navegación derecha adopta la flotación derecha, cuando el mouse se desplaza, la fuente se convierte en el verde estándar del proyecto y se muestra el borde inferior
- Tenga en cuenta que la etiqueta a debe diseñarse por separado y convertirse en un elemento de bloque; de lo contrario, no se puede mostrar el efecto correspondiente
.common-style .center-wrap .title ul li a{
color: rgba(0,0,0,0.85);
display: inline-block;
}
.common-style .center-wrap .title ul li:hover a {
color: #20BD9A;
border-bottom: 4px solid #20BD9A;
padding-bottom: 4px;
}
- Vea las flechas pequeñas de más partes, cuando el mouse pasa sobre este cuadro, puede saltar hacia arriba y hacia abajo
.content-part .bd .more-grid:hover .iconfont{
animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud {
form{
transform: translateY(-10px);
}
to{
transform: translateY(10px);
}
}
5. Sección de diversión local
- La parte del contenido principal se divide en tres cuadros grandes, que flotan hacia la izquierda, y el tercer cuadro también debe eliminar el valor del margen (margen derecho: 0;)
- 199 se puede envolver con una etiqueta fuerte
- La vista roja más parte es muy similar al módulo anterior.Puede crear una clase pública y establecer atributos únicos como el color y el ancho.
6. Uso de clase pública
Coloque los atributos compartidos por todos los elementos en una clase pública, simplemente agregue esta clase pública directamente, la parte de contenido y el estilo común son clases públicas.
<section class="jjzyx content-part common-style"><section>
7. Aplicación de transición y deformación en combate real.
Las transiciones y transformaciones son potentes funciones de CSS que añaden animación e interactividad a las páginas web. Aquí hay algunos usos comunes de transiciones y morfos en la práctica:
-
Efectos de mouseover: use la propiedad de transición para hacer que elementos como imágenes, botones o enlaces cambien suavemente cuando el mouse se desplaza sobre ellos. Por ejemplo, cambiar el color de fondo de transparente a opaco, o acercar una imagen, etc.
-
Animaciones de carga de página: al aplicar transiciones y transformaciones mientras se carga la página, puede brindar a los usuarios una mejor experiencia visual. Puede usar las propiedades de transición para controlar la transparencia, la posición y el tamaño de un elemento, o usar las propiedades de transformación para lograr efectos como la rotación, la escala y el movimiento.
-
Contraer y expandir contenido: use efectos de transición para contraer o expandir suavemente áreas de contenido cuando el usuario hace clic en un botón o enlace. Este efecto se puede lograr combinando la altura y la transparencia de las propiedades de deformación.
-
Efectos de carrusel: use las propiedades de transición y transformación para crear una variedad de efectos de carrusel, como efectos de fundido, deslizamiento o volteo.
-
Barras de progreso y animaciones de carga: al establecer efectos de transición y propiedades de transformación, puede crear barras de progreso y animaciones de carga para que los usuarios sepan que una tarea está en progreso o que una página se está cargando.
-
Sugerencias para la interacción del usuario: las transiciones y transformaciones se pueden usar para proporcionar comentarios visuales a medida que los usuarios interactúan con las páginas web. Por ejemplo, utilice efectos de transición para cambiar el color o el tamaño del botón cuando se toque el botón en respuesta a las acciones del usuario.
desarrollo de pie de página
- El contenido de la primera línea está alineado al centro en ambos lados, por lo que se deben eliminar los valores de margen o relleno en los lados izquierdo y derecho, y también se debe eliminar el último borde derecho.
- El contenido de la segunda línea puede usar la etiqueta dl
<div class="clearfix">
<dl class="txfw">
<dt >贴心服务</dt>
<dd>我们收集慕云游者的真实诉求，找寻特色旅行目的地，让慕云游者放心出行</dd>
</dl>
<dl class="ccsx">
<dt>层层筛选</dt>
<dd>对旅游产品供应商严格筛选，资质层层把关
为慕云游者挑选符合需求的旅行产品</dd>
</dl>
<dl class="axph">
<dt>安心陪护</dt>
<dd>对慕云游者的购买进行跟踪服务以及质量监控，生效投诉先行赔付，出现问题及时解决</dd>
</dl>
</div>
Resumir
El proyecto Muyunyou es un proyecto de desarrollo web estático basado en HTML5 y CSS3. En el proyecto, se utilizan algunas funciones y características nuevas de HTML5 y CSS3 para crear una página web con un aspecto moderno e interactivo.
-
Use la estructura semántica de HTML: en el proyecto, seguimos las etiquetas semánticas de HTML5, como
<header>,<nav>,<main>,<section>,<article>,<footer>etc. para describir mejor la estructura y el contenido de la página. -
Efectos de transición y animación CSS3: Para mejorar la dinámica y la interactividad de la página, utilizamos efectos de transición y animación CSS3. Al establecer efectos de transición y animaciones de fotogramas clave de las propiedades CSS, logramos transiciones suaves y varios efectos de animación, como aparición y desaparición gradual, rotación, escala y traducción, etc.
-
Efectos de degradado y sombra: a través de las funciones de degradado lineal y degradado radial de CSS3, agregamos efectos de degradado al fondo, botones y otros elementos para mejorar el atractivo visual de la página. Al mismo tiempo, la propiedad de sombra de CSS3 también se utiliza para crear un efecto de sombra, lo que aumenta la sensación de estratificación y tridimensionalidad del elemento.
-
Ícono de fuente y tecnología de sprite: para mejorar el rendimiento de carga y la experiencia del usuario de las páginas web, usamos íconos de fuente para reemplazar algunas imágenes, lo que reduce las solicitudes de red y acelera la carga de la página.
-
El uso de selectores de pseudoclase y efectos de transición de CSS3 proporciona mejores efectos de interacción y comentarios del usuario para los elementos del formulario.
Enlace fuente: https://pan.baidu.com/s/1ftwBYKbTdA6o0bYxG70d0w?pwd=zujj
Código de extracción: zujj