前言

难度：⭐⭐（中等）——适合学习完html5和css3的小伙伴用于巩固练习
编辑器:WebStorm

项目起步准备

项目文件结构:

base.css 用于存放公共样式 :

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 用于标签的复位,清除标签默认的样式(引用网上别人写好的即可,但是要标注) :

/*
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 用于存放这个项目独有的样式
fonts用于存放字体图标
将所需图片放入images文件夹中
将三个css文件引入index.html中,并写好项目标题和描述.如下:

<!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>

页面顶部开发

1. 头部与二级菜单开发

页面顶部布局分析:

细节描述:
在这里插入图片描述

右侧有下拉框的部分可以给一个公共类have-menu,小箭头定位到盒子的padding上
向下箭头用一个大盒子装两个盒子形成压盖来制作,两个盒子都旋转45°,下面盒子为白色,上面盒子与背景同色,通过调整top值压盖形成向下箭头,当鼠标移动到箭头左方文字后,大盒子旋转180°,并加入过渡效果.

<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);
 }

倒三角用伪元素来做,一个盒子即可,鼠标悬浮有动画效果,倒三角选择180°变成正三角

.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);
}

二级菜单先隐藏,用display:none属性,鼠标悬浮时display:block;

2. 字体图标的使用

进入字体图标库: https://www.iconfont.cn/
搜索所需字体图标,添加入库,下载代码 (附有使用说明)

页面主体开发

1. 大Banner的布局

banner部分

小图标采用CSS精灵技术制作——一种有效的优化网页加载速度的方法，它通过减少HTTP请求的数量，提高了页面加载效率
右侧更多部分,学会JavaScript之后再写

2. 垂直菜单开发

用一个大盒子包裹6个小盒子,大盒子的高度设置100%,小盒子设置16.66%将其均分再微调即可
每一个小盒子之间有分隔线,会占据盒子的一定高度,要记得添加 box-sizing:border-box;属性
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>

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;
 }

3. 新鲜甩尾部分

在这里插入图片描述

当鼠标悬浮到图片上,图片会放大,整张卡片会产生阴影效果,注意大盒子要隐藏

/* 鼠标触碰图片有放大效果*/
.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);
}

8个盒子采用左浮动,注意去掉第四个盒子和第八个盒子的margin值,可以用:nth-child(4n)子代选择器

.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. 机酒自由行部分

在这里插入图片描述

右边导航栏采用右浮动,当鼠标悬浮时,字体变成项目标准的绿色,并且显示下边框
注意a标签要单独设置样式,并转为块元素,否则无法显示相应效果

.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);
    }
}

5. 当地玩乐部分

在这里插入图片描述

主要内容部分分成三个大盒子,将其进行左浮动,第三个盒子同样要去掉margin值(margin-right: 0;)
199可以用一个strong标签包裹
红色的查看更多部分跟上一个模块的很像,可以建立一个公共类,独有的属性如颜色、宽度再另外设置即可

6.公共类使用

将所有元素共有的属性放入一个公共类中,直接添加这个公共类即可,content-part和common-style都是公共类.

 <section class="jjzyx content-part common-style"><section>

7. 过渡和变形在实战中的应用

过渡（transition）和变形（transform）是 CSS 的强大功能，它们可以为网页添加动画效果和交互性。以下是过渡和变形在实战中的一些常见应用：

鼠标悬停效果：使用过渡属性可以使图像、按钮或链接等元素在鼠标悬停时产生平滑的过渡效果。例如，将背景颜色从透明变为不透明，或放大图像等。
页面加载动画：通过在页面加载时应用过渡和变形效果，可以为用户提供更好的视觉体验。可以使用过渡属性控制元素的透明度、位置和大小，或者使用变形属性实现旋转、缩放和移动等效果。
折叠和展开内容：当用户点击一个按钮或链接时，可以使用过渡效果将内容区域平滑地折叠起来或展开。可以结合变形属性的高度和透明度来实现这种效果。
轮播图效果：使用过渡和变形属性可以创建各种各样的轮播图效果，如淡入淡出、滑动切换或翻转效果。
进度条和加载动画：通过设置过渡效果和变形属性，可以创建进度条和加载动画，让用户知道正在进行某个任务或页面正在加载。
用户交互提示：在用户与网页进行交互时，可以通过过渡和变形效果来提供视觉反馈。例如，在按钮点击时使用过渡效果改变按钮颜色或大小，以应对用户的操作。

页脚开发

在这里插入图片描述

第一行内容时两侧居中对齐的,所以要去掉左右两边的padding或者margin值,还有最后一个右边框也要去掉
第二行的内容可以用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>

总结

慕云游项目是一个基于HTML5和CSS3的静态网页开发项目。在项目中，使用了一些HTML5和CSS3的新功能和特性来创建一个具有现代化外观和交互性的网页。

使用语义化的HTML结构：在项目中，我们遵循了HTML5的语义化标签，如 <header>、<nav>、<main>、<section>、<article>、<footer>等来更好地描述页面的结构和内容。
CSS3过渡和动画效果：为了增强页面的动态性和交互性，我们使用了CSS3的过渡（transition）和动画（animation）效果。通过设置CSS属性的过渡效果和关键帧动画，我们实现了平滑的过渡和各种动画效果，例如淡入淡出、旋转、缩放和平移等。
渐变和阴影效果：通过CSS3的线性渐变（linear gradient）和径向渐变（radial gradient）特性，我们为背景、按钮等元素添加了渐变色效果，提升了页面的视觉吸引力。同时，还使用了CSS3的阴影属性来创建阴影效果，增加了元素的层次感和立体感。
字体图标与精灵技术：为了提高网页的加载性能和用户体验，我们使用了字体图标代替部分图片，减少了网络请求并加快了页面加载速度。
利用CSS3的伪类选择器和过渡效果，为表单元素提供了更好的交互效果和用户反馈。

源码链接：https://pan.baidu.com/s/1ftwBYKbTdA6o0bYxG70d0w?pwd=zujj
提取码：zujj

HTML5+CSS3静态网页开发 —— 慕云游项目

目录

前言

项目起步准备

页面顶部开发

1. 头部与二级菜单开发

2. 字体图标的使用

页面主体开发

1. 大Banner的布局

2. 垂直菜单开发

3. 新鲜甩尾部分

4. 机酒自由行部分

5. 当地玩乐部分

6.公共类使用

7. 过渡和变形在实战中的应用

页脚开发

总结

猜你喜欢