<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>實踐題?-?選項卡</title>
????<style?type="text/css">
?????/*?CSS樣式制作?*/??
???????*{padding:0px;margin:0px;font:12px?normal?"microsoft?yahei";}
???????#tabs?{width:290px;padding:2px;height:150px;margin:20px;}
??
???????#tabs?ul{list-style:none;display:block;/*一:display:block;與下面那個不加會怎樣?*/????height:30px;line-height:30px;border-bottom:2px?saddlebrown?solid;}
??
??#tabs?ul?li{background:#fff;cursor:pointer;
float:left;/*二:float:left;不加沒什么變化啊?*/list-style:none;height:28px;line-height:28px;margin:0px?8px;border:2px?solid?#aaa;
border-bottom:none;display:inline-block;/*三:display:inline-block;不加也沒有什么變化啊?*/width:50px;text-align:center;}
??#tabs?ul?li.on{border-top:2px?solid?saddlebrown;border-bottom:2px?solid?#fff;}
??#tabs?div{height:120px;line_height:?300px;?border:1px?solid?#369;
???border-top:none;padding:5px;}
??.hide{display:none;}
????</style>
????<script?type="text/javascript">
?????????
????//?JS實現選項卡切換
????
????
????</script>
?
</head>
<body>
<!--?HTML頁面布局?-->
<div?id?="tabs">
????<ul>
????????<li>房產</li>
????????<li>家居</li>
????????<li>二手房</li>
????</ul>
????<div>275萬購昌平鄰鐵三居??總價20萬買一居<br/>
????????200萬內購五環三居?140萬安家東三環<br/>
????????北京首現零首付樓盤?53萬購東五環20平米<br/>
????????京樓盤直降5000?中信府?公園樓王現房<br>
????</div>
????<div>
????????40平米租屋大改造?美少女的混搭小窩<br/>
????????經典清新簡歐愛家?90平老房煥發新生<br>
????????新中式的酷色溫情?66平撞色活潑家居<br/>
????????瓷磚就像選好老婆?衛生間煙道的設計<br/>
????</div>
????<div>
????????通州豪華3居260萬?二環稀缺2居250w甩<br/>
????????西3環通透2居290萬?130萬2居限量搶購<br/>
????????皇城根小學學區僅260萬?121平米70萬拋<br>
????????獨家別墅280萬?蘇州橋2居優惠價248萬<br>
????</div>
</div>
?
</body>
</html>代碼中有三處標了注釋的地方不能理解其意義,display:block;與float:left;與display:inline-block;有作用?不加也沒有任何改變,我知道這三個語句的含義,但是不知道為什么不加也沒有變化什么.
display:block;與float:left;與display:inline-block;有作用?
qq_甘蔗_0
2015-11-23 23:16:57
