css实现将标题文本放置于横线之间

css实现将标题文本放置于横线之间:
在实际应用中,可能将元素进行分割以便进行归类,当然这个类别需要有个标题。
下面就介绍一下将这个标题放置于横线之间,代码实例如下:

<!DOCTYPE html>
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">
*{
  font-size:12px;
  margin:0;
  padding:0; 
} 
fieldset{
  padding:10px;
  margin:10px;
  width:270px;
  color:#333; 
  border:#06c dashed 1px;
} 
legend{
  color:#06c;
  font-weight:800; 
  background:#fff;
} 
ul{
  list-style-type:none;
  margin:8px 0 4px 0;
} 
li{margin-top:4px;}
</style>
</head>
<body>
<fieldset> 
  <legend>网页特效</legend> 
  <ul> 
    <li><a href="#" target="_blank">蚂蚁部落欢迎您</a></li>
    <li><a href="#" target="_blank">本站的url地址是softwhy.com</a></li>
    <li><a href="#" target="_blank">只有努力奋斗才会有美好的未来</a></li>
    <li><a href="#" target="_blank">没有人一开始就是高手,必须要努力</a></li>
  </ul> 
</fieldset>
</body>
</html>

上面的代码实现了我们的要求,这里就是利用了<fieldset>和<legend>标签。

更多内容可以参阅:http://www.softwhy.com/divcss/

你可能感兴趣的:(css实现将标题文本放置于横线之间)