css使標題右側(cè)區(qū)塊更多教程

時間：2024-09-04 00:43:41 CSS 我要投稿

　　一般我們都會把“更多”這個鏈接放在H標簽中，然后用到相對定位來實現(xiàn)。可以使用負margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不

　　標題右側(cè)“更多”的實現(xiàn)

　　曾經(jīng)做上圖所示的效果,會使用到position來相對定位到h2標簽的右側(cè).這樣的做法,代碼確實會多好幾行. 其實可以用個笨一點的辦法來實現(xiàn)的：

　　譬如html代碼如下：

　　< h2>< a h ref="#" >標題< /a> < span>更多…< /span> < /h2>

　　使用potsition的css差不多如下：

　　h2{

　　position:relative;

　　height:20px;

　　}

　　span{

　　position:absolute;

　　right:0;

　　top:0;

　　display:block;

　　height:20px;

　　}

　　這樣才能實現(xiàn)更多在右側(cè).其實真的還可以更簡單:

　　h2{

　　height:20px;

　　}

　　span{

　　float:right;

　　display:block;

　　margin:-10px 0 0 0;

　　height:20px;

　　}

　　其實只是利用了margin-top 的負數(shù)來實現(xiàn),因為默認的float會換行到h2標簽下面去，所以讓它自個跳上去。大致代碼就是如此了,是不是很簡單?我說很簡單嘛！由于很簡單,所以就不放出單獨的測試頁面了.

　　一般我們都會把“更多”這個鏈接放在H標簽中，然后用到相對定位來實現(xiàn)。可以使用負margin來完成這個效果，而且更加簡單。另外，針對于語義方面，我稍作修改，一般我們都是將鏈接套在H標簽中，我將之獨立到外部，這樣既便在禁用CSS后，還是能保持一個良好的閱讀形式而不至引起歧義。

　　演示：

　　運行代碼框

　　/* */

【css使標題右側(cè)區(qū)塊更多教程】相關(guān)文章：