文档章节

CSS 列表样式详解

切切歆语
 切切歆语
发布于 2017/07/13 11:57
字数 331
阅读 31
收藏 0

CSS列表用于前端的列表排列。

CSS列表属性作用如下:

  • 设置不同的列表项标记为有序列表
  • 设置不同的列表项标记为无序列表
  • 设置列表项标记为图像

列表

在HTML中,有两种类型的列表:

  • 无序列表 - 列表项标记用特殊图形(如小黑点、小方框等)
  • 有序列表 - 列表项的标记有数字或字母

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

1:无序列表实例

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
   <p>无序列表实例:</p>

    <ul class="a">
     <li>射雕英雄传</li>
     <li>笑傲江湖</li>
     <li>倚天屠龙记</li>
    </ul>
    
    <ul class="b">
     <li>鹿鼎记</li>
     <li>天龙八部</li>
     <li>神雕侠侣</li>
    </ul>

效果:

      

2:有序列表实例

ol.c {list-style-type:decimal-leading-zero;}
ol.d {list-style-type:lower-alpha;}
  <p>有序列表实例:</p>

   <ol class="c">
       <li>射雕英雄传</li>
       <li>笑傲江湖</li>
       <li>倚天屠龙记</li>
   </ol>
     
   <ol class="d">
     <li>鹿鼎记</li>
     <li>天龙八部</li>
     <li>神雕侠侣</li>

  </ol>

效果:

    

还可以设置为图片,通过  list-style-image

ul.cc{

    list-style-image: url("http://www.w3school.com.cn/i/eg_arrow.gif")
    
}

<ul class="cc">
    <li>三国演义</li>
    <li>红楼梦</li>
</ul>

效果:

      

在前端开发中,就可以通过列表 以上的知识来完成网站中相应的列表模块了。

© 著作权归作者所有

切切歆语
粉丝 21
博文 335
码字总数 231041
作品 0
杭州
程序员
私信 提问
《HTML与CSS知识》系列分享专栏

收藏HTML和CSS方面的技术文章,作为一个WEB开发者,必须要知道HTML和CSS方面的知识,即使作为后台开发者也应该知道一些常用的HTML和CSS知识,甚至架构师也要了解,这样才会开发出实用的网站来...

开元中国2015
2018/10/28
0
0
DW中CSS属性详解

作者:未知 来源:5D多媒体 在Dreamweaver的CSS样式里包含了W3C规范定义的所有CSS1的属性,Dreamweaver把这些属性分为Type(类型)、Background(背景)、Block(块)、Box(盒子)、Border(...

晨曦之光
2012/03/09
2.1K
0
web设计之CSS命名规范详解

web设计之CSS命名规范: 1.1 公共部分和经常要用到的样式 整个容器:container 外围整体布局: wrap 页头部分:head/header/top 内容:content 页脚部分:foot/footer/bottom 栏目:column ...

宁馨清阁
2013/03/08
0
0
web前端基础案例-鼠标悬停图文切换效果

酷鼠标悬停图文切换 效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企业布局思维运用,开发标准。 👇html代码: 👇css代码: 文章分享...

急速奔跑中的蜗牛
2018/02/07
0
0
2019 前端面试 | 知其然,并知其所以然

Web 前置知识 《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web01] 《初次接触前端,我们要理解哪些名词?》 《工欲善其事,必先利其器——软件安装、环境搭建》 《做一次山大王,...

itsOli
前天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

威胁快报|新兴挖矿团伙借助shodan作恶,非web应用安全再鸣警钟

近日,阿里云安全发现了一个使用未授权访问漏洞部署恶意Docker镜像进行挖矿的僵尸网络团伙。我们给这一团伙取名为Xulu,因为该团伙使用这个字符串作为挖矿时的用户名。 Xulu并不是第一个攻击...

阿里云官方博客
18分钟前
3
0
MD5 加密需要注意编码格式!!!

相信做过MD5加密的童鞋都遇到过字符编码的坑,一般加密出来的结果和其他人不一样都是字符编码不一致导致的,比如类文件的字符编码、浏览器的字符编码等和对方不一致,所以就需要转码统一字符...

jason_kiss
20分钟前
1
0
python中字符串的操作

https://www.jianshu.com/p/7fc851b6a7ee

writeademo
29分钟前
1
0
如何制定 Java 性能调优标准?

想让你的程序更快更稳,但是系统经常出各种 bug,无从下手?Java 性能调优全攻略来啦! 我有一个朋友,有一次他跟我说,他们公司的系统从来没有经过性能调优,功能测试完成后就上线了,线上也...

Java领航员
30分钟前
2
0
java博客项目

项目地址:https://github.com/otale/tale 项目演示地址:https://tale.biezhi.me/ 项目介绍:Tale使用轻量级mvc框架Blade进行开发,默认主题使用漂亮的pinghsu, 特征 设计简洁,界面美观 ...

编程资源库
31分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部