C1任务04-计算机程序逻辑

u011626662

于 2021-08-07 18:05:47 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/u011626662/article/details/119489841

版权

C1-04
任务一：生成图片广告
问题1：用HTML+CSS＋JavaScript在页面正中生成一幅广告图片
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    #dpcq{
	width:800px;
	height:400px;
    position:absolute;
}
</style>
</head>
<body>
<div>
<img id="dpcq" src="dpcq.jpg">
</div>
</body>
<script type="text/javascript">
var div = document.getElementById("dpcq");
var window_width = document.documentElement.clientWidth;
var window_height = document.documentElement.clientHeight;
div.style.top = (window_height-400) / 2 + "px";
div.style.left = (window_width-800) / 2 + "px";
</script>
</html>

问题2：用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
    *{
	padding:0;
	margin:0;
}
    .dpcq{
	width:200px;
	height:100px;
	margin-top:100px;
	margin-left:65px;
	float:left;
}
</style>
</head>
<body>
<div>
<img class="dpcq" src="dpcq.jpg">
<img class="dpcq" src="dpcq.jpg">
<img class="dpcq" src="dpcq.jpg">
<img class="dpcq" src="dpcq.jpg">
<img class="dpcq" src="dpcq.jpg">
</div>
</body>
<script type="text/javascript">
var window_width = document.documentElement.clientWidth;
var div_s = document.getElementsByClassName("abc");
for (var i = 0; i < div_s.length; i++) {
	div_s[i].style.marginLeft = (window_width - div_s.length * div_s[i].offsetWidth) / (div_s.length + 1) + "px";
}
</script>
</html>