css實現將標題文字放置於橫線之間

antzone發表於2017-03-28
CSS

在實際應用中，可能將元素進行分割以便進行歸類，當然這個類別需要有個標題。

下面就介紹一下將這個標題放置於橫線之間，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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>標籤。

相關文章