美文网首页
使无序列表li前面的序号变成这样①②...

使无序列表li前面的序号变成这样①②...

作者: 小m_up | 来源:发表于2017-07-31 16:28 被阅读63次

今天在看别人的面试经历的时候,碰到了这样一个题,刚开始还觉得只是lilist-style-type,但是突然一想,根本就没有这个type,仔细一想,这个应该是考察你的css,那么我就使用css解决了这个问题:
html代码如下:

   <ul>
      <li><span>1</span>1</li>
      <li><span>2</span>2</li>
      <li><span>3</span>3</li>
      <li><span>4</span>4</li>
      <li><span>5</span>5</li>
      <li><span>6</span>6</li>
   </ul>

css如下:

span{
      text-align: center;
      display:inline-block;
      background-color:white;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      line-height: 25px;
      margin-right: 10px;
      border:1px solid black;
}
li{
     list-style-type: none;
}

结果如下:


相关文章

  • 使无序列表li前面的序号变成这样①②...

    今天在看别人的面试经历的时候,碰到了这样一个题,刚开始还觉得只是li的list-style-type,但是突然一想...

  • 列表元素

    无序列表ul表内的条目li有序列表ol 属性:type(序号形式) start (起始于)reversd(改变...

  • 定义列表

    1、ul,li;ol,li;dl,dt,dd的区别 首先ul为无序列表,显示出来就是圆点;ol为有序列表,是有序号...

  • 爬虫_025_HTML列表

    列表分类:有序列表、无序列表、自定义列表 (1)有序列表:ul标签中嵌套li标签,li标签中放想要放的数据。前面的...

  • 第二节:HTML知识点升级

    高级标签 列表:无序列表ul>li;有序列表ol>li;自定义列表dl>dt+dd;列表嵌套ul>li>ul>li...

  • web前端入门到实战:css如何玩转有序无序列表项list样式

    在无序列表ul>li中,无线列表的标志是出现在各列表前面的圆点。在有序列表ol>li中,前面默认带有数字,如何修改...

  • markdown 使用

    markdown使用 markdwon使用 一、列表 无序列表 文本 文本 有序列表 序号 序号 二、链接 简书网...

  • 列表 长度单位 颜色单位 字体样式

    1、列表(可以互相嵌套): 无序列表 :ul(块元素) li(块元素)有序列表:ol li定义列表:dl dt ...

  • 前端(三)

    文本标签: 列表: 1. 无序列表 使用ul和li来创建一个无序列表。 2. 有序列表 使用ol和li来创建一个无...

  • Markdown 语法测试

    无序列表 列表1 列表2 有序列表 序号1 序号2 序号3 连接 百度 图片 引用 我是一个兵 粗体与斜体 我是斜...

网友评论

      本文标题:使无序列表li前面的序号变成这样①②...

      本文链接:https://www.haomeiwen.com/subject/ozjrlxtx.html