任务1-1生成图片广告
在浏览器最中间生成一张广告图片,占浏览器最中间的部分
先建立一个图片模块,将图片导入到浏览器中(其中导入CSS文件的代码被我注释掉了)
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="C1准备任务.CSS"> -->
<title>广告标签</title>
</head>
<body>
<div class="adv">
<img src="index.jpg" alt="广告图">
</div>
</body>
</html>
效果图(这是缩放了50%的图片)
之后在用CSS定义下这一模块,使他可以在正中间显示,并且随着浏览器的大小而改动
效果图
CSS中的具体代码,用div的设置即可
@charset "utf-8";
.adv {
border: red 10px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
img {
max-width: 100%;
height: auto;
}
注:在html文件中要导入CSS文件,并且在div标签的定义中要定义为同一组的数据。
1-2用js数组,在同一浏览器上放置多张图片,并且动态计算不同广告之间的布局,实现等距广告布局
。。。。。
因为已经通过考试,任务夭折