菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练！告别无效练习

接私单赚外块

VIP优先接，累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

开通VIP

领取更多软件工程师实用特权

 入驻

搜索

类型： 全部 | 视频教程 | 实战项目 | 项目源码 | 技术手册 | 课件 | 测试题 | 技术文章 | 软件下载 | 问答求助
水平： 全部 | 入门 | 普通 | 进阶

历史记录 清除记录

    你还没搜索过喔。

近期热搜

项目开发全程实录（电商EW_Shop）

8706 人 2年前

轻松学会Laravel-项目篇（商城API）

2027 人 2年前

Python数据分析2.0-金融

328 人 2年前

Python办公自动化2.0

243 人 2年前
阅读(17) 书签 赞(0) 我要纠错

CSS列表

原创
CSS教程
05/13 14:22 更新
尊享10+项VIP特权
会员卡
开通学习猿地会员卡

列表中所有不同的列表项标记

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul.a {list-style-type:circle;}
    ul.b {list-style-type:disc;}
    ul.c {list-style-type:square;}
    
    ol.d {list-style-type:armenian;}
    ol.e {list-style-type:cjk-ideographic;}
    ol.f {list-style-type:decimal;}
    ol.g {list-style-type:decimal-leading-zero;}
    ol.h {list-style-type:georgian;}
    ol.i {list-style-type:hebrew;}
    ol.j {list-style-type:hiragana;}
    ol.k {list-style-type:hiragana-iroha;}
    ol.l {list-style-type:katakana;}
    ol.m {list-style-type:katagana-iroha;}
    ol.n {list-style-type:lower-alpha;}
    ol.o {list-style-type:lower-greek;}
    ol.p {list-style-type:lower-latin;}
    ol.q {list-style-type:lower-roman;}
    ol.r {list-style-type:upper-alpha;}
    ol.s {list-style-type:upper-latin;}
    ol.t {list-style-type:upper-roman;}
    
    ol.u {list-style-type:none;}
    ol.v {list-style-type:inherit;}

</style>
</head>

<body>
    <ul class="a">
        <li>Circle 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ul class="b">
        <li>Disc 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ul class="c">
        <li>Square 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
    
    <ol class="d">
        <li>Armenian 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="e">
        <li>Cjk-ideographic 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="f">
        <li>Decimal 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="g">
        <li>Decimal-leading-zero 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="h">
        <li>Georgian 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="i">
        <li>Hebrew 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="j">
        <li>Hiragana 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="k">
        <li>Hiragana-iroha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="l">
        <li>Katakana 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="m">
        <li>Katakana-iroha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="n">
        <li>Lower-alpha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="o">
        <li>Lower-greek 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="p">
        <li>Lower-latin 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="q">
        <li>Lower-roman 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="r">
        <li>Upper-alpha 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="s">
        <li>Upper-latin 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="t">
        <li>Upper-roman 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="u">
        <li>None 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>
    
    <ol class="v">
        <li>inherit 样式</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ol>

</body>
</html>

设置作为列表项标记的图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul 
    {
    	list-style-image:url('/statics/images/sqpurple.gif');
    }
</style>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
</body>
</html>

使用Crossbrowser解决方案设置一个列表项标记的图像

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul
    {
    	list-style-type:none;
    	padding:0px;
    	margin:0px;
    }
    ul li
    {
    	background-image:url("/statics/images/sqpurple.gif");
    	background-repeat:no-repeat;
    	background-position:0px 5px; 
    	padding-left:14px;
    }
</style>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
</body>

</html>

在一个声明中的所有列表属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>学习猿地</title> 
<style>
    ul 
    {
    	list-style:square url("/statics/images/sqpurple.gif");
    }
</style>
</head>

<body>
    <ul>
        <li>咖啡</li>
        <li>茶</li>
        <li>可口可乐</li>
    </ul>
</body>
</html>

推荐文章

推荐教程

推荐课程

    © 著作权归作者所有

    举报
    综合评分：9.9 评分 请对本文进行纠错，及学习过程中有困难疑惑可在此进行讨论

    学习猿地
    程序员学习的地方

    扫码关注

    成就自己的只需一套精品