                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

完成了啦啦啦啦

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
??????
??????? .wap{
??????????? width:460px;
??????????? height:400px;
??????????? position:absolute;
??????????? left:50%;
??????????? top:50%;
??????????? margin-left:-230px;
??????????? margin-top:-200px;
??????????? background-color:gray;
??????????? border:1;
??????????? margin:1;
??????? }
??????? .menu{
??????????? width:460px;
??????????? height:100px;
??????????? position:absolute;
??????????? border:5px;
??????????? border:1px solid black;
??????? }
??????? li{
??????????? border:1px solid black;
?????????? display:block;
?????????? float:left;
??????????? height:40px;
??????????? width:100px;
??????????? text-align:center;
??????????? line-height:40px;
??????????? padding-left:10px;
??????????? cursor:pointer;
??????????? font-size:14px;
??????????? position:relative;
??????????? border-radius:5px;
??????? }
??????? li:hover{
??????????? background-color:white;
???????????? height:50px;
??????????? width:120px;
??????????? border-radius:25px;
??????? }
??????? li span:hover{
??????????? color: #c81623;
??????? }
??????? .menu_show{
??????????? height:250px;
??????????? width:400px;
??????????? top:150px;
??????????? left:30px;
??????????? position:relative;
??????????? text-align:center;
??????? }
??????? .none{
??????????? display:none;
??????? }
??? </style>
??? <script type="text/javascript">
????? function over(e){
???????? var darr=document.getElementsByTagName("div");
???????? for(var i=0;i<darr.length;i++)
??????????? if(darr[i].getAttribute("class")=="menu_show none"){
??????????????? darr[i].style.display="none"
??????????? }
???????? for(var i=0;i<darr.length;i++)
??????????? if(e==darr[i].getAttribute("id")){
??????????????? darr[i].style.display="block"
??????????????? break;
??????????? }
??????? }
????
??? </script>
?
</head>
<body>
<div id="w" class="wap">
??? <div id="m" class="menu">
??????? <ul>
??????????? <li onmouseover="over('a')"? ><span>房產(chǎn)</span></li>
??????????? <li onmouseover="over('b')"? ><span>家居</span></li>
??????????? <li onmouseover="over('c')" ><span>二手車</span></li>
??????? </ul>
???????
??? </div>
??? <div id="a" class="menu_show none">
??????? 275萬購昌平鄰鐵三居總價(jià)20萬買一居
??? 200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)
??? 北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平
??? 京樓盤直降5000 中信府公園樓王現(xiàn)房
??? </div>
??? <div? id="b" class="menu_show none">
??????? 40平出租屋大改造美少女的混搭小窩
???? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生
???? 新中式的酷色溫情 66平撞色活潑家居
???? 瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)
??? </div>
??? <div id="c" class="menu_show none">
??????? 通州豪華3居260萬二環(huán)稀缺2居250w甩
???? 西3環(huán)通透2居290萬 130萬2居限量搶購
???? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!
???? 獨(dú)家別墅280萬蘇州橋2居優(yōu)惠價(jià)248萬
??? </div>
</div>?
</body>
</html>