<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin:0; padding: 0; } #rong{ width: 200px; height: 140px; margin: auto; text-align: center; } #lie{ width: 200px; height: 20px; background: yellow; position: relative} #gedan{ width: 200px; background: pink; } ul{list-style: none } li{ width: 200px; height: 20px; text-align: center; } #oo{ width: 0; height: 0; border-top: 10px solid black; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0px; position: absolute; top: 10px; right: 0px; } </style> </head> <body> <div id="rong"> <div id="lie"><p>列表</p> <div id="oo"></div> </div> <div id="gedan" style="display: block"> <ul> <li id="li1">蔡依林</li> <li id="li2">蔡依林</li> <li id="li3">蔡依林</li> <li id="li4">蔡依林</li> <li id="li5">蔡依林</li> <li id="li6">蔡依林</li> </ul> </div> </div> <script> var P=document.getElementById('gedan'); var p=document.getElementById('lie'); p.onclick=function () {if(P.style.display=='block'){ P.style.display='none' } else{ P.style.display='block' } }; var li1=document.getElementById("li1"); var li2=document.getElementById("li2"); var li3=document.getElementById("li3"); var li4=document.getElementById("li4"); var li5=document.getElementById("li5"); var li6=document.getElementById("li6"); li1.onmouseover=function () { li1.style.background="white"; li1.style.textDecoration="underline" }; li2.onmouseover=function () { li2.style.background="white"; li2.style.textDecoration="underline" }; li3.onmouseover=function () { li3.style.background="white"; li3.style.textDecoration="underline" }; li4.onmouseover=function () { li4.style.background="white"; li4.style.textDecoration="underline" }; li5.onmouseover=function () { li5.style.background="white"; li5.style.textDecoration="underline" }; li6.onmouseover=function () { li6.style.background="white"; li6.style.textDecoration="underline" }; li1.onmouseout=function () { li1.style.background="pink"; li1.style.textDecoration="none" }; li2.onmouseout=function () { li2.style.background="pink"; li2.style.textDecoration="none" }; li3.onmouseout=function () { li3.style.background="pink"; li3.style.textDecoration="none" }; li4.onmouseout=function () { li4.style.background="pink"; li4.style.textDecoration="none" }; li5.onmouseout=function () { li5.style.background="pink"; li5.style.textDecoration="none" }; li6.onmouseout=function () { li6.style.background="pink"; li6.style.textDecoration="none" }; </script> </body> </html>
下拉框的制作
最新推荐文章于 2021-01-14 18:05:54 发布