lianxi

来源：互联网发布：vb应用程序图标编辑：程序博客网时间：2024/05/16 05:39

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>练习</title> <style type="text/css"> body{ background: url(img/bg.jpg) no-repeat; background-size: 100%; } *{ margin: 0 auto; padding: 0; } .wrap{ width: 800px; height: 800px; } nav{ margin-top: 40px; height: 40px; width: 800px; float: left; } .left{ height: 40px; width: 600px; } .img0{ height: 20px; width: 20px; position: relative; right: 40px; top: 5px; transition: all 2s linear; } .btn{ height: 40px; width: 150px; margin-right: 3px; } ul{ list-style: none; float: left; } ul li{ float: left; width: 30px; padding: 30px; } ul li img{ height: 80px; width: 80px; padding: 20px; transition: all 2s ease; } ul li img:hover{ transform: rotate(360deg); } .btn:hover{ color: red; transform: scale(2); } .left:hover{ transform: scale(1.5); } .img0:hover{ transform: scale(1.2); } </style> </head> <body> <div class="wrap"> <div class="logo"> <img src="img/a.png"/> </div> <nav class="shuru"> <input type="text" class="left"/> <img src="img/a1.jpg"class="img0"/> <input type="button" value="百度一下" class="btn"/> </nav> <div class="bottom"> <div class="shang"> <ul> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> </ul> </div> <div class="shang"> <ul> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> <li><imgsrc="img/a1.jpg"/></li> </ul> </div> </div> </div> </body> </html>

阅读全文

0 0