HTML百度首页

最新推荐文章于 2022-06-21 19:19:32 发布

墨明棋妙呀

最新推荐文章于 2022-06-21 19:19:32 发布

阅读量591

点赞数

本文链接：https://blog.csdn.net/Wangmengyao1115/article/details/78450908

版权

<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(haha.png) no-repeat;
}
.input:hover{
transform:scale(1.5);
}
.a:hover{
transform:scale(1.2);
color:red;
}
.photo:hover{
transform:scale(1.2);
}

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;
}
#qingxie:hover{
transform:skew(-50deg);
}
</style>
</head>

<body>
<center>
<img class="img" src="logo.png"/><br />
<div class="haha">
<input class="input" />
<span class="photo"></span>
<button href="#" class="a">百度一下</button>
</div>

<div id="first">
<img src="Camera Roll/weijuchiluntu.jpg" class="img1" />
<img src="Camera Roll/banquantupian801.png" />
<img src="Camera Roll/bizhi112.png" />
<img src="Camera Roll/duoroubanqq.jpg" />
<img src="Camera Roll/fengjingxiaotu.jpg" />
</div>

<div id="second">
<img src="Camera Roll/weijuchiluntu.jpg" id="qingxie"/>
<img src="Camera Roll/banquantupian801.png" />
<img src="Camera Roll/bizhi112.png" />
<img src="Camera Roll/duoroubanqq.jpg" />
<img src="Camera Roll/fengjingxiaotu.jpg" />
</div>
</center>
</body>