牛刀小试——标题|菜单同行显示的两种实现方式

 

        通常我们会有这样的需求，我们希望在标题的后面加几个小的菜单，让文字在左侧，菜单在右侧。另外，我们还需要考虑到页面的兼容性，闲着没事，自己研究了一番，分别用两种方式做了一个小小的实现。

       先上效果图：

    

      那么到底怎么实现呢？请看下文：

       方式一：

       我们可以通过用浮动来处理该问题，让标题向左浮动，让菜单向右浮动。

      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.youkuaiyun.com/download/yima1006/4892485