项目演示视频：
html大学社团音乐社团主题网页源码（获取地址见详情）
部分代码演示：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>爱E乐团</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bl-css.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="aos/dist/aos.css" rel="stylesheet">
</head>
<body>
<div class="bl-header container-fluid">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bl-nav">
<a class="nav-prand" href="bl-first-index.html">爱E乐团</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a href="index.html">首页 <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a href="bl-about.html"">小常识</a>
</li>
<li class="nav-item">
<a href="pictures.html">日常剪影</a>
</li>
<li class="nav-item">
<a href="bl-about2.html">招新入口</a>
</li>
<li class="nav-item">
<a href="shiwu.html">团内事务</a>
</li>
<li class="nav-item">
<a href="connect.html">联系我们</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<div class="bl-bgclor container-fluid">
<div class="bl-banner container">
<p>杭州电子科技大学大学生艺术团爱E乐团</p>
<div class="jpress-img" data-aos="fade-up"><img src="img/bg.jpg" /></div>
</div>
</div>
<div class="container bl-card">
<h3 class="bl-card-title">关于我们</h3>
<div class="row product-box-body">
<div class="col-md-6 col-sm-12 product-box-left product-box-image" data-aos="zoom-in">
<img class="card-img-left" src="img/img1.jpg" alt="Card image cap" />
</div>
<div class="col-md-6 col-sm-12 product-box-right product-box-content" data-aos="fade-left">
<h3 class="card-title">自我介绍</h3>
<p>杭州电子科技大学西洋乐队成立于2012年，隶属于校大学生艺术团，于2019年11月8日正式更名为爱E乐团。自建队以来，在校方领导和团委老师的大力支持和同学们的不断努力下，队伍不断扩大，现有弦乐、木管、铜管等多种乐器，现役队员40多名，已发展成为校艺术团的核心队伍之一。
</p>
</div>
</div>
<div class="row product-box-body bl-active">
<div class="col-md-6 col-sm-12 product-box-left product-box-content" data-aos="fade-left" data-aos-offset="100">
<h3 class="card-title">获奖经历</h3>
<p>2013年《查尔达什》获浙江省大学生艺术节一等奖</p>
<p>2014年《第二圆舞曲》 获省大艺节三等奖</p>
<p>2015年《夏》获省大艺节一等奖，《自由探戈》获大艺节二等奖</p>
<p>2017年《匈牙利舞曲第六号》获省大艺节一等奖</p>
<p>2018年《角鲨》和《骷髅之舞》获省大艺节2项一等奖</p>
<p>2020年《萨丽哈》《singsingsing》获得省大艺节2项一等奖</p>
</div>
<div class="col-md-6 col-sm-12 product-box-right product-box-image" data-aos="zoom-in" data-aos-offset="100">
<img class="card-img-left" src="img/img2.jpg" alt="Card image cap" />
</div>
</div>
<h3 class="bl-card-title">关于我们</h3>
<div class="row product-box-body">
<div class="col-md-6 col-sm-12 product-box-left product-box-image" data-aos="zoom-in">
<img class="card-img-left" src="img/img1.jpg" alt="Card image cap" />
</div>
<div class="col-md-6 col-sm-12 product-box-right product-box-content" data-aos="fade-left">
<h3 class="card-title">自我介绍</h3>
<p>杭州电子科技大学西洋乐队成立于2012年，隶属于校大学生艺术团，于2019年11月8日正式更名为爱E乐团。自建队以来，在校方领导和团委老师的大力支持和同学们的不断努力下，队伍不断扩大，现有弦乐、木管、铜管等多种乐器，现役队员40多名，已发展成为校艺术团的核心队伍之一。
</p>
</div>
</div>
<div class="row product-box-body bl-active">
<div class="col-md-6 col-sm-12 product-box-left product-box-content" data-aos="fade-left" data-aos-offset="100">
<h3 class="card-title">获奖经历</h3>
<p>2013年《查尔达什》获浙江省大学生艺术节一等奖</p>
<p>2014年《第二圆舞曲》 获省大艺节三等奖</p>
<p>2015年《夏》获省大艺节一等奖，《自由探戈》获大艺节二等奖</p>
<p>2017年《匈牙利舞曲第六号》获省大艺节一等奖</p>
<p>2018年《角鲨》和《骷髅之舞》获省大艺节2项一等奖</p>
<p>2020年《萨丽哈》《singsingsing》获得省大艺节2项一等奖</p>
</div>
<div class="col-md-6 col-sm-12 product-box-right product-box-image" data-aos="zoom-in" data-aos-offset="100">
<img class="card-img-left" src="img/img2.jpg" alt="Card image cap" />
</div>
</div>
</div>
<div class="container">
<h3 class="bl-card-title">团队风采</h3>
<div class="card-deck text-center" data-aos="fade-left">
<div class="card">
<div class="card-img-top"><img src="img/img13.jpg" alt=""></div>
<div class="card-body">
<h3 class="card-title">团队</h3>
<p class="card-text"><small class="text-muted">团队合影</small></p>
</div>
</div>
<div class="card">
<div class="card-img-top"><img src="img/img13.jpg" alt=""></div>
<div class="card-body">
<h3 class="card-title">团队</h3>
<p class="card-text"><small class="text-muted">团队合影</small></p>
</div>
</div>
<div class="card">
<div class="card-img-top"><img src="img/img13.jpg" alt=""></div>
<div class="card-body">
<h3 class="card-title">团队</h3>
<p class="card-text"><small class="text-muted">团队合影</small></p>
</div>
</div>
<div class="card">
<div class="card-img-top"><img src="img/img13.jpg" alt=""></div>
<div class="card-body">
<h3 class="card-title">团队</h3>
<p class="card-text"><small class="text-muted">团队合影</small></p>
</div>
</div>
</div>
</div>
<div class="container">
<h3 class="bl-card-title">团队成员说</h3>
<div class="card-deck" data-aos="fade-right">
<div class="card">
<div class="card-body">
在这个社团中，在学长学姐身上学到很多东西
</div>
<div class="card-body">
<h3 class="card-title">马保国</h3>
<p class="card-text"><small class="text-muted">20级美院学生</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
在这个社团中，在学长学姐身上学到很多东西
</div>
<div class="card-body">
<h3 class="card-title">马保国</h3>
<p class="card-text"><small class="text-muted">20级美院学生</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
在这个社团中，在学长学姐身上学到很多东西
</div>
<div class="card-body">
<h3 class="card-title">马保国</h3>
<p class="card-text"><small class="text-muted">20级美院学生</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
在这个社团中，在学长学姐身上学到很多东西
</div>
<div class="card-body">
<h3 class="card-title">马保国</h3>
<p class="card-text"><small class="text-muted">20级美院学生</small></p>
</div>
</div>
</div>
</div>
<div class="bl-footer container-fluid">
<div class="container">
<ul class="bl-footer-list">
<li class="bl-footer-item">
<a href="#">加入我们</a>
</li>
<li class="bl-footer-item">
<a href="#">地址：杭州电子科技大学艺术楼</a>
</li>
<li class="bl-footer-item">
<a href="#">联系方式QQ：1417662982</a>
</li>
</ul>
<div class="copyright">copyright @ 杭州电子科技大学大学生艺术团爱E乐团</div>
</div>
</div>
<script src="jquery/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="aos/dist/aos.js"></script>
<script>
AOS. init();
</script >
</body>
</html>
扫一扫
1879
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
