<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/Main.css" />
<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" 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');
/*中间田子按钮部分的外层和内存div*/
var wai = document.getElementById('div_big');
var nei = document.getElementById('div_big1');
/*中间的四个选项,注意不是包含选项的div*/
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;
/*内部区域的尺寸是0.36H */
/*下面是包含选项的div的尺寸*/
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';
/*下面的是官方链接,电E宝等*/
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>
<html>
<head>
<link rel="stylesheet" href="css/Main.css" />
<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" 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');
/*中间田子按钮部分的外层和内存div*/
var wai = document.getElementById('div_big');
var nei = document.getElementById('div_big1');
/*中间的四个选项,注意不是包含选项的div*/
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;
/*内部区域的尺寸是0.36H */
/*下面是包含选项的div的尺寸*/
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';
/*下面的是官方链接,电E宝等*/
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>