寒假第10页作业

最新推荐文章于 2022-07-11 18:32:56 发布

liujia20001123

最新推荐文章于 2022-07-11 18:32:56 发布

阅读量587

点赞数

本文链接：https://blog.csdn.net/liujia20001123/article/details/87113025

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>带按钮的图片横幅广告</title>
		<style>
			.text1{
				border: 1px solid black;
				width: 20px;
				height: 20px;
				position: absolute;
				text-align: center;
			}
			img{
				width: 450px;
				height: 150px;
			}
			.text2{
				position: relative;
			}
			div div:nth-of-type(2){
				left:300px;
				bottom: 10px;
				background-color: white;
			}
			div div:nth-of-type(3){
				left:330px;
				bottom: 10px;
				background-color: white;
			}
			div div:nth-of-type(4){
				left:360px;
				bottom: 10px;
				background-color: white;
			}
			div div:nth-of-type(5){
				left:390px;
				bottom: 10px;
				background-color: white;
			}
			div div:nth-of-type(6){
				left:420px;
				bottom: 10px;
				background-color: white;
			}
			a{
				text-decoration: none;
			}
			a:hover{
				background-color:red;
			}
			p{
				color: red;
				font-size: 50px;
			}
		</style>
	</head>
	<body>
		<div class="text2">
			<p>千万不要点数字!</p>
			<div><img src="img/adver-01.jpg"/></div>
			<div class="text1"><a href="text3.html">1</a></div>
			<div class="text1"><a href="text3.html">2</a></div>
			<div class="text1"><a href="text3.html">3</a></div>
			<div class="text1"><a href="text3.html">4</a></div>
			<div class="text1"><a href="text3.html">5</a></div>
		</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>奖多多安全购彩页面</title>
		<style>
			.text2{ 
				width: 1012px;
				margin: 0px auto;
				position: relative;
			}
			div img:nth-of-type(2){
				position: absolute;
				right: 250px;
				bottom: 200px;
			}
			div img:nth-of-type(3){
				position: absolute;
				left: 250px;
				bottom: 200px;
			}
			div img:nth-of-type(4){
				position:fixed;
				right: 0px;
				top: 300px;
			}
			div img:nth-of-type(5){
				position: fixed;
				right: 0px;
				bottom:0px;
			}
		</style>
	</head>
	<body>
		
		<div class="text2">
			<img src="img/1.bmp"/>
			<img src="img/2.bmp"/>
			<img src="img/3.bmp"/>
			<img src="img/4.bmp"/>
			<img src="img/5.bmp"/>
		</div>
	</body>
</html>