<title>无标题文档</title>
<style type="text/css">
.top{ height:18pxborder-bottom:1px solid red}
li{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:#606060
text-align:center
font-size:12px
line-height:18px
}
li:hover{ list-style-type:none
float:left
width:100px
margin-left:10px
background-color:red
text-align:center
font-size:12px
line-height:18px}
.bottom{ border-left:1px solid redborder-right:1px solid redheight:20px}
</style>
</head>
<body>
<div class="top">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="bottom"></div>
</body>
最简单的方法：（缺点不兼容老版本的ie）<fieldset>
<legend>标题</legend>
<p>内容</p>
</fieldset>
====================
方法2：
<div style="border:1px solid #666height:100pxwidth:300pxposition:relative">
<h3 style=" background:#FFFdisplay:blockheight:20pxwidth:50pxposition:absoluteleft:10pxtop:-30pxtext-align:center">标题</h3>
<p>内容</p>
</div>
注：设置position:absolute并控制坐标（left、top）将标题调整到理想位置，设置白色背景挡住边框模拟出效果
