如何實現css列表排行榜的特效
本款清單適合作新聞、下載排行，可以區分顏色，採用一行兩列佈局，這是最標準的一種CSS佈局方式，並且有詳細的實現代碼，感興趣的你可以參考下哈，希望可以幫助你
CSS製作列表，這是比較基礎的技巧了，不過有很多朋友還是用不好，那麼看一下本款列表，適合作新聞、下載排行，可以區分顏色，採用一行兩列佈局，這是最標準的一種CSS佈局方式了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css排行榜</title>
<style type="text/css">
<!--
* { font-family:simsun; margin:0px; padding:0px;}
body { font-size:12px; text-align:center;}
ul, li { list-style:none;}
a{ text-decoration:none; color:#3381BF;}
a:hover{ text-decoration:underline;}
#movie_rank { height:260px;}
.box2 { border:1px solid #ADDFF2; text-align:left; overflow:hidden; color:#9C9C9C; text-align:left;}
.box2 { margin-bottom:7px;}
.box2 h2{ background:#EEF7FE; height:21px; line-height:21px; overflow-y:hidden; border-bottom:1px solid #ADDFF2; color:#1974C8; font-size:12px; padding:0px 8px;}
.box2 h2 a.more{ float:right; text-decoration:underline; background:url() no-repeat 100% -123px; padding-right:8px; font-weight:normal;}
.box2 h2 span{ margin-left:5px; font-weight:normal; color:#B9B7B8;}
.box2 .inner{ padding:8px; line-height:18px; overflow:hidden; color:#3083C7;}
.box2 a{ color:#3083C7; white-space:nowrap;}
.rank_list{ line-height:14px; margin:auto; padding-top:5px;}
.rank_list li{ height:14px; margin-bottom:8px; width:290px; padding-left:20px; white-space:nowrap; overflow:hidden; position:relative;}
.rank_list li.top3 em{ background:#FFE4B7; border:1px solid #FFBB8B; color:#FF6800;}
.rank_list em{ position:absolute; left:0; top:0; width:12px; height:12px; border:1px solid #B1E0F4; color:#6298CC; font-style:normal; font-size:10px; font-family:Arial; background:#E6F0FD; text-align:center; line-height:12px; overflow:hidden;}
.rank_list span{ position:absolute; width:60px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:110px;}
#movie_rank .rank_list span{ position:absolute; width:40px; color:#B7B7B7; text-align:right; height:14px; background:#fff; left:260px;}
-->
</style>
</head>
<body>
<p class="box2" id="movie_rank">
<h2><a href="#" class="more">更多</a>源码排行</h2>
<p class="inner">
<ul class="rank_list">
<li class="top3"><em>1</em><a href="#">艾恩An-Upload 无组件上传类</a><span>21</span></li>
<li class="top3"><em>2</em><a href="#">EasySlide jQuery图片轮显</a><span>528</span></li>
<li class="top3"><em>3</em><a href="#">通用Ajax无刷新表彰验证类</a><span>232</span></li>
<li><em>4</em><a href="#">支持中文的鼠标取词VB源码</a><span>74</span></li>
<li><em>5</em><a href="#">通用Ajax无刷新表彰验证类</a><span>56</span></li>
<li><em>6</em><a href="#">EasySlide jQuery图片轮显</a><span>85</span></li>
<li><em>7</em><a href="#">支持中文的鼠标取词VB源码</a><span>25</span></li>
<li><em>8</em><a href="#">多样式链接提示框组件</a><span>85</span></li>
<li><em>9</em><a href="#">类似lightbox的无刷新图片显示插件</a><span>41</span></li>
<li><em>10</em><a href="#">通用Ajax无刷新表彰验证类</a><span>62</span></li>
</ul>
</p>
</p>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是如何實現css列表排行榜的特效的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
2023年最新顯示卡效能排名列表
Jan 05, 2024 pm 11:12 PM
2023最新顯示卡跑分排行榜已經發布，關注顯示卡天梯圖的用戶們都可以來看看，最近隨著顯卡廠商不斷的發布新顯卡，甚至還有老系列的推陳出新，新的榜單已經完全不一樣了~2023最新顯示卡跑分排行榜顯示卡天梯排行2023年電腦顯示卡選購建議：1、低階顯示卡：RTX3050、5600XT、2060S都是不錯的入門之選相當於買顯卡送CPU，可用於玩LOL、 Cf、鬥陣特攻等輕量級3D網遊，性價比突出，2、入門顯示卡：3060，適合多數一般的主流3D遊戲，中低畫質吃雞。 3.中階顯示卡：NVIDIA：RTX3060Ti、RTX2
2024年最佳流暢效能的Win11版本排行
Jan 08, 2024 pm 04:53 PM
Windows11是微軟最新的作業系統版本，它帶來了全新的介面和許多增強功能。在Windows11中，有幾個版本被認為是運行最流暢的。其中包括Windows11Home和Windows11Pro。這些版本經過最佳化，能夠提供更好的效能和穩定性，在各種電腦配置下都能夠流暢運作。它們提供了廣泛的功能和工具，如瀏覽器、郵件、辦公室套件等，同時支援個人化設置，以滿足用戶的需求。 win11運行最流暢的版本有哪些1、Windows11系統旗艦版（點擊下載）其豐富多彩且別有心思的圓角設計令此作品既優雅又顯莊重，
go語言中運算子優先權列表，哪個運算子的優先權最高？
Jan 03, 2024 pm 04:59 PM
Go語言中有許多運算符，它們常被用來執行各種數學和邏輯運算。每個運算符有自己的優先級，這決定了它們在表達式中的計算順序。本文將為您介紹Go語言中運算子的優先排行榜，並找出其中優先順序最高的運算子。 Go語言中的運算子依照優先權從高到低的順序如下：括號：()。括號被用來改變運算子的優先順序。表達式中的括號最先被計算。單目運算子：+、-、!。單目運算子是指只對一
使用JavaScript開發網頁遊戲排行榜
Aug 10, 2023 am 08:17 AM
使用JavaScript開發網頁遊戲排行榜隨著網路的發展，網頁遊戲在人們的生活中佔據越來越重要的位置。為了增強玩家之間的競爭性和互動性，開發一個網頁遊戲排行榜成為了必不可少的功能。本文將介紹如何使用JavaScript開發一個簡單的網頁遊戲排行榜，並提供程式碼範例。首先，我們需要在HTML檔案中建立一個包含排行榜的容器。可以使用一個無序列表（<ul&g
比特幣交易平台app排行榜哪個好？比特幣以太幣交易平台！
Feb 05, 2024 am 11:27 AM
比特幣交易平台APP排行榜哪個好？比特幣以太幣交易平台！網路的快速發展使得人們對數位貨幣越來越感興趣。作為最知名的數位貨幣之一，比特幣在近年來引起了廣泛的關注。隨著比特幣市場的不斷擴大，越來越多的交易平台應運而生。那麼，對於那些想要透過比特幣或以太幣進行交易的投資者來說，在許多的比特幣交易平台APP中，哪一個是最好的選擇呢？本文將對當前主流的比特幣交易平台APP進行深入分析，為您提供一些建議。 1.幣安幣安作為全球最大的比特幣交易平台之一備受投資者青睞。其交易平台APP提供了比特幣、以太幣和其他
2023年前九月銷售冠軍排行榜發表：極氪智慧科技CMO揭曉最暢銷商品
Oct 13, 2023 pm 06:01 PM
10月13日消息，極氪智慧科技的CMO關海濤今天發布了一份有關2023年1月至9月期間銷售30萬元以上純電動車排行榜。令人驚訝的是，極氪001憑藉其卓越的銷售業績超越了許多競爭對手，包括蔚來和寶馬等知名品牌，成為該排行榜的銷售冠軍。據小編了解，在截止到2023年9月的前九個月中，極氪001銷售數量高達4.88萬輛，而蔚來ES6以3.82萬輛的銷售數量排名次席，蔚來ET5緊隨其後，銷售數量達3.64萬輛。 BMW的i3和iX3分別以3.60萬輛和2.95萬輛的銷售數量緊隨其後，分列第四和第五位。極
2024年資源佔用最低的Win11版本排名
Jan 09, 2024 pm 05:26 PM
Windows11是微軟最新發布的作業系統版本，它引入了許多新功能和介面設計。儘管如此，Windows11仍然有一些版本適用於資源有限的設備。 Windows11Home和Windows11Pro是佔用資源最少的版本之一。它們提供了基本的功能，如瀏覽器、郵件、辦公室套件等，並且在佔用系統資源方面相對較低。這些版本適用於那些對電腦效能要求不高的用戶，或那些使用資源有限設備的用戶。 win11佔用資源最少的版本有哪些1、Win11系統正版（點擊下載）致力於為你呈現極致的作業系統體驗！您將有機會領略各類
造夢大亂鬥十位必買英雄 造夢大亂鬥英雄排名推薦一覽
Mar 12, 2024 pm 10:40 PM
今天帶給大家的是造夢大亂鬥英雄排名，這裡有*強英雄排行榜的全部內容，對於很多新手玩家來說，不知道遊戲中的強勢英雄是很正常的事情，那麼對於遊戲英雄強度有興趣的玩家一起來看看吧。造夢大亂鬥英雄排名：Top1.孫悟空孫悟空作為遊戲的招牌，強度自然不會是太差，但是英雄的類型是戰士英雄，是比較偏向後手的戰士英雄，被動七十二變是真的很被動，受傷時會有機率分化出分身，分身會跟著本體釋放技能，存在幾秒，放完技能後就會消失，技能只能放一個，所以這個英雄強度是非常高的，但是比較被動，適合打反手，被動出來後會非常強
