CSS布局时如何控制li列表样式

overme2个月前 (10-17)网页设计203

li列表标签默认样式是前面有一个小圆点或者是数字序号。这个默认样式可以修改吗,当然是可以修改的!

如何通过css修改li标签样式?

在CSS中控制li列表的属性,常用的有list-style-type属性、list-style-image属性、list-style-position属性和list-style属性。

一、list-style-type属性

list-style-type属性是用来定义li列表的项目符号的,即列表前面的修饰。list-style-type属性是一个可继承的属性。其语法结构如下:

list-style-type属性的属性值有很多,在这里我们只是列举了比较常用的几个。

disc: CSS1 实心圆
circle : CSS1 空心圆
square: CSS1 实心方块
decimal: CSS1 阿拉伯数字
lower-roman: CSS1小写罗马数字
upper-roman: CSS1大罗马数字
lower-alpha: CSS1 小写英文字母
upper-alpha: CSS1 大写英文字母
none : CSS1 不使用项目符号
armenian: CSS2 传统的亚美 尼亚数字
cjk-ideographic: CSS2 浅白的表意数字
georgian: CSS2 传统的乔治数字
lower-greek: CSS2 基本的希腊小写字母
hebrew: CSS2 传统的希伯莱数字
hiragana: CSS2 日文平假名字符
hiragana-iroha: CSS2 日文平假名序号
katakana: CSS2 日文片假名字符
katakana-iroha: CSS2 日文片假名号

使用list-style-type属性的示例代码如下:

  1. <style>
  2.         .article li
  3.         {list-style-type: decimal;}
  4. </style>
  5. <body>
  6.   <div class=”article”>
  7.     <ul>
  8.       <li>列表内容1</li>
  9.       <li>列表内容2</li>
  10.       <li>列表内容3</li>
  11.      <li>列表内容4</li>
  12.    </ul>
  13.         </div>
  14. </body>

复制代码

二、list-style-image属性

list-style-image属性用来定义使用图片代替项目符号。它也是一个可继承属性,其语法结构如下:

list-style-image属性可以取两个值:   none:没有替换的图片。     url:要替换图片的路径。

使用方法:
list-style-image: url(img/bg01.jpg)

三、list-style-position属性

list-style-position属性,是用来定义项目符号在列表中显示位置的属性。它同样是一个可继承的属性,语法结构如下:

list-style-position:inside/outside

inside:项目符号放置在文本以内。

outside:项目符号放置在文本以外。

四、list-style属性

list-style属性是综合设置li样式的属性,也是一个可以继承的属性,各个值位置可以互换:

list-style: decimal inside;

相关文章


		CSS控制文本超过宽度 overflow显示为点点…

CSS控制文本超过宽度 overflow显示为点点…

如下图所示,想要的标题效果是只在一行内显示,但有点标题文字较多。在不使用字符截取的情况下,有没有办法通过Css Overflow控制文本超过宽度时,显示为点点…呢! 以下是实现方法: 元...


		Css如何控制网页元素显示在最上层

Css如何控制网页元素显示在最上层

如下图所示,网页中的两个相邻元素,前一个元素被后一个元素遮挡了。这种情况如何调整,才能将前一个元素显示在最前面呢? 方法:为元素设置Z-index样式 z-index:auto   auto可...


		如何解决Css Z-index不生效的问题

如何解决Css Z-index不生效的问题

说来挺简单的一个事,小编硬是鼓捣了小一个上午,才解决这个问题。想着怕以后再遇到,也是为了给广大自学爱好者分享经验,就在此分享z-index不生效的解决方法: 现象:如图两个相邻的元素,想要后一个元...


		Css如何给Table下的行tr设置下边框

Css如何给Table下的行tr设置下边框

如下图所示,网页HTML代码中使用是table tr,如何使用Css给每行tr设置下边框呢! 有时候有设置tr边框的需求,写下如下css 开始小编按以往Css的书写方法,尝试写了如下CSS代码...

如何使用CSS实现前后两个元素位置交换

如摘要所述,PC端左右布局的HTML元素,在手机移动端显示时,分别按Width 100%显示,结果展示的是前后的效果。 想要交换两个元素的显示顺序,在此分享实现方法: 首先,想要单独控制html...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。