如何实现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中文网！
相关推荐：
Atas ialah kandungan terperinci 如何实现css列表排行榜的特效. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1664
14
1423
52
1318
25
1269
29
1248
24
Senarai kedudukan prestasi kad grafik terkini pada tahun 2023
Jan 05, 2024 pm 11:12 PM
Kedudukan penanda aras kad grafik terkini untuk 2023 telah dikeluarkan Pengguna yang mengikuti carta tangga kad grafik boleh melihat Baru-baru ini, kerana pengeluar kad grafik terus mengeluarkan kad grafik baharu, malah memperkenalkan yang baharu kepada siri lama, senarai baharu. adalah berbeza sama sekali. ~2023 kedudukan penanda aras kad grafik, kedudukan tangga kad grafik, cadangan pembelian kad grafik komputer 2023: 1. Kad grafik rendah: RTX3050, 5600XT dan 2060S semuanya adalah pilihan peringkat permulaan yang baik membeli kad grafik dan mendapatkan CPU, yang boleh digunakan untuk bermain LOL, Cf, Overwatch dan permainan dalam talian 3D ringan yang lain, dengan prestasi kos yang cemerlang 2. Kad grafik kemasukan: 3060, sesuai untuk kebanyakan permainan 3D arus perdana umum, dengan sederhana dan kualiti imej yang rendah. 3. Kad grafik jarak pertengahan: NVIDIA: RTX3060Ti, RTX2
Kedudukan versi Win11 dengan prestasi lancar terbaik pada tahun 2024
Jan 08, 2024 pm 04:53 PM
Windows 11 ialah versi sistem pengendalian terkini Microsoft, yang membawakan antara muka baharu dan banyak ciri yang dipertingkatkan. Dalam Windows 11, terdapat beberapa versi yang dianggap berjalan paling lancar. Ini termasuk Windows 11 Home dan Windows 11 Pro. Versi ini dioptimumkan untuk memberikan prestasi dan kestabilan yang lebih baik, dan berjalan lancar pada pelbagai konfigurasi komputer. Mereka menyediakan pelbagai ciri dan alatan seperti penyemak imbas, e-mel, suite pejabat, dsb., sambil menyokong pemperibadian untuk memenuhi keperluan pengguna. Apakah versi win11 yang paling lancar?
Senarai keutamaan operator dalam bahasa Go, operator manakah yang mempunyai keutamaan tertinggi?
Jan 03, 2024 pm 04:59 PM
Terdapat banyak pengendali dalam bahasa Go, yang sering digunakan untuk melaksanakan pelbagai operasi matematik dan logik. Setiap pengendali mempunyai keutamaan tersendiri, yang menentukan susunan mereka dinilai dalam ungkapan. Artikel ini akan memperkenalkan anda kepada kedudukan keutamaan pengendali dalam bahasa Go dan mengetahui pengendali yang mempunyai keutamaan tertinggi. Pengendali dalam bahasa Go adalah seperti berikut mengikut urutan dari keutamaan tinggi ke rendah: kurungan: (). Tanda kurung digunakan untuk menukar susunan keutamaan pengendali. Tanda kurung dalam ungkapan dinilai terlebih dahulu. Pengendali unari: +, -, !. Operator unary bermaksud bahawa hanya satu
Menggunakan JavaScript untuk membangunkan kedudukan permainan web
Aug 10, 2023 am 08:17 AM
Menggunakan JavaScript untuk membangunkan kedudukan permainan web Dengan perkembangan Internet, permainan web menduduki kedudukan yang semakin penting dalam kehidupan orang ramai. Untuk meningkatkan persaingan dan interaksi antara pemain, membangunkan kedudukan permainan web telah menjadi fungsi penting. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membangunkan senarai kedudukan permainan web yang mudah dan memberikan contoh kod. Pertama, kita perlu mencipta bekas yang mengandungi papan pendahulu dalam fail HTML. Anda boleh menggunakan senarai tidak tersusun (<ul&g
Kedudukan aplikasi platform dagangan Bitcoin mana yang terbaik? Platform dagangan Bitcoin Ethereum!
Feb 05, 2024 am 11:27 AM
Kedudukan APP platform dagangan Bitcoin mana yang lebih baik? Platform dagangan Bitcoin Ethereum! Perkembangan pesat Internet telah menjadikan orang ramai semakin berminat dengan mata wang digital. Sebagai salah satu mata wang digital yang paling terkenal, Bitcoin telah menarik perhatian meluas dalam beberapa tahun kebelakangan ini. Apabila pasaran Bitcoin terus berkembang, semakin banyak platform dagangan telah muncul. Jadi, bagi pelabur yang ingin berdagang dengan Bitcoin atau Ethereum, yang manakah merupakan pilihan terbaik di antara banyak aplikasi platform dagangan Bitcoin? Artikel ini akan menjalankan analisis mendalam tentang APP platform dagangan Bitcoin arus perdana dan memberi anda beberapa cadangan. 1. Binance Binance, sebagai salah satu platform dagangan Bitcoin terbesar di dunia, digemari oleh pelabur. APP platform dagangannya menyediakan Bitcoin, Ethereum dan lain-lain
Senarai kedudukan juara jualan untuk sembilan bulan pertama 2023 dikeluarkan: Jikrypton Intelligent Technology CMO mendedahkan produk terlaris
Oct 13, 2023 pm 06:01 PM
Menurut berita pada 13 Oktober, Guan Haitao, CMO Jikrypton Intelligent Technology, hari ini mengeluarkan senarai ranking kenderaan elektrik tulen dengan jualan lebih daripada 300,000 yuan dari Januari hingga September 2023. Anehnya, Jikrypton 001 telah mengatasi banyak pesaing, termasuk jenama terkenal seperti Weilai dan BMW, untuk menjadi juara jualan dalam ranking ini kerana prestasi jualannya yang cemerlang. Mengikut pemahaman editor, dalam tempoh sembilan bulan pertama hingga September 2023, jumlah jualan Jikrypton 001 adalah setinggi 48,800 unit, manakala NIO ES6 menduduki tempat kedua dengan jumlah jualan sebanyak 38,200 unit, diikuti rapat oleh NIO ET5 , jualan volum mencecah 36,400 kenderaan. BMW i3 dan iX3 mengikuti rapat di belakang, masing-masing menduduki tempat keempat dan kelima, dengan jualan masing-masing 36,000 dan 29,500 unit. tiang
Kedudukan versi Win11 dengan penggunaan sumber paling rendah pada tahun 2024
Jan 09, 2024 pm 05:26 PM
Windows 11 ialah versi sistem pengendalian terkini yang dikeluarkan oleh Microsoft, yang memperkenalkan banyak ciri baharu dan reka bentuk antara muka. Namun, terdapat versi Windows 11 tersedia untuk peranti dengan sumber terhad. Windows 11 Home dan Windows 11 Pro adalah antara versi yang kurang intensif sumber. Ia menyediakan fungsi asas seperti penyemak imbas, e-mel, suite pejabat, dsb., dan agak rendah dalam penggunaan sumber sistem. Edisi ini bertujuan untuk pengguna yang tidak mempunyai keperluan prestasi komputer yang tinggi, atau yang menggunakan peranti dengan sumber terhad. Apakah versi win11 yang menggunakan sumber paling sedikit? 1. Versi tulen sistem win11 (klik untuk muat turun) komited untuk memberikan anda pengalaman sistem pengendalian yang terbaik! Anda akan berpeluang merasai pelbagai pengalaman
Sepuluh wira yang mesti dibeli dalam Dream Brawl Kedudukan wira yang disyorkan dalam Dream Brawl.
Mar 12, 2024 pm 10:40 PM
Apa yang saya bawakan kepada anda hari ini ialah Kedudukan Hero Brawl Impian Berikut adalah kandungan penuh ranking wira terkuat Bagi ramai pemain pemula, adalah perkara biasa untuk tidak mengetahui wira yang kuat dalam permainan Pemain yang berminat harus datang dan lihat. Kedudukan wira Dream Brawl: Top 1. Sun Wukong Sun Wukong ialah watak utama permainan, jadi kekuatannya secara semula jadi tidak terlalu teruk, tetapi jenis wira ialah wira pahlawan, yang lebih kepada wira pahlawan pukulan kilas tujuh puluh dua perubahan pasif adalah benar-benar hebat, apabila cedera, akan ada kebarangkalian untuk berpecah menjadi klon akan mengikuti badan utama untuk melepaskan kemahiran. Hanya satu kemahiran boleh dikeluarkan, jadi hero ini sangat kuat, tetapi agak pasif, sesuai untuk Apabila bermain pukulan kilas, pasif akan menjadi sangat kuat.
