CSS新聞標題後面跟著new圖示
在很多網站都有這樣的效果,如果是新新增的新聞會在後面有一個小圖示。
下面就通過例項來介紹一下如何實現此種效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body, ul, li{ margin:0px; padding:0px; } div{color:red;} ul, li{ list-style:none; width:220px; } a, span{ height:30px; line-height:30px; float:left; } a{text-decoration:none;} span{ width:23px; background:url(mytest/demo/new.jpg) no-repeat 0px 10px; } </style> </head> <body> <div> <ul> <li><a href="#">大家好,歡迎來到螞蟻部落</a><span></span></li> <li><a href="#">太陽出來了,今天不錯</a><span></span></li> <li><a href="#">HTML專區</a></li> </ul> </div> </body> </html>
首先將a元素和span元素向左浮動,將其轉換為塊級元素,能夠控制它們的寬度,但是我們不要控制a元素的寬度,否則由於新聞標題長度並不一致,導致圖示距離標題末尾的距離會有差距。
相關文章
- css去掉新聞列表最後一個新聞的下劃線CSS
- 【牛腩新聞】——CSS(一)CSS
- 網際網路新聞擬出新規:轉載新聞不得歪曲標題原意
- 跟著ORACLE幹,沒問題~~~Oracle
- CSS1(新聞案例)CSS
- Python爬蟲百度新聞標題Python爬蟲
- jQuery單行新聞標題向上滾動詳解jQuery
- CSS設定<input>標籤的背景小圖示CSS
- 【Flutter 專題】97 仿網易新聞標籤選擇器Flutter
- css自定義滑鼠指標圖示程式碼例項CSS指標
- 跟著教程做主圖,教你輕鬆去除圖片背景!
- 跟著圖靈聽課去!(十二月)圖靈
- 跟著圖靈聽課去!(七月)圖靈
- 跟著圖靈聽課去!(十一月)圖靈
- 跟著圖靈聽課去!(十月)圖靈
- 跟著圖靈聽課去!(四月)圖靈
- 跟著圖靈聽課去!(三月)圖靈
- 跟著圖靈聽課去!(六月)圖靈
- 跟著圖靈聽課去!(二月)圖靈
- 跟著圖靈聽課去!(九月)圖靈
- 跟著圖靈聽課去!(八月)圖靈
- PHP獲取網站標題和圖示PHP網站
- JavaScript專題之跟著underscore學防抖JavaScript
- JavaScript專題之跟著 underscore 學節流JavaScript
- python matplotlib畫圖改變圖示題和座標軸標題的字型大小Python
- 跟著 8 張思維導圖學習 JavascriptJavaScript
- 設定Android程式圖示和程式標題Android
- CSS 匹配後面所有兄弟元素CSS
- bootstrap 頁面標題boot
- 圖解:世界盃,跟著大資料燥起來!圖解大資料
- 跟著專案學 android canvas——InDoorView 地圖引擎AndroidCanvasView地圖
- 2017 跟著圖靈聽課去(4月)圖靈
- 2017 跟著圖靈聽課去(7月)圖靈
- 2017 跟著圖靈聽課去(11月)圖靈
- 2017 跟著圖靈聽課去(10月)圖靈
- 2017 跟著圖靈聽課去(9月)圖靈
- 2017 跟著圖靈聽課去(5月)圖靈
- 2017 跟著圖靈聽課去(6月)圖靈