HTML5和CSS3開發第九章課後作業
阿新 • • 發佈:2019-02-19
第3題 QQ彩貝高階搜尋
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>First</title> <style> select{width: 70px;height:25px;margin-left: 10px;margin-bottom: 10px} .bottem{ width:170px; margin-left: 35px; margin-bottom: 15px; display: none; animation: ser 2s linear 1; } #input1{ background-color: #CCCCCC;width: 70px;height: 30px } div h2{ margin-left: 15px; border-bottom: 6px red solid; padding-bottom: 12px; width: 210px; } div p input{ margin-left: 15px; width: 210px; height: 40px; } #input1{ margin-left:90px; margin-bottom: 15px; } div:hover .bottem{ display: block; } @keyframes ser { 0%{ opacity: 0; height: 0%; } 10%{ height: 20%; opacity: 0.1; } 20%{ height: 30%; opacity: 0.2; } 30%{ height: 50%; opacity: 0.3; } 50%{ height: 60%; opacity: 0.5; } 70%{ height: 80%; opacity: 0.7; } 100%{ height: 100%; opacity: 1; } } </style> </head> <body> <div style="border: 1px solid #CCCCCC;width: 250px;margin: 0px auto"> <h2>高階搜尋</h2> <p><input type="search" placeholder="請輸入關鍵字"></p> <input type="submit" value="搜尋" id="input1"> <div class="bottem"> <select><option>場合</option></select> <select><option>性別</option></select> <select><option>風格</option></select> <select><option>色系</option></select> <select><option>價格</option></select> <select><option>年齡</option></select> <select><option>季節</option></select> </div> </div> </body> </html>
第4題 百度糯米
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度糯米購物資訊導航</title> <style> .div div img{ background: black; vertical-align: middle; z-index: 2; right: 0px; } .div div span{ display: inline-block; border: solid 1px #c9321a; border-radius: 5px; color: white; width: 90px; text-align: center; opacity: 0; background: #c9321a; float: right; position: relative; left: 90px; } @keyframes name { 0%{ opacity: 0; left: 0px; } 33%{ opacity: 0.3; left: -30px; } 66%{ opacity: 0.6; left: -60px; } 100%{ opacity: 1; left: -90px; } } .div{ position: fixed; right: 0px; top: 200px; } .div div{ margin-top: 50px; position: relative; left: 90px; } .div div:hover span{ animation: name 0.1s linear both; } </style> </head> <body> <img src="images/practice4/img.bmp" style="width: 100%; height: 100%"> <div class="div"> <div><span>購物車</span><img src="images/practice4/toolbar_05.png"></div> <div><span>我的關注</span><img src="images/practice4/toolbar_10.png"></div> <div><span>我的足跡</span><img src="images/practice4/toolbar_15.png"></div> <div><span>我的訊息</span><img src="images/practice4/toolbar_19.png"></div> </div> </body> </html>