CSS列表和一些变化情况
2024-05-12 23:51:07
一 基本CSS列表
<html>
<head>
<style type="text/css">
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head><body>
<ul class="disc">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul><ul class="circle">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul><ul class="square">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul><ul class="none">
<li><span style="font-family: Arial, Helvetica, sans-serif;">小兔兔</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小猫咪</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">小狗狗</span></li>
</ul>
</body></html>
定义列表风格分别为disc、circle、square、none，所显示的不同列表项；
二.
<html>
<head>
<style type="text/css">
ul
{
list-style-image: url('/i/eg_arrow.gif')
}
</style>
</head><body>
<ul>
<li>偶是小兔兔</li>
<li>偶是小猫咪</li>
<li>偶是小狗狗</li>
</ul>
</body></html>
定义列表风格为list-style-image，并赋值属性为一个图片时所显示的列表项；
三
<html>
<head>
<style type="text/css">
ul
{
margin:50px;
}
</style>
</head><body>
<ul>
<li style="list-style-image: url('img/tuxiao1.png')">偶是小兔兔</li>
<li style="list-style-image: url('img/maoxiao1.png')">偶是小猫咪</li>
<li style="list-style-image: url('img/gouxiao1.png')">偶是小狗狗</li>
</ul>
</body></html>分别为列表项目赋予不同图标所显示的列表项目；
四
<html>
<head>
<style type="text/css">
ul{font-size:50px;}
ul.disc {list-style-type: disc;}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head><body>
<ul class="disc">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul><ul class="circle">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul><ul class="square">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul><ul class="none">
<li>小兔兔</li>
<li>小猫咪</li>
<li>小狗狗</li>
</ul>
</body></html>
放大字体之后前面的列表项标记也放大；
五
<html>
<head>
<style type="text/css">
ul.none {list-style-type: none}
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.decimal {list-style-type: decimal}
ul.decimal-leading-zero {list-style-type: decimal-leading-zero}
ul.lower-roman {list-style-type: lower-roman}
ul.upper-roman {list-style-type: upper-roman}
ul.lower-alpha {list-style-type: lower-alpha}
ul.upper-alpha {list-style-type: upper-alpha}
ul.lower-greek {list-style-type: lower-greek}
ul.lower-latin {list-style-type: lower-latin}
ul.upper-latin {list-style-type: upper-latin}
ul.hebrew {list-style-type: hebrew}
ul.armenian {list-style-type: armenian}
ul.georgian {list-style-type: georgian}
ul.cjk-ideographic {list-style-type: cjk-ideographic}
ul.hiragana {list-style-type: hiragana}
ul.katakana {list-style-type: katakana}
ul.hiragana-iroha {list-style-type: hiragana-iroha}
ul.katakana-iroha {list-style-type: katakana-iroha}
</style>
</head><body>
<table border=1 bgcolor=#98FB98>
<tr>
<td>
<ul class="none">
<li>"none" 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</tb><td>
<ul class="disc">
<li>Disc 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="circle">
<li>Circle 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="square">
<li>Square 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="decimal">
<li>Decimal 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="decimal-leading-zero">
<li>Decimal-leading-zero 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="lower-roman">
<li>Lower-roman 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td>
</tr><tr>
<td>
<ul class="upper-roman">
<li>Upper-roman 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="lower-alpha">
<li>Lower-alpha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="upper-alpha">
<li>Upper-alpha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="lower-greek">
<li>Lower-greek 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="lower-latin">
<li>Lower-latin 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="upper-latin">
<li>Upper-latin 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="hebrew">
<li>Hebrew 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><tr>
<td>
<ul class="armenian">
<li>Armenian 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="georgian">
<li>Georgian 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="cjk-ideographic">
<li>Cjk-ideographic 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="hiragana">
<li>Hiragana 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="katakana">
<li>Katakana 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="hiragana-iroha">
<li>Hiragana-iroha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td><td>
<ul class="katakana-iroha">
<li>Katakana-iroha 类型</li>
<li>小兔兔</li>
<li>小猫咪</li>
</ul>
</td></body>
</html>
所有的列表样式显示；
CSS列表和一些变化情况相关推荐
- CSS列表，定位和实例
每一个成功者都有一个开始.勇于开始,才能找到成功的路! 今天让我们继续努力吧!加油! 列表 CSS 列表属性允许你放置.改变列表项标志,或者将图像作为列表项标志. CSS 列表 从某种意义上讲,不是描 ...
- CSS基础——CSS 列表和表单【学习笔记】
CSS 列表和表单 1. 列表标签(重点) 表格是用来显示数据的,列表是用来布局的. 概念: 容器里面装载着结构,样式一致的文字或图表的一种形式,叫列表 特点: 列表最大的特点就是 整齐 .整洁. 有 ...
- CSS(列表+表格+链接+自定义鼠标光标）样式
1.CSS列表样式 1.1 list-style-type属性 (值可取none.circle.square.decimal.disc.lower-alpha) 有序列表:列表项目用数字或者字母来表示 ...
- 【CSS 列表属性 (List)】
CSS 列表属性 List CSS 列表属性(List) 1. list-style 属性: 设置 列表样式 (简写属性) 1.1 list-style-type 属性: 列表项的 标记符号 (实心圆 ...
- php文章列表样式,css列表样式有哪些？css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式 水果 苹 ...
- Python使用matplotlib绘制数据去重前后的柱状图对比图（在同一个图中显示去重操作之后同一数据集的变化情况）
Python使用matplotlib绘制数据去重前后的柱状图对比图(在同一个图中显示去重操作之后同一数据集的变化情况) #仿真数据 import pandas as pd import numpy a ...
- android 利用eclipse观察内存变化情况
android 利用eclipse观察内存变化情况 使用方法比较简单: · 选择DDMS视图,并打开Devices视图和Heap视图 · 点击选择要监控的进程,比如:上图中我选择的是system_pr ...
- Web前端开发笔记——第三章 CSS语言 第四节 CSS列表、表格样式
目录 一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性 二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
最新文章
- 构建之法阅读笔记04
- php的基本语法和数据类型
- [Android] Toast问题深度剖析(二)
- 抄表 软件_云抄表小区智能电表远程抄表软件
- 关于编程思想的一点思考
- 文件上传之二利用frame实现无页面刷新的文件上传
- linux用户态使用gpio中断方法
- iOS中创建动态库及调用方法
- 10份数据中台资料分享（附下载）
- bat 调用class文件_[Golang实现JVM第五篇]静态方法调用的实现
- Bailian2701 Bailian3864 POJ NOI0105-39 与7无关的数【进制】
- xml、网络编程、 反射
- 大部分程序员还不知道的 Servelt3 异步请求，原来这么简单？
- 中国银联：金融概述、收单和清算、代收代付
- hdu 6202 cube cube cube
- Deity is on the struggling road too!
- 基于Python实现Jacobi迭代法、Gauss-Seidel迭代法和SOR法方程组（一）
- 《python 程序设计》读书笔记
- eQTL | Expression quantitative trait loci | 表达数量性状基因座 | QTL | 数量性状位点
- 酷壳: 程序员技术练级攻略