牛刀小試——標題|菜單同行顯示的兩種實現方式

 

        通常我們會有這樣的需求，我們希望在標題的後面加幾個小的菜單，讓文字在左側，菜單在右側。另外，我們還需要考慮到頁面的兼容性，閒着沒事，自己研究了一番，分別用兩種方式做了一個小小的實現。

       先上效果圖：

    

      那麼到底怎麼實現呢？請看下文：

       方式一：

       我們可以通過用浮動來處理該問題，讓標題向左浮動，讓菜單向右浮動。

      HTML代碼：

<div class="test1">
   <div class = "title">
	<h2>Title</h2>
	<div class="menu-list">
	   <a href="">Menu1</a>|
	   <a href="">Menu2</a>
	</div>
	<div class="clear"></div>
   </div>
   <div class = "content">contents</div>
</div>

    CSS代碼：

.test1{
		width:400px;
		height:300px;
		margin:10px;
	}
	.test1 {
		border:1px solid #dcdbda;
		font-size:14px;
	}
	.test1 .title{
		height:25px;
		line-height:25px;
		border-bottom:1px solid #dcdbda;
		background: -moz-linear-gradient(center top , #FCFCFC, #F1F1F1) repeat scroll 0 0 transparent;
		*background:url(./img/bg-title.png) repeat-x #f5f5f5;
		*+background:url(./img/bg-title.png) repeat-x #f5f5f5;
	}
	.test1 .title h2{
		float:left;
		width:60%;
		margin:0 0 0 10px;
		color:#666;
	}
	.test1 .title .menu-list{
		float:right;
		margin-right:10px;
		padding:0 10px;
	}
	.clear{
		clear:both;
	}

       方式二：

        我們可以用相對佈局和絕對佈局來解決。

       HTML代碼：

<div class="ui-box test2">
	<div class="ui-box-title">
		<h2>Title</h2>
		<div class="title-menu-list">
			<div class="title-menu"><a href="" class="">Menu1</a></div>
			<div class="title-menu">|</div>
			<div class="title-menu"><a href="" class="">Menu2</a></div>
	   </div>
	   <div class="clear"></div>
	</div>
	<div class="ui-box-content">content</div>
  </div>

     CSS代碼：

.test2{
		width:400px;
		height:300px;
		margin:10px;
	}
	.ui-box{
		border:1px solid #dcdbda;
		position:relative;
	}
	.ui-box-title{
		border-bottom: 1px solid #CCCCCC;
		height: 14px;
		line-height: 16px;
		padding: 5px 10px 6px;
		position: relative;
		font-size:14px;
		color:#666;
		background: -moz-linear-gradient(center top , #FCFCFC, #F1F1F1) repeat scroll 0 0 transparent;
		*background:url(./img/bg-title.png) repeat-x #f5f5f5;
		*+background:url(./img/bg-title.png) repeat-x #f5f5f5;
	}
	.ui-box-title h2{
		color:#666;
		margin:0;
		padding:0;
	}
	.ui-box-content{
		background-color:#fff;
		padding:5px;
	}
	.ui-box-title .title-menu-list{
		position: absolute;
		right: 10px;
		top: 5px;
		padding:0px 10px;
	}
	.ui-box-title .title-menu{
		position: relative;
		padding:0px 5px;
		float:right;
	}
	.clear{
		clear:both;
	}

 

Demo下載地址：http://download.csdn.net/download/yima1006/4892485