bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
		<title>导航</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.bg{
				position: fixed;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.bg img{
				width: 100%;
				height: 100%;
			}
			.title{
				width: 70%;
				margin: 0 auto;
				/* margin-top: 8%; */
			}
			.list{
				padding: 0 2.6%;
				
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				
			}
			.list>a{
				width: 48.5%;
				/* float: left; */
				position: relative;
				display: block;
			}
			.list>a>img{
				height: 100%;
			}
			.list_main{
				position: absolute;
				font-weight: 400;
				color: #FFFFFF;
			    left: 24px; top: 21.59px; font-size: 16.8px;
			}
			.list_main span{
				opacity: .6;
			}
			.list_main p {
				opacity: .9;
			}
		</style>
	</head>
	<body>
		<div class="bg">
			<img src="../Content/phone/imgs/bg.png" alt="">
		</div>
		<div class="title">
			<img src="../Content/phone/imgs/title.png" alt="" width="100%">
		</div>
		<div class="list">
			<a style="margin-right: 3%;" class="list_child" href="/PhonePage/survey.html">
				<img src="../Content/phone/imgs/list_1.png" alt="" width="100%">
				<div class="list_main">
					<p>学校概况</p>
					<span>Go</span>
				</div>
			</a>
			<a class="list_child" href="/PhonePage/proDsc.html">
				<img src="../Content/phone/imgs/list_2.png" alt="" width="100%">
				<div class="list_main">
					<p>专业介绍</p>
					<span>Go</span>
				</div>
			</a>
			<a style="margin-right: 3%;" class="list_child" href="/PhonePage/schoolNewsList.html">
				<img src="../Content/phone/imgs/list_3.png" alt="" width="100%">
				<div class="list_main" style="color: #313131;">
					<p >学校新闻</p>
					<span>Go</span>
				</div>
			</a>
			<a class="list_child" href="/PhonePage/schoolSceneryList.html">
				<img src="../Content/phone/imgs/list_4.png" alt="" width="100%">
				<div class="list_main">
					<p>校园风光</p>
					<span>Go</span>
				</div>
			</a>
            <a class="list_child" style="width: 100%;" href="/PhonePage/newStudentGui.html">
                <img src="../Content/phone/imgs/list_botom.png" alt="" width="100%">
                <div class="list_main">
                    <p>新生指引</p>
                    <span>Go</span>
                </div>
            </a>
		</div>
		<script type="text/javascript">
			var pageHeight = window.screen.height
			var pageWidth = window.screen.width
			var title = document.getElementsByClassName('title')[0]
			var lists = document.getElementsByClassName('list_child')
			var list_main = document.getElementsByClassName('list_main')
			for(var i=0;i<lists.length;i++){
				lists[i].style.marginBottom = (pageHeight*0.02)+'px';
			}
			for(var i=0;i<list_main.length;i++){
				list_main[i].style.left = (pageWidth*0.06)+'px';
				list_main[i].style.top = (pageHeight*0.034)+'px';
				list_main[i].style.fontSize = (pageWidth*0.042)+'px';
			}
			title.style.marginTop=(pageHeight*0.059)+'px';
			title.style.marginBottom=(pageHeight*0.05)+'px';
		</script>
	</body>
</html>