練習html,scc,js仿制百度首頁
阿新 • • 發佈：2018-07-31
inf bottom onclick relative web name borde user scrip
1.練習目的
練習使用html,scc,js
完成界面樣式，用ul標簽實現文本框下拉，通過js完成添加列表內容等功能
2.效果
3.程序代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>baidu</title> <style> div.list { position: absolute; margin: auto; width: 550px; height: 260px; top: 150px; left: 40px; } ul { margin: 0; padding: 0; } ul li { width: 543px; cursor: pointer; position: relative; padding: 2px 0 2px; background: #ffffff; color: rgb(71, 103, 150); font-size: 15px; transition: 0.2s; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; list-style-type: none; } ul li:hover { background: #ddd; } input.inputer { -web-kit-appearance: none; -moz-appearance: none; font-size: 1.4em; height: 36px; width: 540px; border: 1px solid #c8cccf; color: #6a6f77; position: absolute; margin: auto; top: 110px; left: 40px; } input[type=text]:focus { border: #317EF3 1px solid; } div.search-bar { width: 700px; height: 700px; position: absolute; margin: auto; top: 15%; left: 0; right: 0; } img.pic { position: absolute; margin: auto; top: 0; left: 0; right: 0; } #button { color: #FFF; width: 100px; height: 40px; background: #317EF3; border: 0px; padding: 0px; position: absolute; margin: auto; top: 110px; left: 584px; } .ul1 li { display: inline; margin-right: 10px; } .topright { float: right } .bottom { height: 20px; width: 500px; position: absolute; margin: auto; left: 0; right: 0; bottom: 50px; } </style> </head> <body> <div class="topright"> <ul class="ul1"> <li> <a href="www.baidu.com">糯米</a> </li> <li> <a href="www.baidu.com">新聞</a> </li> <li> <a href="www.baidu.com">hao123</a> </li> <li> <a href="www.baidu.com">地圖</a> </li> <li> <a href="www.baidu.com">視頻</a> </li> <li> <a href="www.baidu.com">貼吧</a> </li> <li> <a href="www.baidu.com">登錄</a> </li> <li> <a href="www.baidu.com">設置</a> </li> <li></li> </ul> </div> <div class="search-bar"> <img src="baidu.jpg" class="pic"> <input type="text" class="inputer" id="inputer" onfocus="display()" onblur="undisplay(this)"> <button class="btn-search" id="button" onclick="newElement()">百度一下</button> <div class="list"> <ul class="dropdown-list" id="dropdown-list"> <li>Coffee</li> <li>Milk</li> </ul> </div> </div> <div class="bottom"> ©2016 baidu<a href="http://www.baidu.com/duty/">使用百度前必讀</a> 京ICP證030173號 </div> </body> <script> var list = document.getElementById("dropdown-list"); var input = document.getElementById("inputer"); window.onload = function () { list.style.display = "none"; } input.addEventListener("click", display); function newElement() { var li = document.createElement("li"); var inputValue = input.value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue != ‘‘) { list.appendChild(li); } input.value = ""; } function display() { list.style.display = ""; } function undisplay(x) { var y; var i; var obj_lis = list.getElementsByTagName("li"); for (i = 0; i < obj_lis.length; i++) { obj_lis[i].onclick = function () { x.value = this.innerHTML; } } setTimeout(function () { list.style.display = "none"; }, 200); } </script> </html>
4.總結
通過短期的學習，對html、css、js有了一些了解，但是發現要把眾多的元素組合起來實現效果比想象的還要復雜，需要學習和積累。
練習html,scc,js仿制百度首頁