要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫 
99%的人还看了以下文章
-
js验证表单验证，包括用户名、密码、确认密码等，用户注册页面实例
本文是js验证表单输入的入门级教程，要求你会基础的HTML，JS知识。 页面HTML 表单代码： <form action=”” method=”post” enctype=”multipart/form-data” name=”reg_form”> <div class=”info_input”> <div cl…
-
太赞了！推荐2个多彩渐变配色网站
1、根据心情和情绪生成的渐变色 https://gradienmood.posandu.me/ 色彩是拥有情绪的，但是有情绪的色彩有不一定仅仅只有一种颜色。这个名为 Gradien Mood 的渐变色网站会将不同感觉和渐变色搜集起来，其中有的渐变色甚至拥有极为复杂的情绪，而你需要做的，就是输入你想传递的情绪，然后就能搜到相关的情绪和色彩，包括渐变的 CSS …
-
第3课：HTML的元素与标签
本节课我们学习HTML的重要成分——元素（element）。元素用于结构化HTML文档，并告知浏览器如何呈现网页。一般来说，元素由首标签（start tag）、内容（content）和尾标签（end tag）构成。 “标签”是什么？ 标签（tag）指示元素的起始与结束，所有标签都由“<”及“＞”所围住，如<html>。一般标签成对出现，首标…
-
CSS3:Box-shadow 教程及实例-制作逼真的图片阴影效果
box-shadow属性的基本用法 使用Box-shadow制作逼真的图片阴影效果 使用伪元素::before和::after，我们能实现非常逼真的只有图片才能实现的阴影效果。 HTML: <div class=”box11 shadow”></div> CSS: .box11 { width: 300px; height: 100p…
-
第9课：在网页中添加图像
假如能把自己喜欢的的图像放到网页上，那就太好了。 这貌似有点难度。。。 也许是有点难度，但其实也不难，一个元素就可以搞定： 例1： <img src=”http://www.125jz.com/wp-content/uploads/2018/01/liudehua.jpg” /> 该例在浏览器中将显示如下： 你要做的只是：告诉浏览器你要插入一张图…
-
CSS制作简洁的栏目/标题样式
CSS制作简洁的栏目/标题样式 HTML: <h2><strong>栏目名称</strong></h2> <h2><strong class=”blue”>网页设计</strong></h2> <h2><strong>网站制作</st…
