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

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加油站）回复“社团”领取。