要制作文章排行前10、或评论排行榜1、2、3、4…，还要给前三名加上不同的背景，可以用纯css实现（用Ol，li），但通常网页制作中使用ul的比较多，因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示，容易引起浏览器兼容问题，所以遇到这样的有序排版布局，最简单是将序号切成背景图片!
使用ul li实现文章排行有序排版布局。
125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2194.html
微信扫一扫 
支付宝扫一扫 
99%的人还看了以下文章
-
css布局基础：浮动和清除浮动练习1
主要知识点： 1、浮动：让元素脱离标准流，从而实现灵活的布局效果。 2、浮动只能左右，不能上下。float:left/right/none。 3、子元素浮动会造成父元素高度塌陷，清除浮动的3种方法： 方法1：通过overflow属性 方法2：通过clear属性 方法3：通过伪元素选择器（推荐） 效果图： 参考： <!DOCTYPE html> &…
-
第10课：外边距和内边距
上一课，你学习了盒状模型。在这一课，我们将了解如何通过设置margin（外边距）和padding（内边距）这两个CSS属性来改变元素的显示。 为元素设置外边距 为元素设置内边距 为元素设置外边距 一个元素有上（top）、下（bottom）、左（left）、右（right）四个边。外边距（margin）表示从一个元素的边到相邻元素(或者文档边界)之间的距离。可…
-
响应式布局和自适应的区别
客户端，PC、平板、手机，各种尺寸，要给电脑PC和手机分别设计不同的网页吗？要给每一个手机分别设计一个网页吗？ 不需要，因为有了响应式布局。 响应式布局被大家熟知的一个重要原因就是Twitter开源了bootstrap。。 响应式布局和自适应的区别： 自适应是为了解决如何才能在不同大小的设备上呈现相同的网页。 手机的屏幕比较小，宽度通常在600像素以下，pc…
-
div+css制作上中下，中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点，今天我们以最常见的上中下结构，中间又分为两列的全屏自适应布局为例，教大家如何制作自适应布局网页。 上中下结构，中间又分为两列的全屏自适应布局HTML代码： <div class=”g-hd”></div> <div class=”g-sd”></div> <div c…
