0
点赞
收藏
分享

微信扫一扫

Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）

三维控件研究 2022-01-26 阅读 83
javascripthtml健身网页期末大作业Javaweb前端



???? 作者主页：​​Java李杨勇 ​​


???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我，都给你】

???? 文末获取源码联系 ????



 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。

常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、  文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的电竞博客网页制作，画面精明，非常适合初学者学习使用。



  B站视频演示： ​​Web前端期末大作业--个人日志博客网页设计.mp4​​



网页实现截图：文末获取源码联系


网站首页： 

Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_web前端

健身好处： 

Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_javascript_02

教练介绍： 

Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_web前端_03

 Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_web前端_04

 Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_html_05

 价格介绍：Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_javascript_06

联系我们： 

Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_Java_07


项目组织结构：


Web前端期末大作业--响应式有氧健身休闲会所网页设计（HTML+CSS+JavaScript）_html_08


主要源码展示：


index.html

<section id="our-team">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">
                    OUR TRAINERS
                </h2>
                <p class="wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa <br> semper aliquam quis mattis quam.</p>
            </div>


            <div class="row text-center">
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="0ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/01.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Micky Deo</h3>
                            <span>Founder</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="100ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/02.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Mike Timobbs</h3>
                            <span>Sr. Trainer</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="200ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/03.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Remo Silvaus</h3>
                            <span>Sr. Trainer</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6 col-xs-12">
                    <div class="team-member wow fadeInUp" data-wow-duration="400ms" data-wow-delay="300ms">
                        <div class="team-img">
                            <img class="img-responsive" src="images/team/04.jpg" alt="">
                        </div>
                        <div class="team-info">
                            <h3>Niscal Deon</h3>
                            <span>Jr. Trainer</span>
                        </div>
                        <ul class="social-icons">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </section>
    <!--/#our-team-->

    <section id="portfolio">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title wow fadeInDown">Gallery</h2>
                <p class="wow fadeInDown">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget risus vitae massa <br> semper aliquam quis mattis quam.</p>
            </div>

            <div class="text-center">
                <ul class="portfolio-filter" style="display:none">
                    <li><a class="active" href="#" data-filter="*">All Works</a></li>
                    <li><a href="#" data-filter=".designing">Designing</a></li>
                    <li><a href="#" data-filter=".mobile">Mobile App</a></li>
                    <li><a href="#" data-filter=".development">Development</a></li>
                </ul>
                <!--/#portfolio-filter-->
            </div>

            <div class="portfolio-items">
                <div class="portfolio-item designing">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/01.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/01.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile development">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/02.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/02.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/03.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/03.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/04.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/04.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/05.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/05.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/06.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/06.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item designing development">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/07.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/07.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->

                <div class="portfolio-item mobile">
                    <div class="portfolio-item-inner">
                        <img class="img-responsive" src="images/portfolio/08.jpg" alt="">
                        <div class="portfolio-info">
                            <a class="preview" href="images/portfolio/08.jpg" rel="prettyPhoto"><i class="fa fa-eye"></i></a>
                        </div>
                    </div>
                </div>
                <!--/.portfolio-item-->
            </div>
        </div>
        <!--/.container-->
    </section>

style.css

body {
    padding-top: 100px;
    background: #fff;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    color: #282828;
    line-height: 26px;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: 'Raleway', sans-serif;
}

a {
    color: #45aed6;
    -webkit-transition: color 400ms, background-color 400ms;
    -moz-transition: color 400ms, background-color 400ms;
    -o-transition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #2a95be;
}

hr {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #fff;
}

.gradiant {
    background-image: -moz-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(90deg, #2caab3 0%, #2c8cb3 100%);
}

.gradiant-horizontal {
    background-image: -moz-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -webkit-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
    background-image: -ms-linear-gradient(4deg, #2caab3 0%, #2c8cb3 100%);
}

.section-header {
    margin-bottom: 50px;
}

作品来自于网络收集、侵权立删 


获取完整源码：


举报

相关推荐

Web前端期末大作业--响应式少儿舞蹈网页设计(HTML+CSS+JavaScript)实现

webviewhtmljavascript前端大作业web课程设计OpenStack云计算

web前端期末大作业--响应式汽车租赁网页设计--（HTML+CSS+JavaScript）实现

javascripthtml5javaweb前端网页设计汽车租赁网页设计

web前端大作业-健康生活健身馆响应式网页模板(HTML+CSS+JavaScript)

前端javascript生活

Web前端期末大作业--响应式个人日志博客网页设计（HTML+CSS+JavaScript）实现

javascripthtmlJavaWeb个人日志博客网页设计期末大作业

Web前端大作业—个人网页(html+css+javascript)

前端javascripthtml

【网页设计】web前端期末大作业html+css

htmlcss文件包含HTML5移动开发

HTML期末学生大作业 响应式动漫网页作业 html+css+javascript (1)

csshtmlhtml静态网页作业html期末网页作业javascript系统/运维

web前端期末大作业：个人网站设计——响应式个人小站网站HTML+CSS+JavaScript

dreamweaverweb前端大作业网页设计与制作webhtml编程语言

web前端期末大作业--绿色畜牧业肉食网页设计（HTML+CSS+JavaScript）实现

javascripthtmljava前端期末大作业绿色畜牧业肉食网页模板

web前端期末大作业 html+css+javascript网页设计实例 宠物狗网站制作

前端javascripthtmlcssweb系统/运维
0 条评论