HTML5期末大作业：计算机社团设计--可随意更改名称，各个社团协会

已于 2023-02-20 19:53:44 修改
阅读量1k 收藏 12
点赞数 1
分类专栏： Html+Css+JavaScript期末大作业  web前端作业 文章标签： html5 css html
于 2022-06-24 12:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pandas23/article/details/125417455
版权

1.网页作品简介 ：

HTML期末大学生网页设计作业，社团协会网站设计，主要用于介绍社团，协会的网站，可以修改不同的名称，取名不同的社团设计，同时通过该代码可以学习HTML5的使用。

如下代码供学习交流，获取完整代码，请关注公众号（coding加油站）获取。

2、功能说明：

(1) 系统具有简洁大方的页面，使用简便，友好的错误操作提示

(2) 使用HTML+css等相关技术实现网站排版

(3) 轮播图的使用

(4) 相关社团的人员介绍

(5)社团的发展历史的介绍
(6) 社团组织架构图

3. 内容介绍：

《社团协会网站》共有7个页面，重点几个页面为

index.html【首页】

效果图

 核心代码：

 <nav id="site-nav" class="navbar navbar-fixed-top navbar-custom">
        <div class="container">
            <div class="navbar-header">

                <!-- logo -->
                <div class="site-branding">
                    <a class="logo" href="index.html">
                        
                        <!-- logo image  -->
                        <img src="assets/images/logo.png" alt="Logo">

                        XX协会社团 2022
                    </a>
                </div>

                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-items" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div><!-- /.navbar-header -->

            <div class="collapse navbar-collapse" id="navbar-items">
                <ul class="nav navbar-nav navbar-right">

                    <!-- navigation menu -->
                    <li class="active"><a href="/">关于协会</a></li>
                    <li><a href="./group.html">部门组织架构</a></li>
                    <li><a href="./photo.html">协会图库</a></li>
                    <li><a href="./history_activity.html">历届事件</a></li>
                    <li><a href="./history_member.html">历任成员</a></li>
                    <li><a href="./download.html">资源下载</a></li>

                </ul>
            </div>
        </div><!-- /.container -->
    </nav>

    <header id="site-header" class="site-header valign-center"> 
        <div class="intro">

            <h2>24,10月, 2022 / 协会官网重新焕然上线</h2>
            <h1>新的成员</h1>
            <p>你 &amp; 我</p>
            <a class="btn btn-white" data-scroll href="#registration">了解更多</a>
        
        </div>
    </header>

    <section id="facts" class="section bg-image-1 facts text-center">
        <div class="container">
            <div class="row">
                <div class="col-sm-3">

                    <i class="ion-ios-calendar"></i>
                    <h3>2022<br>10月</h3>

                </div>
                <div class="col-sm-3">

                    <i class="ion-ios-location"></i>
                    <h3>某某大学<br>地点</h3>

                </div>
                <div class="col-sm-3">

                    <i class="ion-pricetags"></i>
                    <h3>100+<br>新成员</h3>

                </div>
                <div class="col-sm-3">

                    <i class="ion-speakerphone"></i>
                    <h3>20+<br>理事会成员</h3>

                </div>
            </div><!-- row -->
        </div><!-- container -->
    </section>

    <section id="about" class="section about">
        <div class="container">
            <div class="row">
                <div class="col-sm-6">

                    <h3 class="section-title">关于协会</h3>

                    <p>我们是XX大学校级社团，成立于1998年，挂靠于浙师大数理信息学院.</p>

                    <figure>
                        <img alt="" class="img-responsive" src="assets/images/about-us.jpg">
                    </figure>

                </div><!-- /.col-sm-6 -->

                <div class="col-sm-6">

group.html【部门架构页】

主要代码：

            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-3.jpg"></figure>
                    <h4>扯淡動物#</h4><p>团支书</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>

                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-4.jpg"></figure>
                    <h4>天堂芝士</h4><p>顾问</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
        </div><!-- /.row -->
        <div class="row">
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-5.jpg"></figure>
                    <h4>沈佳rong？？？？？？？？</h4><p>学习部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-6.jpg"></figure>
                    <h4>哆啦元</h4><p>硬件部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-7.jpg"></figure>
                    <h4>❤24K💛纯💙帅💚95💜 🎉</h4><p>网络部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-8.jpg"></figure>
                    <h4>谁是谁的谁</h4><p>组织部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
        </div>
        <div class="row">
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-9.jpg"></figure>
                    <h4>✧(≖ ◡ ≖✿)</h4><p>宣传部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-10.jpg"></figure>
                    <h4>mystery。</h4><p>广告部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->
            <div class="col-md-3">
                <div class="speaker">
                    <figure><img alt="" class="img-responsive center-block" src="upload/avatar/avatar-11.jpg"></figure>
                    <h4>十戒颜童</h4><p>财务部部长</p>
                    <ul class="social-block">
                        <li><a href=""><i class="iconfont icon-wechat"></i></a></li>
                        <li><a href=""><i class="iconfont icon-3"></i></a></li>
                        <li><a href=""><i class="iconfont icon-weibo"></i></a></li>
                    </ul>
                </div><!-- /.speaker -->
            </div><!-- /.col-md-4 -->

history_member.html【历任成员页】

 主要代码：


<section id="faq" class="section faq">
    <div class="container">
        <div class="nav breadcrumb"><a href="/">关于协会</a> / <a href="">历任成员</a></div>
        <div class="row">
            <div class="col-md-12">
                <h3 class="section-title">历任成员</h3>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading1">
                            <h4 class="panel-title">
                                <a class="faq-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1"> 2022年届组织结构及理事会干事成员 </a>
                            </h4>
                        </div>

                        <div id="collapse1" class="panel-collapse" role="tabpanel" aria-labelledby="heading1">
                            <div class="panel-body">
                                <h3>组织结构</h3>
                                <p>会长 副会长 团支书 顾问
                                    <br/>部门：学习部 硬件部 网络部 组织部 宣传部 广告部 财务部</p>
                                <h3>理事会</h3>
                                <ul>
                                    <li>会长：XXX</li>
                                    <li>副会长：XX</li>
                                    <li>团支书：扯淡動物#</li>
                                    <li>顾问：天堂芝士</li>
                                    <li>学习部部长：沈佳RONG？？？？？？？？</li>
                                    <li>硬件部部长：哆啦元</li>
                                    <li>网络部部长：❤24K💛纯💙帅💚95💜 🎉</li>
                                    <li>组织部部长：谁是谁的谁</li>
                                    <li>宣传部部长：✧(≖ ◡ ≖✿)</li>
                                    <li>广告部部长：MYSTERY。</li>
                                    <li>财务部部长：十戒颜童</li>
                                </ul>
                                <h3>干事成员</h3>
                                <p>竹桃听花期 暗涌 倩 未央 Mr.Mrvica~ 可牛掰了 _Shine丶 南栀倾寒 我到哪里去，躲避你的灵 I'm Tiny Sun Shine、灿烂 薄的荷 你对她笑的那么暖* 越跳越高 ♍勿厔🔝🚩 旖旎 丨文乱 LING0000 秒.一 Wing_liii 静然 王珺 才豆豆$$$ 林玲的v店</p>
                            </div>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading" role="tab" id="heading2">
                            <h4 class="panel-title">
                                <a class="faq-toggle collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="true" aria-controls="collapse2"> 2015年届组织结构及理事会干事成员 </a>
                            </h4>
                        </div>

                        <div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
                            <div class="panel-body">
                                <h3>组织结构</h3>
                                <p>会长 副会长 团支书
                                    <br/>部门：待添加...</p>
                                <h3>理事会</h3>
                                <ul>
                                    <li>会长：邓布利刚刚好</li>
                                    <li>副会长：天堂芝士</li>
                                    <li>团支书：面无表情</li>

                                </ul>
                                <h3>干事成员</h3>
                                <p>待添加...</p>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

其他界面截图：

以上代码可以用来学习相关html等网页设计知识。获取完整代码关注公众号（coding加油站）领取。

coding加油站
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值