前端系列之实战(城市医院预约挂号平台2.基本样式编写)
2024-04-09 16:01:55
伤情最是晚凉天，憔悴厮人不堪言，吆酒催肠三杯醉，寻香惊梦五更寒，
钗头凤斜倾有泪，徒迷花寥我无缘，小楼寂寞心与月，也难如钩也难圆！
书接上文：前端系列之实战(城市医院预约挂号平台1.框架搭建)
基本样式预览图—棕色部分代码实现
项目实际截图
首页基本样式-模块-nav&header
新建base.css文件，在index.html文件引入
index.html
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>城市医院预约平台</title><link rel="stylesheet" type="text/css" href="css/layout.css" /><link rel="stylesheet" type="text/css" href="css/base.css" /></head><body><div id="top" class="top"><div class="wrap"><p class="call">010-114/116114电话预约</p><p class="welcome">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a><a href="#">注册</a> <a href="#">帮助中心</a></p></div></div><div id="header" class="header"><div class="wrap clearfix"><a class="logo" href="#"><img src="./img/logo.png"></a><div class="search"></div></div></div><div id="nav" class="nav"><div class="wrap"><div class="link menu">全部科室<div class="menu-list"></div></div><a href="#" class="link">按医院挂号</a><a href="#" class="link">按科室挂号</a><a href="#" class="link">按疾病挂号</a><a href="#" class="link">最新公告</a><a href="#" class="link right">社会知名医院</a></div></div><div id="banner" class="banner"><div class="banner-slider"></div><div class="banner-search"></div><div class="banner-help"></div></div><div id="content" class="content"><div class="wrap clearfix"><div class="content-tab"></div><div class="content-news"></div><div class="content-close"></div></div></div><div id="footer" class="footer"></div></body></html>base.css
p{margin: 0;padding: 0;display: inline-block;
}
i{font-style: normal;display: inline-block;
}
select,input{border: none;outline: none;
}/* #top模块内界面 样式*/
.top{line-height: 30px;font-size: 13px;color: #868686;
}.top .call{float: left;padding-left: 20px;background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{float: right;
}
.top a{color: #2DA5E1;padding-left: 10px;
}/*#header 模块内样式*/.header .logo{width: 402px;height: 74px;padding: 9px 0;display: inline-block;
}.header .logo img{width: 100%;height: 100%;
}.header .search{width: 326px;height: 38px;position: absolute;right: 0px;top: 29px;background-color: orange;
}/*#nav 模块内样式*/
.nav .link{display: inline-block;float: left;padding-left: 30px;line-height: 36px;color: #fff;font-size: 16px;min-width: 80px;text-align: center;
}.nav a:hover{color: #d7f3ff;
}.nav .menu{width: 130px;padding-right: 30px;background-color: #1fa4f0;position: relative;
}.nav .menu .menu-list{background-color: #1FA4F0;width: 100%;height: 423px;position: absolute;left: 0;top: 36px;
}
首页.基本样式-模块-banner
index.html
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>城市医院预约平台</title><link rel="stylesheet" type="text/css" href="css/layout.css" /><link rel="stylesheet" type="text/css" href="css/base.css" /></head><body><div id="top" class="top"><div class="wrap"><p class="call">010-114/116114电话预约</p><p class="welcome">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a><a href="#">注册</a> <a href="#">帮助中心</a></p></div></div><div id="header" class="header"><div class="wrap clearfix"><a class="logo" href="#"><img src="./img/logo.png"></a><div class="search"></div></div></div><div id="nav" class="nav"><div class="wrap"><div class="link menu">全部科室<div class="menu-list"></div></div><a href="#" class="link">按医院挂号</a><a href="#" class="link">按科室挂号</a><a href="#" class="link">按疾病挂号</a><a href="#" class="link">最新公告</a><a href="#" class="link right">社会知名医院</a></div></div><div id="banner" class="banner"><div class="banner-slider"></div><div class="banner-search"><div class="caption"><span class="text">快速预约</span></div><div class="form"><div class="line"><select name="area"><option>医院地区</option></select></div><div class="line"><select name="level"><option>医院等级</option></select></div><div class="line"><select name="name"><option>医院名称</option></select></div><div class="line"><select name="department"><option>医院科室</option></select></div></div><div class="submit"><input type="button" class="button" value="快速查询" /></div></div><div class="banner-help"><div class="caption"><span class="text">帮助中心</span></div><div class="list"><a href="#" class="link">账号指南</a><a href="#" class="link">预约指南</a><a href="#" class="link">账号找回</a><a href="#" class="link">常见问题</a></div></div></div><div id="content" class="content"><div class="wrap clearfix"><div class="content-tab"></div><div class="content-news"></div><div class="content-close"></div></div></div><div id="footer" class="footer"></div></body></html>base.css
p{margin: 0;padding: 0;display: inline-block;
}
a{text-decoration: none;
}i{font-style: normal;display: inline-block;
}
select,input{border: none;outline: none;
}/* #top模块内界面 样式*/
.top{line-height: 30px;font-size: 13px;color: #868686;
}.top .call{float: left;padding-left: 20px;background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{float: right;
}
.top a{color: #2DA5E1;padding-left: 10px;
}/*#header 模块内样式*/.header .logo{width: 402px;height: 74px;padding: 9px 0;display: inline-block;
}.header .logo img{width: 100%;height: 100%;
}.header .search{width: 326px;height: 38px;position: absolute;right: 0px;top: 29px;background-color: orange;
}/*#nav 模块内样式*/
.nav .link{display: inline-block;float: left;padding-left: 30px;line-height: 36px;color: #fff;font-size: 16px;min-width: 80px;text-align: center;
}.nav a:hover{color: #d7f3ff;
}.nav .menu{width: 130px;padding-right: 30px;background-color: #1fa4f0;position: relative;
}.nav .menu .menu-list{background-color: #1FA4F0;width: 100%;height: 423px;position: absolute;left: 0;top: 36px;
}/*#banner 模块内样式*/.banner-search{background-color: #fafafa;
}.banner-help .caption,
.banner-search .caption{height: 22px;padding: 15px 0 15px 0;text-align: center;
}
.banner-help .caption .text,
.banner-search .caption .text{display: inline-block;height: 22px;line-height: 22px;padding-left: 28px;color: #fec009;font-size: 16px;background: url(../img/icon-help.png) no-repeat 0 0;
}.banner-search .form{height: 150px;
}.banner-search .form .line{padding-bottom: 9px;text-align: center;
}.banner-search .form .line select{width: 170px;font-size: 12px;z-index: 0;border: 1px solid #dcddd;height: 26px;line-height: 26px;padding: 2px 0;color: #666;
}.banner-search .submit{height: 32px;text-align: center;
}.banner-search .submit .button{width: 108px;height: 33px;background-color: #fecd09;font-size: 14px;color: #fff;border-radius: 3px;
}.banner-help{background-color: #FAFAFA;
}.banner-help .caption .text{color: #00b3ea;background-position: 0 -23px;
}.banner-help .link{color: #00B3EA;display: inline-block;width: 86px;height: 26px;line-height: 26px; font-size: 14px;text-align: center;padding: 0 0 8px 26px;
}
已完成
接下来完成
首页基本样式-模块-content_news content_close
index.html
<div id="content" class="content"><div class="wrap clearfix"><div class="content-tab"></div><div class="content-news"><div class="caption" >最新公告 <a href="#8" class="more">|更多</a> </div><div class="list"><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a></div></div><div class="content-close"><div class="caption" >停诊公告 <a href="#8" class="more">|更多</a> </div><div class="list"><a href="#9" class="link">首都医科大学附属北京安贞医院消...</a><a href="#9" class="link">首都医科大学附属北京安贞医院消...</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">北京安贞医院妇</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">北京安贞医院妇</a></div></div></div></div>base.css
/*#content 模块样式*/.content-news{background-color: #fff;border: 1px solid #f4f6fa;
}.content-close .caption,
.content-news .caption{height: 38px;line-height: 38px;background-color: #f4f6fa;text-indent: 20px;color: #FEC009;font-size: 15px;
}.content-close .more,
.content-news .more{float: right;padding-right: 22px;font-size: 12px;color: #868686;
}.content-close .list,
.content-news .list{padding: 15px 20px 13px 35px;line-height: 29px;font-size: 12px;background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}.content-close .list .link,
.content-news .list .link{display: block;color: #969696;
}.content-close{background-color: #fff;border: 1px solid #f4f6fa;
}.content-close .caption{color: #4ab4ed;
}.content-close .list{background-image:url(../img/list-blue.jpg);
}
首页基本样式-模块-content_tab
index.html
<!DOCTYPE html>
<html lang="zh-cn"><head><meta charset="utf-8" /><title>城市医院预约平台</title><link rel="stylesheet" type="text/css" href="css/layout.css" /><link rel="stylesheet" type="text/css" href="css/base.css" /></head><body><div id="top" class="top"><div class="wrap"><p class="call">010-114/116114电话预约</p><p class="welcome">欢迎来到城市医院预约挂号统一平台 请 <a href="#">登录</a><a href="#">注册</a> <a href="#">帮助中心</a></p></div></div><div id="header" class="header"><div class="wrap clearfix"><a class="logo" href="#"><img src="./img/logo.png"></a><div class="search"></div></div></div><div id="nav" class="nav"><div class="wrap"><div class="link menu">全部科室<div class="menu-list"></div></div><a href="#" class="link">按医院挂号</a><a href="#" class="link">按科室挂号</a><a href="#" class="link">按疾病挂号</a><a href="#" class="link">最新公告</a><a href="#" class="link right">社会知名医院</a></div></div><div id="banner" class="banner"><div class="banner-slider"></div><div class="banner-search"><div class="caption"><span class="text">快速预约</span></div><div class="form"><div class="line"><select name="area"><option>医院地区</option></select></div><div class="line"><select name="level"><option>医院等级</option></select></div><div class="line"><select name="name"><option>医院名称</option></select></div><div class="line"><select name="department"><option>医院科室</option></select></div></div><div class="submit"><input type="button" class="button" value="快速查询" /></div></div><div class="banner-help"><div class="caption"><span class="text">帮助中心</span></div><div class="list"><a href="#" class="link">账号指南</a><a href="#" class="link">预约指南</a><a href="#" class="link">账号找回</a><a href="#" class="link">常见问题</a></div></div></div><div id="content" class="content"><div class="wrap clearfix"><div class="content-tab"><div class="caption"><a href="#8" class="item item_focus">医院</a><a href="#8" class="item">科室</a></div><div class="block"><div class="item"><div class="block-caption"><a href="#banner" class="block-caption-item block-caption-item_focus">全部</a><a href="#banner" class="block-caption-item">东城区</a><a href="#banner" class="block-caption-item">西城区</a><a href="#banner" class="block-caption-item">朝阳区</a><a href="#banner" class="block-caption-item">丰台区</a><a href="#banner" class="block-caption-item">石景山区</a><a href="#banner" class="block-caption-item">海淀区</a><a href="#banner" class="block-caption-item">门头沟区</a><a href="#banner" class="block-caption-item">房山区</a><a href="#banner" class="block-caption-item">其他</a></div><div class="block-content"><div class="block-list"><div class="item"><img src="img/hospital-1.jpg" alt="xx医院"/><div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div><div class="item-phone">电话：东院咨询台：010-69155564..</div><div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div></div><div class="item"><img src="img/hospital-1.jpg" alt="xx医院"/><div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div><div class="item-phone">电话：东院咨询台：010-69155564..</div><div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div></div><div class="item"><img src="img/hospital-1.jpg" alt="xx医院"/><div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div><div class="item-phone">电话：东院咨询台：010-69155564..</div><div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div></div><div class="item"><img src="img/hospital-1.jpg" alt="xx医院"/><div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div><div class="item-phone">电话：东院咨询台：010-69155564..</div><div class="item-address">[东院]北京市东城区帅府园一号 [西院]北京市西城区大木仓...</div></div></div><div class="block-text-list clearfix"><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a><a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a></div><a class="block-more">更多医院</a></div></div><div class="item" style="display: none;">科室内容</div></div></div><div class="content-news"><div class="caption" >最新公告 <a href="#8" class="more">|更多</a> </div><div class="list"><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">防护策略升级通知</a></div></div><div class="content-close"><div class="caption" >停诊公告 <a href="#8" class="more">|更多</a> </div><div class="list"><a href="#9" class="link">首都医科大学附属北京安贞医院消...</a><a href="#9" class="link">首都医科大学附属北京安贞医院消...</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">北京安贞医院妇</a><a href="#9" class="link">阜外医院特需门诊暂停更新号源通...</a><a href="#9" class="link">北京安贞医院妇</a></div></div></div></div><div id="footer" class="footer">Copyright © 2017慕课网版权所有 </div></body></html>base.css
p{margin: 0;padding: 0;display: inline-block;
}
a{text-decoration: none;
}i{font-style: normal;display: inline-block;
}
select,input{border: none;outline: none;
}/* #top模块内界面 样式*/
.top{line-height: 30px;font-size: 13px;color: #868686;
}.top .call{float: left;padding-left: 20px;background:url(../img/icon-call.png) no-repeat center left;
}
.top .welcome{float: right;
}
.top a{color: #2DA5E1;padding-left: 10px;
}/*#header 模块内样式*/.header .logo{width: 402px;height: 74px;padding: 9px 0;display: inline-block;
}.header .logo img{width: 100%;height: 100%;
}.header .search{width: 326px;height: 38px;position: absolute;right: 0px;top: 29px;background-color: orange;
}/*#nav 模块内样式*/
.nav .link{display: inline-block;float: left;padding-left: 30px;line-height: 36px;color: #fff;font-size: 16px;min-width: 80px;text-align: center;
}.nav a:hover{color: #d7f3ff;
}.nav .menu{width: 130px;padding-right: 30px;background-color: #1fa4f0;position: relative;
}.nav .menu .menu-list{background-color: #1FA4F0;width: 100%;height: 423px;position: absolute;left: 0;top: 36px;
}/*#banner 模块内样式*/.banner-search{background-color: #fafafa;
}.banner-help .caption,
.banner-search .caption{height: 22px;padding: 15px 0 15px 0;text-align: center;
}
.banner-help .caption .text,
.banner-search .caption .text{display: inline-block;height: 22px;line-height: 22px;padding-left: 28px;color: #fec009;font-size: 16px;background: url(../img/icon-help.png) no-repeat 0 0;
}.banner-search .form{height: 150px;
}.banner-search .form .line{padding-bottom: 9px;text-align: center;
}.banner-search .form .line select{width: 170px;font-size: 12px;z-index: 0;border: 1px solid #dcddd;height: 26px;line-height: 26px;padding: 2px 0;color: #666;
}.banner-search .submit{height: 32px;text-align: center;
}.banner-search .submit .button{width: 108px;height: 33px;background-color: #fecd09;font-size: 14px;color: #fff;border-radius: 3px;
}.banner-help{background-color: #FAFAFA;
}.banner-help .caption .text{color: #00b3ea;background-position: 0 -23px;
}.banner-help .link{color: #00B3EA;display: inline-block;width: 86px;height: 26px;line-height: 26px; font-size: 14px;text-align: center;padding: 0 0 8px 26px;
}/*#content 模块样式*/.content-news{background-color: #fff;border: 1px solid #f4f6fa;
}.content-close .caption,
.content-news .caption{height: 38px;line-height: 38px;background-color: #f4f6fa;text-indent: 20px;color: #FEC009;font-size: 15px;
}.content-close .more,
.content-news .more{float: right;padding-right: 22px;font-size: 12px;color: #868686;
}.content-close .list,
.content-news .list{padding: 15px 20px 13px 35px;line-height: 29px;font-size: 12px;background: url(../img/list-yellow.jpg) 17px 20px no-repeat;
}.content-close .list .link,
.content-news .list .link{display: block;color: #969696;
}.content-close{background-color: #fff;border: 1px solid #f4f6fa;
}.content-close .caption{color: #4ab4ed;
}.content-close .list{background-image:url(../img/list-blue.jpg);
}.content-tab{background: none;
}.content-tab .caption{height: 34px;line-height: 34px;background-color: #f5f6fa;
}.content-tab .caption .item{display: block;width: 112px;height: 34px;text-align: center;float: left;color: #00B3EA;
}.content-tab .caption .item_focus{background-color: #60bff2;color: #FFFFFF;
}.content-tab .block{border: 1px solid #F4F6FA;height: 452px;
}.content-tab .block-caption{height: 26px;line-height: 26px;padding: 8px;border-bottom: 1px solid #F4F6FA;
}.content-tab .block-caption-item{display: block;padding: 0 10px 0 10px;font-size: 12px;color: #4c4948;float: left;
}.content-tab .block-caption-item_focus{background-color: #60BFF2;color: #FFFFFF;
}.content-tab .block-content{padding: 16px 12px;
}.content-tab .block-content .block-more{display: block;line-height: 55px;text-align: center;color: #5084c4;font-size: 14px;
}/*医院列表-容器*/
.content-tab .block-content .block-list{}.content-tab .block-content .block-list .item{float: left;width: 216px;height: 102px;padding: 0 20px 10px 120px;position: relative;font-size: 12px;
}.content-tab .block-content .block-list .item img{width: 110px;height: 98px;position: absolute;left: 0;top: 0;
}.content-tab .block-content .block-list .item-name{color: #036eb7;font-size: 14px;line-height: 21px;padding-top: 13px;
}.content-tab .block-content .block-list .item-level{float: right;font-size: 12px;color: #979797;
}.content-tab .block-content .block-list .item-phone,
.content-tab .block-content .block-list .item-address{line-height: 18px;padding-bottom: 4px;color: #666;
}/*医院文案列表-容器*/
.content-tab .block-content .block-text-list{}.content-tab .block-content .block-text-list .item{display: block;width: 351px;height: 27px;font-size: 14px;color: #666;padding-top: 8px;float: left;border-bottom: 1px dashed #dcdddd;
}.content-tab .block-content .block-text-list .item:nth-child(2n){margin-left: 13px;
}.footer{line-height: 70px;text-align: center;font-size: 12px;color: #666666;
}
前端系列之实战(城市医院预约挂号平台2.基本样式编写)相关推荐
- 前端系列之实战(城市医院预约挂号平台3.UI组件)
大将生来胆气豪,腰横秋水雁翎刀,风吹橐鼓山河动,电闪旌旗日月高, 天上麒麟原有种,穴中蝼蚁岂能逃,太平待到归来日,朕与将军解战袍. 书接上文: 前端系列之实战(城市医院预约挂号平台2.基本样式编写) ...
- 基于JAVA+SpringBoot+MYSQL的医院预约挂号平台
后台管理端:基本资料>医院基本信息>医院医生基本信息预约管理>用户预约信息评论管理>评论列表前台用户端:医院搜索,医院列表,找医生,找科室,登录注册,提交预约信息等
- 2023最新SSM计算机毕业设计选题大全（附源码+LW）之java阳光学院校医院预约挂号平台32np3
对于即将毕业或者即将做课设的同学而言,由于经验的欠缺,面临的第一个难题就是选题,确定好题目之后便是开题报告,如果选题首先看自己学习那些技术,不同技术适合做不同的产品,比如自己会些简单的Java语言,会 ...
- java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw
java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw java毕业生设计医院预约挂号系统计算机源码+系统+mysql+调试部署+lw 本源码技术栈: 项目架构:B/S架构 开 ...
- 基于SSM+Layui实现医院预约挂号系统
项目编号:BS-YL-010 基于SSM的医院在线预约挂号平台.前端使用layui框架.分为管理员.医生.患者三个角色,功能完善.适合练习java web开发,也可以用作课程设计和毕业设计. 运行环境 ...
- JAVA医院预约挂号系统毕业设计 开题报告
本文给出的java毕业设计开题报告,仅供参考!(具体模板和要求按照自己学校给的要求修改) 选题目的和意义 目的:本课题主要目标是设计并能够实现一个基于web网页的医院预约挂号系统,整个网站项目使用了B ...
- Java+SSM+JSP实现医院预约挂号系统
文末获取源码 开发语言:Java 框架:ssm 技术:JSP JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:eclip ...
- 医院挂号小程序,预约挂号小程序,微信小程序医院预约挂号系统毕业设计作品
项目背景和意义 目的:本课题主要目标是设计并能够实现一个基于微信小程序医院预约挂号系统,前台用户使用小程序,后台管理使用基Java+MySql技术:通过后台设置医院信息.录入医院科室信息.录入医生信息 ...
- 基于SSM实现医院预约挂号系统
项目编号:BS-YL-003 数据库:mysql 开发工具: IDEA/ECLIPSE 语言:JAVA 框架:后台SSM,前端BootStrap 本系统使用SSM框架技术,实现病人在系统中进行医院的预 ...
最新文章
- when component is created twice - still no hint finally
- HTTP中302与301的区别以及在ASP.NET中如何实现
- 数据结构-动态查找树表与平衡二叉树 红黑树简单介绍
- web-13. 数组和字符串
- java用户角色权限管理 只显示姓_java权限管理与用户角色权限设计
- java公众号图片上传_调用微信公众号接口上传图片素材
- [Pytorch系列-24]：神经网络基础 - 单个无激活函数的神经元实现简单线性回归 - 1
- LidarSLAM（一）：NDT
- ArcEngine编辑模块——将线段按距离、按比例分割成N条线段
- Lpc1768 常见错误及解决方法
- 平均每个ICO项目存在5个高危漏洞，所有ICO移动应用都存在安全漏洞
- matlab 建模线性回归,MATLAB建模实现线性回归处理环境监测数据的探索及与EXCEL建模的对比...
- 用auto.js写了一个抖音点赞、关注的脚本
- 第30章 使用Spring发送E-mail（二）
- 类似微伴助手和快鲸scrm系统有哪些？
- 【Substance Designer】基础操作和节点学习记录
- 鹿晗是不是糊了？ | Alfred数据室
- 用java写一个企业微信打卡提示机器人
- idea下载插件的两种方式
- 语音识别中的傅里叶变化