| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title></title> | |
| <style type="text/css"> | |
| body{ | |
| background: url(img/a5.jpg) no-repeat; | |
| background-size: 100%; | |
| } | |
| *{ | |
| margin: 0 auto; | |
| padding: 0; | |
| } | |
| .baidu{ | |
| width: 800px; | |
| height: 800px; | |
| } | |
| .top{ | |
| margin: 0 auto; | |
| } | |
| nav { | |
| margin-top: 40px; | |
| width: 800px; | |
| height: 40px; | |
| } | |
| .middle_in{ | |
| float: left; | |
| width: 500px; | |
| height: 40px; | |
| } | |
| .img0{ | |
| width: 20px; | |
| height: 20px; | |
| position: relative; | |
| right: 50px; | |
| bottom: -10px; | |
| float: left; | |
| transition: all 2s linear; | |
| } | |
| .btn{ | |
| width: 200px; | |
| height: 40px; | |
| } | |
| .shang{ | |
| width: 500px; | |
| height: 30px; | |
| margin-top: 30px; | |
| background: red; | |
| padding: 30px; | |
| } | |
| .zhong{ | |
| width: 500px; | |
| height: 30px; | |
| margin-top: 30px; | |
| background: white; | |
| padding: 30px; | |
| transition: all 2s ease; | |
| } | |
| .xia{ | |
| width: 500px; | |
| height: 30px; | |
| margin-top: 30px; | |
| background: blue; | |
| padding: 30px; | |
| transition: all 2s ease; | |
| } | |
| .img1{ | |
| height: 80px; | |
| width: 80px; | |
| transition: all 2s ease; | |
| } | |
| .img2{ | |
| height: 80px; | |
| width: 80px; | |
| transition: all 2s ease; | |
| } | |
| .img3{ | |
| height: 80px; | |
| width: 80px; | |
| transition: all 2s ease; | |
| } | |
| .img4{ | |
| height: 80px; | |
| width: 80px; | |
| transition: all 2s ease; | |
| } | |
| .img1:hover{ | |
| transform: rotate(360deg); | |
| } | |
| .zhong:hover{ | |
| transform: rotate(360deg); | |
| } | |
| .xia:hover{ | |
| transform: rotate(-360deg); | |
| } | |
| .img2:hover{ | |
| transform: rotate(-360deg); | |
| } | |
| .img3:hover{ | |
| transform: scale(1.5); | |
| } | |
| .img4:hover{ | |
| transform: skew(0deg,50deg); | |
| } | |
| .img0:hover{ | |
| transform: scale(1.2); | |
| } | |
| .middle_in:hover{ | |
| transform: scale(1.5); | |
| } | |
| .btn:hover{ | |
| transform: scale(2); | |
| color: red; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="baidu"> | |
| <div class="top"> | |
| <img src="img/a.png"/> | |
| </div> | |
| <nav class="middle"> | |
| <input type="text" class="middle_in" /> | |
| <img src="img/a1.jpg"class="img0"/> | |
| <input type="button" value="百度一下" class="btn" /> | |
| </nav> | |
| <div class="botton"> | |
| <div class="shang"> | |
| <img src="img/a4.jpg"class="img3"/ > | |
| <img src="img/a4.jpg"class="img4"/ > | |
| </div> | |
| <div class="zhong"> | |
| <img src="img/a4.jpg"class="img1"/ > | |
| <img src="img/a4.jpg"class="img1"/ > | |
| </div> | |
| <div class="xia"> | |
| <img src="img/a4.jpg"class="img2"/ > | |
| <img src="img/a4.jpg"class="img2"/ > | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
扫一扫
4133
11-13
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
