首页 > 其他分享 >无涯教程-CSS - 列表(List)

无涯教程-CSS - 列表(List)

时间:2024-01-23 15:33:00浏览次数:34  
标签:style Science List 无涯 list Social Maths Physics CSS

本章教您如何使用CSS控制list type,position,style等。

无涯教程有以下五个CSS属性,可用于控制列表-

  • list-style-type           :  设置列表项标志的类型。

  • list-style-position    :  设置列表中列表项标志的位置。

  • list-style-image        :  将图象设置为列表项标志。

  • list-style                     :  简写属性。用于把所有用于列表的属性设置于一个声明中。

  • marker-offset            : 指定标签与列表中文本之间的距离。

现在将通过示例了解如何使用这些属性。

list-style-type 属性

通过 list-style-type 属性,可以在无序列表的情况下控制项目符号点的形状或样式,并在有序列表的情况下控制编号字符的样式。

这是可以用于无序列表的值-

Sr.No. Value & Remark
1

none

NA

2

disc( default )

实心圆

3

circle

一个空圆

4

square

实心方块

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-roman;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

它将产生以下输出-

 list-style-position 属性

list-style-position 属性指示标签应出现在包含项目符号点的框的内部还是外部。它可以是两个值之一-

Sr.No. Value & Remark
1

none

NA

2

inside

列表项目标签放置在文本以内,且环绕文本根据标签对齐。

3

outside

默认值。保持标签位于文本的左侧。列表项目标签放置在文本以外,且环绕文本不根据标签对齐。

这是一个例子-

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style-type:circle; list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ul style="list-style-type:square;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style-type:decimal;list-stlye-position:outside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
      
      <ol style="list-style-type:lower-alpha;list-style-position:inside;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

它将产生以下输出-

list-style-image 属性

列表样式图像允许您指定图像,以便可以使用自己的符号样式。如果找不到给定的图像,则使用默认符号。

<html>
   <head>
   </head>
   
   <body>
      <ul>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol>
         <li style="list-style-image: url(/images/bullet.gif);">Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

它将产生以下输出-

list-style 属性

列表样式允许您将所有列表属性指定为一个表达式。这些属性可以按任何顺序出现。

<html>
   <head>
   </head>
   
   <body>
      <ul style="list-style: inside square;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html> 

它将产生以下输出-

marker-offset 属性

marker-offset 属性可让您指定标签和与该标签有关的文本之间的距离。

<html>
   <head>
   </head>

   <body>
      <ul style="list-style: inside square; marker-offset:2em;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ul>
      
      <ol style="list-style: outside upper-alpha; marker-offset:2cm;">
         <li>Maths</li>
         <li>Social Science</li>
         <li>Physics</li>
      </ol>
   </body>
</html>

它将产生以下输出-

参考链接

https://www.learnfk.com/css/css-lists.html

标签:style,Science,List,无涯,list,Social,Maths,Physics,CSS
From: https://blog.51cto.com/u_14033984/9380472

相关文章

  • css 起步
    什么是CSSCSS(CascadingStyleSheets,层叠样式表)是为web内容添加样式的代码。和HTML类似,CSS也不是真正的编程语言,甚至不是标记语言。CSS是一门样式表语言,可以用它来选择性地为HTML元素添加样式。一般在HTML文件中头部(也就是head标签之间)引入CSS:<linkhref="styl......
  • 无涯教程-CSS - 边框(Border)
    border属性使您可以指定表示元素的边框。您可以更改边框的三个属性-border-color   : 指定边框的颜色。border-style    : 指定边框样式为solid,dashedline,double。border-width   :指定边框的宽度。现在,无涯教程将通过示例了解如何使用这些属性......
  • 无涯教程-CSS - 表格(Table)
    本教程将教您如何使用CSS设置HTMLTable的不同属性。border-collapse  : 设置是否把表格边框合并为单一的边框。border-spacing  : 设置分隔单元格边框的距离。caption-side     :  设置表格标题的位置。empty-cells      :  设置是......
  • 无涯教程-CSS - 链接(Links)
    当无涯教程讨论CSS的伪类时,将重新访问相同的属性。:link    : 表示普通的、未被访问的链接。:visited  : 表示用户已访问的链接。:hover   : 表示鼠标指针位于链接的上方。:active  : 表示链接被点击的时刻。记住a:hover必须在CSS定义中的a:......
  • CSS中的选择器
    CSS中的选择器1.基本选择器E{}选择某一种元素*{}*代表全部的元素E[attr]{}属性选择器^=attr的开头是?*=包含=严格意义上那个的等于ID选择器#id{}class选择器.class{}包含选择器selector1selector2...{}子元素选择器selector1>selector2>...{}兄弟选择......
  • css变量基本操作
    1.html中css变量写法<divstyle="--color:#ccc;"><spanstyle="border:1pxsolidvar(--color);"></div><ul><listyle="--i:1"></li><listyle="--i:2"></li>......
  • vector 和 list的区别
    vectorlist定义动态数组双向链表增加push_backpush_back,push_front,insert删除pop_backpop_back,pop_front,remove排序头文件sort成员函数sortlist经过排序、插入操作后,迭代器不会失效,仍指向原来的元素#include<iostream>#include<list>......
  • 字符串转化为toList
    certNameList="certNameList":"消防设施工程专业承包二级,地基基础工程专业承包一级,电子与智能化工程专业承包一级,建筑装修装饰工程专业承包一级,建筑幕墙工程专业承包一级",for(EntQualificationVOvo:entQualificationVOList){StringcertNameList......
  • pip list 与 conda list 的区别
    condaconda是Anaconda发行版中的包管理工具,主要用于管理包含Python及其相关库的科学计算环境,如NumPy、SciPy、Pandas、Matplotlib等等,它支持创建和管理Python环境,可以方便地在不同的项目中使用不同的库及其版本。condalist命令用于列举当前Python环境下所有使用cond......
  • 无涯教程-CodeIgniter - 国际化
    CodeIgniter中的语言类提供了一种支持多种国际化语言的简便方法。在某种程度上,无涯教程可以使用不同的语言文件以多种不同的语言显示文本。可以将不同的语言文件放在application/language目录中。可以在system/language目录中找到系统语言文件,但是要将自己的语言添加到应用程序......