css實現的文字標題向前縮排效果
在實際應用中,可能有這樣的佈局,那就是前面有文字的標題,後面跟著一段文字,前面的標題有向前縮排效果,下面就通過程式碼例項介紹一下如何實現此功能,程式碼如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ padding-left:45px; width:200px; } strong{ margin-left:-45px; } </style> </span> </head> <body> <div> <strong>祝福:</strong>螞蟻部落歡迎您,只有努力奮鬥才會有美好的未來,沒有人一開始就是高手。 </div> </body> </html>
上面的程式碼實現了我們的要求,下面簡單介紹一下它的實現原理。
首先設定div元素的padding-left,這樣div的內容就會和左邊框具有一定的距離,然後再設定strong元素的外邊距為負值,這樣就能夠使其向左移動,並且這個外邊距的值和div的padding-left值相同,這樣就是實現了我們的要求。
相關文章
- JavaScript實現文字豎排效果JavaScript
- CSS題目系列(3)- 實現文字切割效果CSS
- DW如何實現程式碼行縮排效果
- CSS3文字豎排效果CSSS3
- css實現文字和圖片居中效果CSS
- css如何實現div中的文字垂直居中效果CSS
- CSS3實現的圓球放大縮小效果CSSS3
- css實現將標題文字放置於橫線之間CSS
- css3實現的文字無法選中效果CSSS3
- CSS實現文字框中的英文字母大寫效果CSS
- CSS如何讓文字豎排效果例項程式碼CSS
- 純CSS實現四種方式文字反差色效果CSS
- css實現帶有陰影的立體文字效果CSS
- CSS3實現的文字框陰影發光效果CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css實現的多行文字垂直居中效果程式碼例項CSS
- css3實現的文字陰影效果程式碼例項CSSS3
- CSS3標懸浮圓形縮放效果CSSS3
- css實現的禁止標籤中內容選中效果CSS
- css3實現手機效果的“切換標籤”CSSS3
- css如何實現多行文字在div中垂直居中效果CSS
- CSS影象替換:文字縮排,負邊距以及更多方法CSS
- css3實現的文字顏色漸變和漸隱效果CSSS3
- css 實現打分效果CSS
- 文字印表機 效果實現
- CSS實現文字省略CSS
- 視覺還原小技巧!CSS 實現角標效果視覺CSS
- 模擬實現文字框游標效果程式碼例項
- 實現文字標題和input文字框垂直居中對齊
- 利用空格實現中文標題對齊效果
- CSS 奇技淫巧 | 妙用混合模式實現文字鏤空波浪效果CSS模式
- css3實現滑鼠懸浮文字水平晃動效果CSSS3
- CSS實現文字豎排顯示(相容IE6/IE7)CSS
- 前端實現文字滾動效果前端
- CSS實現鏤空效果CSS
- CSS 如何實現羽化效果?CSS
- 純 CSS 實現波浪效果!CSS
- 使用 CSS 實現透明效果CSS