57.html+css+js网页设计实例/“企业”主题瑜伽馆介绍/web前端期末大作业/-CSDN博客

本文链接：https://blog.csdn.net/A240307/article/details/137357507

一、前言

本实例以“瑜伽馆”为主题设计，应用html+css+js，响应式网页、图片轮翻效果、视频、留言表单、搜索等，供大家参考。【关注作者|获取更多源码（2000+个Web案例源码）|优质文章】；您的支持是我创作的动力！【点赞收藏博文】，Web开发、课程设计、毕业设计有兴趣的联系我交流分享，3Q！

二、网页文件

三、网页效果

以下为网页正文（节选示例）：

四、代码展示

1.HTML

代码如下（节选示例）：

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
       <meta name="generator" content="" data-variable=",cn,10001,,10001,M1156015" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<title>高端大气响应式瑜伽健身会馆网站前端模板下载</title>
<meta name="keywords" content="高端大气,响应式,瑜伽,健身会馆,网站前端模板,模板下载" />
<meta name="description" content="高端大气响应式瑜伽健身会馆网站前端模板下载，全站完整版网页模板下载。" />
<meta name="author" content="js代码" />
<meta name="copyright" content="js代码" />
<link rel='stylesheet' href='css/index.css'>
</head>

<body class=" nav-header">

<header class="">
<div class="head-box">
<div class="container">
<div class="head-left">
<div class="head-left-wrapper">
<div class="head-left-slide">
<p>
欢迎光临瑜伽馆，微信号：YUJIA 关注有好礼哦！
</p>
<font>
<hr>
<a id="met-weixins">
<i class="fa fa-weixin" data-plugin="webuiPopover" data-trigger="hover"
data-animation="pop" data-placement='bottom' data-width='130' data-padding='0'
data-content="<img src='picture/weixin.jpg' alt='响应式塑身瑜伽馆瘦身培训类网站织梦模板(自适应手机端)' style='width: 120px;display:block;margin:auto;'>">
</i>
</a>
<hr>
<a href="#"
rel="nofollow">
<i class="fa fa-qq">
</i>
</a>
<hr>
<a href="#" rel="nofollow">
<i class="fa fa-weibo">
</i>
</a>
</font>
</div>
</div>
</div>
<div class="head-right">
<div class="head-other">
<b>
更多关注
<i class="caret">
</i>
</b>
<span>
<a class="bookmark" data-alert="加入收藏失败，请使用Ctrl+D进行添加">
<i class="fa fa-bookmark">
</i>
收藏本站
</a>
<hr />
<a href="#" title="在线留言">
<i class="fa fa-book">
</i>
在线留言
</a>
</span>
</div>
</div>
</div>
</div>
</header>
<nav class="navbar navbar-default met-nav " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle hamburger hamburger-close collapsed"
data-target="#navbar-default-collapse" data-toggle="collapse">
<span class="sr-only">
Toggle navigation
</span>
<span class="hamburger-bar">
</span>
</button>
<a href="#" class="navbar-brand navbar-logo vertical-align" title="响应式塑身瑜伽馆瘦身培训类网站织梦模板(自适应手机端)">
<h1 class='hide'>
响应式塑身瑜伽馆瘦身培训类网站织梦模板(自适应手机端)
</h1>
<div class="vertical-align-middle">
<img src="picture/logo.png" alt="响应式塑身瑜伽馆瘦身培训类网站织梦模板(自适应手机端)" title="响应式塑身瑜伽馆瘦身培训类网站织梦模板(自适应手机端)"
/>
</div>
</a>
<h2 class='hide'>
</h2>
</div>
<div class="collapse navbar-collapse navbar-collapse-toolbar" id="navbar-default-collapse">
<div class="navbar-right search-box">
<div class="search-button">
<i class="wb-search">
</i>
</div>
<div class="search-form">
<form name="formsearch" action="/plus/search.php">
<input type="hidden" name="kwtype" value="0" />
<input type="text" placeholder="请输入搜索关键词！" name="q" value="">
<button type="submit" class="wb-search">
</button>
</form>
</div>
</div>
<ul class="nav navbar-nav navbar-right navlist">
<li class="margin-right-20">
<a href="index.html" title="首页" class="link active">
首页
</a>
</li>
<li class="dropdown margin-right-20">
<a data-toggle="dropdown" data-hover="dropdown" aria-expanded="false"
class="dropdown-toggle link " href="about.html">
关于我们
<span class="caret">
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet">
<li>
<a href="about1.html" class="">
塑形美体
</a>
</li>
<li>
<a href="about2.html" class="">
经典纯粹
</a>
</li>
<li>
<a href="about3.html" class="">
理疗修复
</a>
</li>
<li>
<a href="about4.html" class="">
情绪释放
</a>
</li>
<li>
<a href="about5.html" class="">
职业老师
</a>
</li>
</ul>
</li>
<li class="dropdown margin-right-20">
<a data-toggle="dropdown" data-hover="dropdown" aria-expanded="false"
class="dropdown-toggle link " href="news.html">
新闻资讯
<span class="caret">
</span>
</a>
<ul class="dropdown-menu dropdown-menu-right bullet">
<li>
<a href="news1.html" class="">
会馆活动
</a>
</li>
<li>
<a href="news2.html" class="">
瑜伽资讯
</a>
</li>
<li>
<a href="news3.html" class="">
常见问题
</a>
</li>
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="course.html">
瑜伽课程
</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="team.html">
教练团队
</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="huanjing.html">
会馆环境
</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="contact.html">
联系我们
</a>
<ul style="display:none">
</ul>
</li>
<li class="dropdown margin-right-20">
<a class="link " href="message.html">
在线留言
</a>
<ul style="display:none">
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="met-banner" data-height='' style=''>
<div class="slick-slide">
<img class="cover-image" src="picture/1-1G1241633000-L.jpg" alt="十年瑜伽教育品牌">
<div class="banner-text p-1">
<div class='container'>
<div class='banner-text-con'>
<div>
<h4 class="animation-slide-top" style='color:#eeeeee'>
十年瑜伽教育品牌
</h4>
<p class="animation-slide-bottom animation-delay-300">
瑜伽像在时尚圈里工作
</p>
</div>
</div>
</div>
</div>
</div>
<div class="slick-slide">
<img class="cover-image" src="picture/1-1G1241632400-L.jpg" alt="梦想从这里起航">
<div class="banner-text p-2">
<div class='container'>
<div class='banner-text-con'>
<div>
<h4 class="animation-slide-top" style='color:#eeeeee'>
梦想从这里起航
</h4>
<p class="animation-slide-bottom animation-delay-300">
国际瑜伽教育培训基地
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="service-background">
<div class="container">
<div class="title-box">
<h2>
优秀服务
</h2>
<p>
缤纷瑜伽，人气登场，带你走进梦的殿堂；越练越健康，越练越美丽，越练越吸粉
</p>
</div>
<div class="row">
<div class="service-box">
<ul class="service-wraper">
<li class="service-slide">
<a href="#" title="塑形美体">
<b>
<img src="picture/fu.png">
<img class="icon" src="picture/1-1G124164UI26.png">
</b>
<h3>
塑形美体
</h3>
<p>
瑜伽练习中肌肉的收束与伸展，可以强化骨骼关节的灵活性，也会让身体更加柔韧，让人变得修长，塑造曲线。
</p>
</a>
</li>
<li class="service-slide">
<a href="#" title="经典纯粹">
<b>
<img src="picture/fu.png">
<img class="icon" src="picture/1-1G124164919517.png">
</b>
<h3>
经典纯粹
</h3>
<p>
经过五千年体位法的淬炼，瑜伽可以在传统中塑造经典；在经典中结合现代，让人人成为瑜伽的受益者。
</p>
</a>
</li>
<li class="service-slide">
<a href="#" title="理疗修复">
<b>
<img src="picture/fu.png">
<img class="icon" src="picture/1-1G1241A210Y0.png">
</b>
<h3>
理疗修复
</h3>
<p>
瑜伽用正位体式可逐渐去修复理疗受伤的关节与肌群，强化锻炼平时忽略的身体部位，让健康从内而外地散发。
</p>
</a>
</li>

......

2.CSS

代码如下（节选示例）：

html {
   font-family: sans-serif;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%
}
body {
   margin: 0
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
   display: block
}
audio, canvas, progress, video {
   display: inline-block;
   vertical-align: baseline
}
audio:not([controls]) {
   display: none;
   height: 0
}
[hidden], template {
display:none
}
a {
   background-color: transparent
}
a:active, a:hover {
   outline: 0
}
abbr[title] {
   border-bottom: 1px dotted
}
b, strong {
   font-weight: 700
}
dfn {
   font-style: italic
}
h1 {
   margin: .67em 0;
   font-size: 2em
}
mark {
   color: #000;
   background: #ff0
}
small {
   font-size: 80%
}
sub, sup {
   position: relative;
   font-size: 75%;
   line-height: 0;
   vertical-align: baseline
}
sup {
   top: -.5em
}
sub {
   bottom: -.25em
}
img {
   border: 0
}
svg:not(:root) {
   overflow: hidden
}
figure {
   margin: 1em 40px
}
hr {
   height: 0;
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box
}
pre {
   overflow: auto
}
code, kbd, pre, samp {
   font-family: monospace, monospace;
   font-size: 1em
}
button, input, optgroup, select, textarea {
   margin: 0;
   font: inherit;
   color: inherit
}
button {
   overflow: visible
}
button, select {
   text-transform: none
}
button, html input[type=button], input[type=reset], input[type=submit] {
   -webkit-appearance: button;
   cursor: pointer
}
button[disabled], html input[disabled] {
   cursor: default
}
button::-moz-focus-inner, input::-moz-focus-inner {
padding:0;
border:0
}
input {
   line-height: normal
}
input[type=checkbox], input[type=radio] {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   padding: 0
}
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
height:auto
}
input[type=search] {
   -webkit-box-sizing: content-box;
   -moz-box-sizing: content-box;
   box-sizing: content-box;
   -webkit-appearance: textfield
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
fieldset {
   padding: .35em .625em .75em;
   margin: 0 2px;
   border: 1px solid silver
}
legend {
   padding: 0;
   border: 0
}
textarea {
   overflow: auto
}
optgroup {
   font-weight: 700
}
table {
   border-spacing: 0;
   border-collapse: collapse
}
td, th {
   padding: 0
}
@media print {
*, :after, :before {
   color: #000!important;
   text-shadow: none!important;
   background: 0 0!important;
   -webkit-box-shadow: none!important;
   box-shadow: none!important
}
a, a:visited {
   text-decoration: underline
}
a[href]:after {
   content: " (" attr(href) ")"
}
abbr[title]:after {
   content: " (" attr(title) ")"
}
a[href^="javascript:"]:after, a[href^="#"]:after {
   content: ""
}
blockquote, pre {
   border: 1px solid #999;
   page-break-inside: avoid
}
thead {
   display: table-header-group
}
img, tr {
   page-break-inside: avoid
}
img {
   max-width: 100%!important
}
h2, h3, p {
   orphans: 3;
   widows: 3
}
h2, h3 {
   page-break-after: avoid
}
.navbar {
   display: none
}
.btn>.caret, .dropup>.btn>.caret {
   border-top-color: #000!important
}
.label {
   border: 1px solid #000
}
.table {
   border-collapse: collapse!important
}
.table td, .table th {
   background-color: #fff!important
}
.table-bordered td, .table-bordered th {
   border: 1px solid #ddd!important
}
}
* {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}
:after, :before {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box
}
html {
   font-size: 10px;
   -webkit-tap-highlight-color: rgba(0,0,0,0)
}
body {
   font-family: Roboto, sans-serif;
   font-size: 14px;
   line-height: 1.57142857;
   color: #76838f;
   background-color: #fff
}
button, input, select, textarea {
   font-family: inherit;
   font-size: inherit;
   line-height: inherit
}
a {
   color: #f06ca8;
   text-decoration: none
}
a:focus, a:hover {
   color: #89bceb;
   text-decoration: underline
}
a:focus {
   outline: thin dotted;
   outline: 5px auto -webkit-focus-ring-color;
   outline-offset: -2px
}

......

3.JS

代码如下（节选示例）：

var M=document.querySelector('meta[name="generator"]').getAttribute('data-variable'),D=M.split(',');M=new Array();M['weburl']=D[0];M['lang']=D[1];M['classnow']=parseInt(D[2]);M['id']=parseInt(D[3]);M['module']=parseInt(D[4]);M['tem']=D[0]+'templates/'+D[5];var deviceType = /iPad/.test(navigator.userAgent) ? 't' : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Silk/.test(navigator.userAgent) ? 'm' : 'd',is_ucbro=/UC/.test(navigator.userAgent);
/*jquery.min.js*/

......