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

為什么hr跟li不會拼接在一起?

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">

?????/*?CSS樣式制作?*/??
?????*{margin:?0;padding:?0;}

????ul{
?????list-style:?none;?
?????overflow:?hidden;?
?????padding-top:?30px;?
?????width:?300px;
????}
????
????a{text-decoration:none;?margin:0?5px;?padding:?10px?20px?0;?
?????/*border-left:?1px?red?solid;?border-right:?1px?red?solid;border-top:?1px?red?solid;?*/
border:?1px?red?solid;
?????border-bottom:?6px?yellow?solid;}??
????a:hover{border-top:?6px?red?solid;?border-bottom:?none;}

????/*li浮動設(shè)置*/
????#gg1{position:?relative;float:?left;}
????#gg2,#gg3{float:?left;}?

????/*下劃線設(shè)置*/
????hr{?clear:?both;?display:inline-block;height:2px;border:none;?border-top:?2px?solid?yellow;?}
????#hj1{width:5px;}
????#hj2{width:74px;?border:none;}
????#hj3{width:10px;}
????#hj4{width:74px;?border:?none;}
????#hj5{width:10px;}
????#hj6{width:90px;?border:?none;}
????#hj7{width:40px;}

/*內(nèi)容框設(shè)置*/
????div{
?????/*margin-top:?-6px;?*/
?????border:1px?solid?red?;?border-top:?none;?height:100px;width:300px;}???

????</style>
????<script?type="text/javascript">
?????????
????//?JS實現(xiàn)選項卡切換
????
????function?ff1()?{

var?p1?=?document.getElementById('p1');
var?p2?=?document.getElementById('p2');
var?p3?=?document.getElementById('p3');
?????p1.style.display="block";
?????p2.style.display="none";
?????p3.style.display="none";
????}???
????function?ff2()?{
?????p2.style.display="block";
?????p1.style.display="none";
?????p3.style.display="none";
}
????function?ff3()?{
?????p3.style.display="block";
?????p2.style.display="none";
?????p1.style.display="none";
????}
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<ul>
<li?id='gg1'?onmouseover='ff1()'?><a?href="#">房產(chǎn)</a></li>
<li?id='gg2'?onmouseover='ff2()'?><a?href="#">家居</a></li>
<li?id='gg3'?onmouseover='ff3()'?><a?href="#">二手房</a></li>
</ul>
<hr?id="hj1"?/><hr?id="hj2"?/><hr?id="hj3"?/><hr?id="hj4"?/><hr?id="hj5"?/><hr?id="hj6"?/><hr?id="hj7"?/>
<div?id="p1">?
275萬購昌平鄰鐵三居&nbsp;總價20萬買一居<br?/>
????200萬內(nèi)購五環(huán)三居&nbsp;140萬安家東三環(huán)<br?/>
????北京首現(xiàn)零首付樓盤&nbsp;53萬購東5環(huán)50平<br?/>
????京樓盤直降5000?中信府&nbsp;公園樓王現(xiàn)房<br?/>?
</div>
?<div?id="p2">
???40平出租屋大改造?美少女的混搭小窩<br?/>
?????經(jīng)典清新簡歐愛家?90平老房煥發(fā)新生<br?/>
?????新中式的酷色溫情?66平撞色活潑家居<br?/>
?????瓷磚就像選好老婆?衛(wèi)生間煙道的設(shè)計<br?/>
?</div>?
?<div?id="p3">?
???通州豪華3居260萬?二環(huán)稀缺2居250w甩<br?/>
?????西3環(huán)通透2居290萬?130萬2居限量搶購<br?/>
?????黃城根小學(xué)學(xué)區(qū)僅260萬?121平70萬拋!<br?/>
?????獨家別墅280萬?蘇州橋2居優(yōu)惠價248萬<br?/>
?</div>
?<script>
????window.onload=ff1();
?</script>
</body>
</html>

效果如下: