Home Web Front-end CSS Tutorial How to implement special effects of css list ranking list

How to implement special effects of css list ranking list

Jun 15, 2018 am 09:32 AM
Ranking list

This list is suitable for news and download rankings. It can distinguish colors and adopts one row and two columns layout. This is the most standard CSS layout method and has detailed implementation code. If you are interested, you can refer to it. I hope it can help you

CSS list making. This is a relatively basic technique, but many friends still can’t use it well. Then take a look at this list. It is suitable for news and download rankings, and you can distinguish colors. Using one row and two columns layout is the most standard CSS layout method.

<!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>
Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Pure CSS to achieve speech and voice bubble effects

CSS Sprite analysis of intercepting small images from large images

The above is the detailed content of How to implement special effects of css list ranking list. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The latest graphics card performance ranking list in 2023 The latest graphics card performance ranking list in 2023 Jan 05, 2024 pm 11:12 PM

The latest graphics card benchmark rankings for 2023 have been released. Users who follow the graphics card ladder chart can take a look. Recently, as graphics card manufacturers continue to release new graphics cards, and even introduce new ones to old series, the new list is completely different. ~2023 latest graphics card benchmark rankings, graphics card ladder rankings, 2023 computer graphics card purchasing suggestions: 1. Low-end graphics cards: RTX3050, 5600XT, and 2060S are all good entry-level choices. It is equivalent to buying a graphics card and getting a CPU, which can be used to play LOL, Cf, Overwatch and other lightweight 3D online games, with outstanding cost performance. 2. Entry graphics card: 3060, suitable for most general mainstream 3D games, with medium and low image quality. 3. Mid-range graphics card: NVIDIA: RTX3060Ti, RTX2

Ranking of Win11 versions with the best smooth performance in 2024 Ranking of Win11 versions with the best smooth performance in 2024 Jan 08, 2024 pm 04:53 PM

Windows 11 is Microsoft's latest operating system version, which brings a new interface and many enhanced features. In Windows 11, there are several versions that are considered to run the smoothest. These include Windows 11 Home and Windows 11 Pro. These versions are optimized to provide better performance and stability, and run smoothly on a variety of computer configurations. They provide a wide range of features and tools such as browsers, emails, office suites, etc., while supporting personalization to meet user needs. What are the smoothest versions of win11? 1. Windows 11 System Ultimate Edition (click to download). Its colorful and thoughtful rounded corner design makes this work both elegant and solemn.

Using JavaScript to develop web game rankings Using JavaScript to develop web game rankings Aug 10, 2023 am 08:17 AM

Using JavaScript to develop web game rankings With the development of the Internet, web games occupy an increasingly important position in people's lives. In order to enhance competition and interaction between players, developing a web game ranking has become an essential function. This article will introduce how to use JavaScript to develop a simple web game ranking list and provide code examples. First, we need to create a container containing the leaderboard in an HTML file. You can use an unordered list (&lt;ul&g

Operator precedence list in Go language, which operator has the highest precedence? Operator precedence list in Go language, which operator has the highest precedence? Jan 03, 2024 pm 04:59 PM

There are many operators in Go language, which are often used to perform various mathematical and logical operations. Each operator has its own precedence, which determines the order in which they are evaluated in an expression. This article will introduce you to the priority ranking of operators in the Go language and find out the operator with the highest priority. The operators in Go language are as follows in order from high to low precedence: parentheses: (). Parentheses are used to change the precedence order of operators. Parentheses in expressions are evaluated first. Unary operators: +, -, !. Unary operator means that only one

Which Bitcoin trading platform app ranking is best? Bitcoin Ethereum trading platform! Which Bitcoin trading platform app ranking is best? Bitcoin Ethereum trading platform! Feb 05, 2024 am 11:27 AM

Which Bitcoin trading platform APP ranking is better? Bitcoin Ethereum trading platform! The rapid development of the Internet has made people more and more interested in digital currencies. As one of the most well-known digital currencies, Bitcoin has attracted widespread attention in recent years. As the Bitcoin market continues to expand, more and more trading platforms have emerged. So, for those investors who want to trade with Bitcoin or Ethereum, which one is the best choice among the many Bitcoin trading platform apps? This article will conduct an in-depth analysis of the current mainstream Bitcoin trading platform APPs and provide you with some suggestions. 1. Binance Binance, as one of the world’s largest Bitcoin trading platforms, is favored by investors. Its trading platform APP provides Bitcoin, Ethereum and other

The sales champion ranking list for the first nine months of 2023 is released: Jikrypton Intelligent Technology CMO reveals the best-selling products The sales champion ranking list for the first nine months of 2023 is released: Jikrypton Intelligent Technology CMO reveals the best-selling products Oct 13, 2023 pm 06:01 PM

According to news on October 13, Guan Haitao, CMO of Jikrypton Intelligent Technology, today released a ranking list of pure electric vehicles with sales of more than 300,000 yuan from January to September 2023. Surprisingly, Jikrypton 001 has surpassed many competitors, including well-known brands such as Weilai and BMW, to become the sales champion in this ranking due to its excellent sales performance. According to the editor's understanding, in the first nine months to September 2023, the sales volume of Jikrypton 001 was as high as 48,800 units, while the NIO ES6 ranked second with a sales volume of 38,200 units, followed closely by the NIO ET5 , sales volume reached 36,400 vehicles. BMW's i3 and iX3 followed closely behind with sales of 36,000 and 29,500 units respectively, ranking fourth and fifth. pole

Ranking of Win11 versions with the lowest resource usage in 2024 Ranking of Win11 versions with the lowest resource usage in 2024 Jan 09, 2024 pm 05:26 PM

Windows 11 is the latest operating system version released by Microsoft, which introduces many new features and interface designs. Still, there are versions of Windows 11 available for devices with limited resources. Windows 11 Home and Windows 11 Pro are among the least resource intensive versions. They provide basic functions such as browsers, email, office suites, etc., and are relatively low in system resource usage. These editions are intended for users who do not have high computer performance requirements, or who use devices with limited resources. What are the versions of win11 that occupy the least resources? 1. The genuine version of win11 system (click to download) is committed to presenting you with the ultimate operating system experience! You will have the opportunity to experience various

Ten must-buy heroes in Dream Brawl. Recommended hero rankings in Dream Brawl. Ten must-buy heroes in Dream Brawl. Recommended hero rankings in Dream Brawl. Mar 12, 2024 pm 10:40 PM

What I bring to you today is the Dream Brawl Hero Ranking. Here is the full content of the strongest hero ranking. For many novice players, it is normal to not know the strong heroes in the game. So for the strength of the game heroes Interested players should come and take a look. Dream Brawl hero ranking: Top 1. Sun Wukong Sun Wukong is the signature of the game, so his strength is naturally not too bad, but the type of hero is a warrior hero, which is more of a backhand warrior hero. His seventy-two passive changes are really good. Passive, when injured, there will be a probability of splitting into a clone. The clone will follow the main body and release skills. It will exist for a few seconds and disappear after releasing the skill. Only one skill can be released, so this hero is very strong, but relatively passive, suitable for When playing backhand, the passive will be very powerful.

See all articles