难度:⭐⭐(中等)——适合学习完html5和css3的小伙伴用于巩固练习
编辑器:WebStorm
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;
}
/*
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;}
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>
<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);
}
.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);
}
<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>
index.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;
}
/* 鼠标触碰图片有放大效果*/
.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);
}
.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;
}
.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;
}
.content-part .bd .more-grid:hover .iconfont{
animation: ud .4s ease 0s infinite alternate;
}
@keyframes ud {
form{
transform: translateY(-10px);
}
to{
transform: translateY(10px);
}
}
将所有元素共有的属性放入一个公共类中,直接添加这个公共类即可,content-part和common-style都是公共类.
<section class="jjzyx content-part common-style"><section>
过渡(transition)和变形(transform)是 CSS 的强大功能,它们可以为网页添加动画效果和交互性。以下是过渡和变形在实战中的一些常见应用:
鼠标悬停效果:使用过渡属性可以使图像、按钮或链接等元素在鼠标悬停时产生平滑的过渡效果。例如,将背景颜色从透明变为不透明,或放大图像等。
页面加载动画:通过在页面加载时应用过渡和变形效果,可以为用户提供更好的视觉体验。可以使用过渡属性控制元素的透明度、位置和大小,或者使用变形属性实现旋转、缩放和移动等效果。
折叠和展开内容:当用户点击一个按钮或链接时,可以使用过渡效果将内容区域平滑地折叠起来或展开。可以结合变形属性的高度和透明度来实现这种效果。
轮播图效果:使用过渡和变形属性可以创建各种各样的轮播图效果,如淡入淡出、滑动切换或翻转效果。
进度条和加载动画:通过设置过渡效果和变形属性,可以创建进度条和加载动画,让用户知道正在进行某个任务或页面正在加载。
用户交互提示:在用户与网页进行交互时,可以通过过渡和变形效果来提供视觉反馈。例如,在按钮点击时使用过渡效果改变按钮颜色或大小,以应对用户的操作。
<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>
慕云游项目是一个基于HTML5和CSS3的静态网页开发项目。在项目中,使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。
使用语义化的HTML结构:在项目中,我们遵循了HTML5的语义化标签,如
CSS3过渡和动画效果:为了增强页面的动态性和交互性,我们使用了CSS3的过渡(transition)和动画(animation)效果。通过设置CSS属性的过渡效果和关键帧动画,我们实现了平滑的过渡和各种动画效果,例如淡入淡出、旋转、缩放和平移等。
渐变和阴影效果:通过CSS3的线性渐变(linear gradient)和径向渐变(radial gradient)特性,我们为背景、按钮等元素添加了渐变色效果,提升了页面的视觉吸引力。同时,还使用了CSS3的阴影属性来创建阴影效果,增加了元素的层次感和立体感。
字体图标与精灵技术:为了提高网页的加载性能和用户体验,我们使用了字体图标代替部分图片,减少了网络请求并加快了页面加载速度。
利用CSS3的伪类选择器和过渡效果,为表单元素提供了更好的交互效果和用户反馈。
源码链接:https://pan.baidu.com/s/1ftwBYKbTdA6o0bYxG70d0w?pwd=zujj
提取码:zujj