<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/Main.css" target="_blank" rel="external nofollow" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<meta charset="utf-8" />
<title></title>
</head>
<style>
a#gongGongFuWu:link {
background-color: black;
}
a#gongGongFuWu:visited {
background-color: gray;
}
a#gongGongFuWu:hover {
background-color: yellow;
}
a#gongGongFuWu:active {
background-color: wheat;
}
</style>
<body id="body" style="background-color: gainsboro;margin: 0;border: none;padding: 0;">
<!--頂部的圖檔位置-->
<div id="imageTitle" style="margin: 0;border: none;padding:0;background-color: red;"></div>
<!--中間的div-->
<div id="div_big" style="height: 40%;background-color: white;margin: 0;border: none;padding: 0;position: relative;">
<!--中間區域實際有效的div-->
<div id="div_big1" style=" width: 60%; background-color: gainsboro;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;">
<!--将這個區域分為四塊-->
<!--每一塊中嵌套一個div，這個div中放置圖檔和文字-->
<!--左上角-->
<div id="left_top" style="width: 49.9%; background-color: white;position: relative;vertical-align: middle;">
<div id="div_item" style="width: 60%;margin: auto;padding: 0;display: table-cell;vertical-align: middle;text-align: center;
position: absolute;top: 0;left: 0;right: 0;bottom: 0;
">
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" style="margin: 0;padding: 0;">
<img src="img/fuwuwangdian_icon.png" style="margin: 0;padding: 0;" />
</a>
<p align="center" style="font-size: 24px;">服務網點</p>
</div>
</div>
<!--右上角-->
<div id="right_top" style=" background-color: white; width: 50%;position: absolute;right: 0;top: 0;margin: auto;vertical-align: middle;">
<div id="div_item1" style="width: 60%;margin: auto;padding: 0;display: table-cell;vertical-align: middle;text-align: center;
position: absolute;top: 0;left: 0;right: 0;bottom: 0;
">
<img src="img/weixintuiguang_icon.png" style="margin-left: 0;margin-right: 0;margin: auto;" />
<p align="center" style="font-size: 24px;">微信推廣</p>
</div>
</div>
<!--左下角-->
<div id="left_bottom" style=" background-color: white; width: 49.9%;position: absolute;bottom: 0;left: 0;margin: auto;vertical-align: middle;">
<div id="div_item2" style="width: 60%;margin: auto;padding: 0;display: table-cell;vertical-align: middle;text-align: center;
position: absolute;top: 0;left: 0;right: 0;bottom: 0;
">
<img src="img/zhencefagui_icon.png" style="margin-left: 0;margin-right: 0;margin: auto;" />
<p align="center" style="font-size: 24px;">政策法規</p>
</div>
</div>
<!--右下角-->
<div id="right_bottom" style=" background-color: white; width: 50%;position: absolute;bottom: 0;right: 0;margin: auto;vertical-align: middle;">
<div id="div_item3" style="width: 60%;margin: auto;padding: 0;display: table-cell;vertical-align: middle;text-align: center;
position: absolute;top: 0;left: 0;right: 0;bottom: 0;
">
<img src="img/tingdiangonggao_icon.png" style="margin-left: 0;margin-right: 0;margin: auto;" />
<p align="center" style="font-size: 24px;">停電公告</p>
</div>
</div>
</div>
</div>
<!--下方的跳轉按鈕部分-->
<div id="downloadDiv" style="margin-top: 10px;height: 50px;background-color: white;position: relative;">
<!--裡面包裹的實際區域-->
<div id="true_downLoadDiv" style="width: 75%;background-color: black; position: absolute;right: 0;top: 0;left: 0;bottom: 0;margin: auto;">
<!--這一部分還需要進行4等分-->
<!--官方連結-->
<div id="guangFangLianJie" style="width: 50%;background-color: yellow;position: absolute;left: 0;top: 0;margin: auto;">
<li style="font-size: 25px;">官方連結 </li>
</div>
<div id="dianEBao" style="width: 50%;background-color: yellowgreen;position: absolute;right: 0;top: 0;margin: auto;"></div>
<div id="to" style="width: 50%;background-color: burlywood;position: absolute;bottom: 0;left: 0;margin: auto;"></div>
<div id="zhangShangDianLi" style="width: 50%;background-color: cyan;position: absolute;right: 0;bottom: 0;margin: auto;"></div>
</div>
</div>
<!--服務熱線這一欄目-->
<p align="center" style="font-size: 30px; margin-top: 50px;"><a>服務熱線：</a> <b style="color: #e74249;">95598</b></p>
<p align="center" style="font-size: 28px; margin-top: 10px; color: gray;">www.sh.sgcc.com.cn</p>
<!--對position的解釋：如果是相對定位：relative,那麼設定的資料是參考該控件本來應該的位置進行偏移；如果是絕對定位，則是相對于周圍的控件或者邊界-->
<script type="text/javascript">
$(document).ready(function() {
var topImage = document.getElementById('imageTitle');
var wai = document.getElementById('div_big');
var nei = document.getElementById('div_big1');
var xuanxiang = document.getElementById('div_item');
var xuanxiang1 = document.getElementById('div_item1');
var xuanxiang2 = document.getElementById('div_item2');
var xuanxiang3 = document.getElementById('div_item3');
var heigh = $(window).height();
var width = $(window).width();
console.log('浏覽器的尺寸：' + width + "=" + heigh);
topImage.style.height = heigh * 0.3 + 'px';
wai.style.height = heigh * 0.35 + 'px';
nei.style.height = 0.3 * heigh + 'px';
var innerWidth = nei.style.width;
var left_top = document.getElementById('left_top');
left_top.style.height = 0.149 * heigh + 'px';
var right_top = document.getElementById('right_top');
right_top.style.height = 0.149 * heigh + 'px';
var left_bottom = document.getElementById('left_bottom');
left_bottom.style.height = 0.15 * heigh + 'px';
var right_bottom = document.getElementById('right_bottom');
right_bottom.style.height = 0.15 * heigh + 'px';
xuanxiang.style.height = 0.1 * heigh + 'px';
xuanxiang1.style.height = 0.1 * heigh + 'px';
xuanxiang2.style.height = 0.1 * heigh + 'px';
xuanxiang3.style.height = 0.1 * heigh + 'px';
var downloadDiv = document.getElementById('downloadDiv');
downloadDiv.style.height = 0.2 * heigh + 'px';
var true_downLoadDiv = document.getElementById('true_downLoadDiv');
true_downLoadDiv.style.height = 0.12 * heigh + 'px';
var guangFangLianJie = document.getElementById('guangFangLianJie');
guangFangLianJie.style.height = 0.06 * heigh + 'px';
var dianEBao = document.getElementById('dianEBao');
dianEBao.style.height = 0.06 * heigh + 'px';
var to = document.getElementById('to');
to.style.height = 0.06 * heigh + 'px';
var zhangShangDianLi = document.getElementById('zhangShangDianLi');
zhangShangDianLi.style.height = 0.06 * heigh + 'px';
});
</script>
</body>
</html>