首页 >web前端 >css教程 > 正文

css中列表样式是什么

原创2021-03-21 17:56:2501004

css中列表样式是:1、css有序列表【ol】和css无序列表【ul】;2、css列表标号样式【list-style-type】;3、css标号样式的显示方式【list-style-position】。

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css中列表样式是:

1、css有序列表(ol)和css无序列表(ul)

  list.html
 
  <!doctypehtml><html><head>
 
  <metacharset="utf-8">
 
  <title>列表样式</title>
 
  <linkhref="box.css"type="text/css"rel="stylesheet"></head><body>
 
  <p>
 
  <ul>
 
  <li>水果<ol>
 
  <li>苹果</li>
 
  <li>香蕉</li>
 
  <li>梨子</li>
 
  </ol>
 
  </li>
 
  </ul>
 
  </p></body></html>

2、css列表标号样式list-style-type

  属性值:

  •   circle;空心圆

  •   disc;实心圆

  •   decimal;数字

  list.css
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }

3、css标号样式的显示方式list-style-position

  属性值:outside(在文本之外,默认)

  inside(和文本一起)

  list.css
 
  ul{
 
  text-align:center;
 
  list-style-position:outside;
 
  }
 
  ul>li{
 
  list-style-type:circle;
 
  }
 
  ul>li>ol>li{
 
  list-style-type:disc;
 
  }

相关教程推荐:CSS视频教程

以上就是css中列表样式是什么的详细内容,更多请关注php中文网其它相关文章!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:css 列表
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    作者信息

    coldplay.xixi

    好好学习 天天向上

    最近文章
    重点详解Java类和对象1410
    浅析php简单操作mysql锁机制3021
    php无法加载mysql怎么办1597
    推荐视频教程
  • Css3特效效果视频教程Css3特效效果视频教程
  • CSS3精讲视频教程CSS3精讲视频教程
  • CSS视频教程-玉女心经版CSS视频教程-玉女心经版
  • HTML+CSS网页基础HTML+CSS网页基础
  • CSS3 极速入门CSS3 极速入门
  • 视频教程分类