<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background-image: url(images/jx3.jpg); background-size: cover; } .big{ width: 810px; margin: 0 auto; } .bd{ margin-bottom: 50px; } .main{ width: 624px; height: 137px; margin: 0 auto; margin-top: 70px; text-align: center; } .ssk{ width: 624px; height: 40px; background-color: white; } .kk{ width: 481px; height: 38px; border: none; outline: none; float: left; font-size: 18px; padding-left: 9px; transition: all 0.8s; } .kk:hover{ transform: scale(1.5); } .xj{ float: left; margin-top: 13px; transition: all 0.8s; } .xj:hover{ transform: scale(1.5); } .ss{ margin-left: 11px; background-color: #3388ff; border: none; width: 104px; height: 40px; font-size: 14px; color: white; transition: all 0.8s; } .ss:hover{ color: red; transform: scale(2); } .tb{ width: 810px; height: 300px; margin-top: 152px; } .a1{ width: 150px; height: 135px; border: 10px solid rgba(200,200,200,0.2); float: left; } .a2{ width: 150px; height: 135px; border-top: 10px solid rgba(200,200,200,0.2); border-right: 10px solid rgba(200,200,200,0.2); border-bottom: 10px solid rgba(200,200,200,0.2); float: left; } .a3{ width: 150px; height: 135px; border-left: 10px solid rgba(200,200,200,0.2); border-right: 10px solid rgba(200,200,200,0.2); border-bottom: 10px solid rgba(200,200,200,0.2); float: left; } .a4{ width: 150px; height: 135px; border-right: 10px solid rgba(200,200,200,0.2); border-bottom: 10px solid rgba(200,200,200,0.2); float: left; } #b1{ transition: all 0.8s; } #b1:hover{ transform: rotate(360deg); } #b6{ transition: all 0.8s; } #b6:hover{ transform: rotate(360deg); } #b8{ transition: all 0.8s; } #b8:hover{ transform: scale(1.5); } #b9{ transition: all 0.8s; } #b9:hover{ transform: rotate(90deg); } </style> </head> <body> <div class="big"> <div class="main"> <img class="bd" src="images/images/bdtp_03.gif"/> <div class="ssk"> <input type="text" class="kk" placeholder="请输入搜索内容" /> <img class="xj" src="images/图片2_07.gif"/> <input class="ss" type="button" value="百度一下" /> </div> </div> <div class="tb"> <div class="a1" id="b1"><img src="images/图片2_11.gif"/></div> <div class="a2" id="b2"><img src="images/图片2_13.gif"/></div> <div class="a2" id="b3"><img src="images/图片2_11.gif"/></div> <div class="a2" id="b4"><img src="images/图片2_17.gif"/></div> <div class="a2" id="b5"><img src="images/图片2_19.gif"/></div> <div class="a3" id="b6"><img src="images/图片2_26.gif"/></div> <div class="a4" id="b7"><img src="images/图片2_27.gif"/></div> <div class="a4" id="b8"><img src="images/图片2_28.gif"/></div> <div class="a4" id="b9"><img src="images/图片2_29.gif"/></div> <div class="a4" id="b10"><img src="images/图片2_30.gif"/></div> </div> </div> </body> </html>
baidu页面
最新推荐文章于 2024-05-16 13:51:26 发布