How to implement special effects of css list 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>
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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 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 (<ul&g

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 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

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

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

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.
