Web前端期末大作业--响应式美女健身教练瑜伽馆网页设计（HTML+CSS+JavaScript+）实现_响应式网页设计作业(1)_粉色的健身房瑜伽馆网站响应式网页设计实例,应用html+css+js,应用 div、导航条、-CSDN博客

本文链接：https://blog.csdn.net/2401_84437982/article/details/138325239

瑜伽课程：

教练团队：

会馆环境：

联系我们：

主要源码结构：

一共接近20个静态页面

主要源码展示：

index.html

<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>
                                欢迎光临瑜伽馆，
                            </p>
                  
                                <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">
                </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>

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
}
#### 总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)



![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)



**前端面试题汇总**

![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)