当前位置: 首页>JAVA>正文

英雄聯盟英雄名單部分功能

英雄聯盟英雄名單部分功能

html部分:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LOL英雄名單</title><link rel="stylesheet" href="LOL.css">
</head>
<body><form id="b"><div id="a"><div id="a1"><ul><li>英雄:</li><li><input type="text" placeholder="請輸入英雄名稱" list="yx"></li><datalist id="yx"><option>亞索</option><option>琴女</option><option>盲僧</option><option>寒冰</option></datalist></ul><ul><li>位置:</li><li><input type="text" placeholder="請選擇" list="weizhi"></li><datalist id="weizhi"><option value="上單"><option  value="中單"><option value="輔助"> <option value="打野"><option value="射手">  </datalist></ul><ul><li>性別:</li><li><input type="text" placeholder="請選擇"  list="xb"></li><datalist id="xb"><option>漢子</option><option>妹子</option></datalist></ul><ul><li><button type="" style="background-color: rgb(62, 62, 179);">查詢</button></li><!-- <li><button type="reset" value="" style="background-color: rgb(233, 121, 121);">清空</button></li> --><a href="" id="click_clear">清空</a>         </ul></div></form></div><hr/><div id="a5"><button id="button" style="background-color:rgb(104, 195, 223);"><img src="add.png" alt="" style="width: 10px; height: 10px; ">添加</button></div><hr/><table  class="table"><tr><th>英雄</th><th>年齡</th><th>性別</th><th>籍貫</th><th>位置</th><th>臺詞</th><th>操作</th></tr><tr><td>盲僧</td><td>2</td><td>漢子</td><td>德瑪西亞</td><td>打野,上單</td><td>雙眼失明絲毫不影響我裝逼</td><td><button style="background-color: blue;color: white;">詳情</button><button style="background-color: green;color: white;">修改</button><button style="background-color: red;color: white;">刪除</button><button style="background-color:orange;color: white;">添加圖片</button></tr><tr><td>亞索</td><td>2</td><td>漢子</td><td>德瑪西亞</td><td>上單,中單,輔助</td><td>死亡如風常伴吾身</td><td><button style="background-color: blue;color: white;">詳情</button><button style="background-color: green;color: white;">修改</button><button style="background-color: red;color: white;">刪除</button><button style="background-color: orange;color: white;">添加圖片</button></td></tr><tr><td>琴女</td><td>2</td><td>妹子</td><td>德瑪西亞</td><td>輔助</td><td>我用意念傳達給你</td><td><button style="background-color: blue;color: white;">詳情</button><button style="background-color: green;color: white;">修改</button><button style="background-color: red;color: white;">刪除</button><button style="background-color: orange;color: white;">添加圖片</button></td></tr></table><script src="qk.js"></script>
</body>
</html>

css代碼段:

#a5 button img{width: 5px;height: 5px;}
.a5 button {background-color: blue;
}
ul{list-style: none;display: flex;
}
li{display: flex;
}
.table{text-align: center;margin: auto;border-collapse: collapse;
}
table,td,th{border: 1px solid black;
}
td,th{padding-left: 22px;padding-right: 22px;
}
.table button{width: 73px;height: 29px;
}
#a1{margin-right: 10px;display: flex;}
.a1 button{height: 31px;width: 53px;background-color:blue;color:white;
}
#a1 hover input {outline-color: blue;
}

js代碼段:

document.getElementById("click_clear").onclick=function(){Array.from(  document.querySelectorAll("#b #a1 input")).forEach(i=>i.value="");
}

?

https://www.zydui.com/af90cVW8CDQ9VAF8E.html
>

相关文章:

  • PyTorch學習筆記(15) ——PyTorch中的contiguous
  • 英雄聯盟英雄名單部分功能
  • 英雄聯盟皮膚爬蟲
  • java中for循環執行順序
  • for循環執行順序詳解(避坑)
  • DS18B20序列號的讀取
  • 上古卷軸java怎么刷_上古卷軸5快速升級方法一覽 教你如何快速升級
  • 上古卷軸 java_我打通了197KB的《上古卷軸四:湮滅》,諾基亞手機上的那一種...
  • 上古世紀服務器維護,9月22日臨時維護修改會員排隊問題服務器擴容公告
  • 上古世紀服務器維護真情禮,【已開服】4月15日經典服例行維護版本更新公告
  • 上古卷軸ol java_上古卷軸ol怎么滿級快
  • 全網最詳細解釋memcached中的flags含義
  • FLAGS寄存器 標志寄存器 英文全稱 方便記憶
  • Java爬蟲實戰第二篇:IOS、安卓應用爬蟲
  • 什么是storedownloaded,為什么在Mac上運行?
  • CSDN富文本編輯器回車行間距過大問題的解決
  • 批量處理word所有回車行
  • shell判斷字符串變量是否為空,包括純空格、空串、回車行是空白行等
  • 計算機畢業設計之開山車行二手車交易系統
  • Java實現“xx車行管理系統”
  • Java面試案例-車行易
  • 車行管理系統 java小作業
  • 3個躺著賺錢的神仙副業
  • 計算機中的windows任務管理器在哪,Win10系統中的explorer.exe在哪?怎么重啟Windows資源管理器?...
  • Win11查看文件資源管理器選項卡的方法
  • 為什么你總get不到增長玩法背后的邏輯?
  • JDBC連接MySQL數據庫(一)
  • 從零學Java(18)之三元運算符
  • CGU APAC 2017盛大開幕,七彩虹與英偉達聯手打造電競盛宴
  • AP 計算機 華麗逆襲-----被麻省理工計算機博士老師反復勸退的學生逆襲的肺腑之言