master

分支 (1)

管理

管理

master

YangZhiYi
/
news.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>新闻动态</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="format-detection" content="telephone=no">
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/news.css" />
	</head>

	<body>
		<div id="header"></div>
		<div id="body">
			<div class="banner">
				<img src="img/newsbanner.jpg"/>
			</div>

			<div class="news-message">
				<div class="container news-message-box">
					<div class="new-title">
						<p>最新资讯</p>
						<p>new　information</p>
					</div>
					<div class="across-row row">
						<div class="col-xs-10 col-sm-3 col-md-3">
							<img class="imgone" src="img/jour_new_a.png"/>
							<div class="mintitle">
								<h4>音乐演唱会</h4>
								<p>音乐是人类的精神粮食，所以大家一起asdfsadfsadfsafsfasdfasfasfasdf</p>
							</div>
						</div>
						<div class="col-xs-10 col-sm-3 col-md-3">
							<img class="imgone" src="img/jour_new_b.png"/>
							<div class="mintitle">
								<h4>架子鼓培训</h4>
								<p>音乐是人类的精神粮食，所以大家一起</p>
							</div>
						</div>
						<div class="col-xs-10 col-sm-3 col-md-3">
							<img class="imgone" src="img/jour_new_c.png"/>
							<div class="mintitle">
								<h4>钢琴一级</h4>
								<p>音乐是人类的精神粮食，所以大家一起</p>
							</div>
						</div>
					</div>
					<div class="vertical-row row">
						<div class="col-sm-1 col-lg-1 col-md-1 col-xs-1"></div>
						<div class="vertical-row-line vertical-row-one col-sm-10 col-lg-10 col-md-10 col-xs-12 imgone">
							<img class="pull-left" src="img/bjour_new_d.png"/>
							<!--<div class="pull-right">-->
								<!--<h5>学习音乐小技巧</h5>-->
								<!--<p>想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好</p>-->
							<!--</div>-->
							<h3>学习音乐的小技巧</h3>
							<p>想要唱好一首歌曲，首先选歌要选适合自己的，不要有特殊高音或低音或者太快太慢，因为这样的歌曲对于不专业的人有一定难度，那么我们就选择一首自己听起来舒服，而且好学习的歌曲</p>
						</div>
						<div class="col-sm-1 col-lg-1 col-md-1 col-xs-1"></div>
					</div>
					<div class="vertical-row row">
						<div class="col-sm-1 col-lg-1 col-md-1 col-xs-1"></div>
						<div class="vertical-row-line vertical-row-two col-sm-10 col-lg-10 col-md-10 col-xs-12 imgone">
							<img class="pull-left" src="img/journalism/jour_new_e.png"/>
							<!--<div class="pull-right">-->
								<!--<h5>学习音乐小技巧</h5>-->
								<!--<p>想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好想要歌曲唱得好</p>-->
							<!--</div>-->
							<h3>学习音乐的小技巧</h3>
							<p>想要唱好一首歌曲，首先选歌要选适合自己的，不要有特殊高音或低音或者太快太慢，因为这样的歌曲对于不专业的人有一定难度，那么我们就选择一首自己听起来舒服，而且好学习的歌曲</p>
						</div>
						<div class="col-sm-1 col-lg-1 col-md-1 col-xs-1"></div>
					</div>
					<input class="btn pull-right more" type="button" name="" id="" value="更多" />
				</div>
			</div>

			<div class="container swiper_item item">
				<div class="swiper-container">
					<div class="title">
						<h4>精彩记录</h4>
						<p>nderful moments</p>
					</div>
					<div class="swiper-wrapper">
						<div class="swiper-slide">
							<div class="list">
								<img src="img/photos-1.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-2.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-3.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-4.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-5.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-6.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-7.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-8.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-9.jpg"/>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="list">
								<img src="img/photos-10.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-11.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-12.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-13.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-14.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-15.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-16.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-17.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-1.jpg"/>
							</div>
						</div>
						<div class="swiper-slide">
							<div class="list">
								<img src="img/journalism/jour_record_a.png"/>
							</div>
							<div class="list">
								<img src="img/journalism/jour_record_b.png"/>
							</div>
							<div class="list">
								<img src="img/journalism/jour_record_e.png"/>
							</div>
							<div class="list">
								<img src="img/course/ph_class_a.png"/>
							</div>
							<div class="list">
								<img src="img/photos-19.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-20.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-21.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-6.jpg"/>
							</div>
							<div class="list">
								<img src="img/photos-10.jpg"/>
							</div>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>
		<div id="footer"></div>
	</body>
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/swiper-3.4.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$("#header").load("template/header.temp.html", function() {
				act($("#header #btnList1 li a"));
				$("#header #btnList1 li a").eq(3).addClass("Act");
				act($("#header #btnList2 li a"));
				$("#header #btnList2 li a").eq(3).addClass("Act");

			});

			function act(ele) {
				for(var i = 0, l = ele.length; i < l; i++) {
					ele.eq(i).removeClass("Act");
				}
			}
			$("#footer").load("template/footer.temp.html");
		})
		var mySwiper = new Swiper('.swiper-container', {
			autoplay:5000,
			pagination: '.swiper-pagination',
			loop: true,
//			effect: 'flip',
//			cube: {
//				shadow: false,
//			},
			flip: {
            	slideShadows :true,
            	limitRotation :true,
        	},
			paginationClickable: true,
		})


		$('.imgone').each(function(){
			$(this).click(function(){
				window.location.href = 'newsdetails.html'
			})
		})
	</script>

</html>