temp1

最新推荐文章于 2022-06-03 11:26:21 发布

石博

最新推荐文章于 2022-06-03 11:26:21 发布

阅读量471

点赞数

本文链接：https://blog.csdn.net/shb2058/article/details/79222283

版权

<!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 id="div_big" style="height: 40%;background-color: white;margin: 0;border: none;padding: 0;position: relative;">

<div id="div_big1" style=" width: 60%; background-color: gainsboro;margin: auto;position: absolute;top: 0;left: 0;bottom: 0;right: 0;">





<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;">



<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>


<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>

石博

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
temp1

a#gongGongFuWu:link {background-color: black;}/* 未访问链接 */a#gongGongFuWu:visited {background-color: gray;}/* 已访问链接 */a#gongGongFuWu:hover {background-color: yellow;}/* 鼠标移动到链接
复制链接

扫一扫