HTML：百度首页

最新推荐文章于 2024-02-02 16:50:05 发布

原创最新推荐文章于 2024-02-02 16:50:05 发布 · 337 阅读

0 ·

CC 4.0 BY-SA版权

HTML 专栏收录该内容

20 篇文章

订阅专栏

	<head>
		<meta charset="utf-8" />
		<title>名字</title>
		<style>
			.img {
				width: 270px;
				height: 129px;
			}
			
			.haha {
				width: 500px;
				height: 30px;
				margin-top: 50px;
				position: relative;
				/*相对定位*/
			}
			
			.input {
				width: 300px;
				height: 30px;
				border: 1 solid blue;
			}
			
			.a {
				width: 80px;
				height: 35px;
				background-color: blue;
				color: #fff;
				text-decoration: none;
			}
			
			.photo {
				position: absolute;
				/*绝对定位*/
				margin-top: 9px;
				margin-left: -30px;
				width: 24px;
				height: 24px;
				background: url(images/haha.png) no-repeat;
			}
			
			.input:hover {
				transform: scale(1.5);
			}
			
			.a:hover {
				transform: scale(1.2);
				color: red;
			}
			
			.photo:hover {
				transform: scale(1.2);
			}
			.qingxie:hover {
				transform: skew(50deg);
			}
			img {
				width: 100px;
				height: 100px;
			}
			
			#first {
				width: 600px;
				margin-top: 100px;
			}
			/*#first:hover{
transform:rotate(360deg);
transition:2s;
}*/
			
			#first .img1:hover {
				transform: rotate(360deg);
				transition: 1s;
			}
			
			#second .img2:hover {
				transform: rotate(-360deg);
				transition: 1s;
			}
			
			#bianda:hover {
				transform: scale(1.5);
			}
			/*#second:hover{
transform:rotate(-360deg);
transition:2s;
}*/
			
			#qingxie:hover {
				transform: skew(-50deg);
			}
			
		</style>
	</head>

	<body style="background:url(images/bj.jpg) no-repeat; background-size:cover">
		<center>
			<img class="img" src="img/bd_logo1.png" /><br />
			<div class="haha">
				<input class="input" />
				<span class="photo"></span>
				<button href="#" class="a">百度一下</button>
			</div>

			<div id="first">
				<img src="images/999_07.jpg" class="img1" />
				<img src="images/999_09.jpg" />
				<img src="images/999_11.jpg" />
				<img src="images/999_13.jpg" />
				<img src="images/999_15.jpg"  class="qingxie"/>
			</div>

			<div id="second">
				<img src="images/999_17.jpg" class="img2" />
				<img src="images/999_22.jpg" />
				<img src="images/999_23.jpg" id="bianda" />
				<img src="images/999_24.jpg" />
				<img src="images/999_25.jpg" id="qingxie" />
			</div>
		</center>
	</body>