CSS系列——那些容易被人遗忘的列表属性

2024-03-04 00:32

本文主要是介绍CSS系列——那些容易被人遗忘的列表属性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在之前我们学过CSS的列表,有有序列表、无序列表、自定义列表,接下来拿无序列表来举例。

1.list-style-image 设置列表项标记的图像(项目符号)

只有一个属性url,引到一个图片

ul{list-style-image:url("images/icon.png");}

示例

用list-style-image重置项目符号示例

.test{list-style-image:url(skin/ico.png);}

//整体重置作用于ul,单个设置用于li上

< ul class="test">

< li>列表项一< /li>

< li>列表项一< /li>

< li>列表项一< /li>

< li>列表项一< /li>

< /ul>

代码示例:

< !DOCTYPE html>

< html>

< head lang="en">

< meta charset="UTF-8">

< title>列表属性< /title>

< style>

.test{

list-style-image:url("images/duihao.png");

}

< /style>

< /head>

< body>

< h3>大家喜欢吃什么水果?< /h3>

< ul class="test">

< li>苹果< /li>

< li>香蕉< /li>

< li>西瓜< /li>

< /ul>

< /body>

< /html>

图例为:

2.list-style-position 设置列表项标记如何根据文本排列

这个属性有两个值outside和inside

outside项目符号放在文本以外(默认)

ul li{list-style-position:outside; width:100px; border:1px soild red;}

inside 项目符号放在文本以内

ul li{list-style-position:inside; width:100px; border:1px soild red;}

代码示例:

< !DOCTYPE html>

< html>

< head lang="en">

< meta charset="UTF-8">

< title>列表属性< /title>

< style>

.test{

list-style-image:url("images/duihao.png");

}

li{

list-style-position:outside;

width:100px;

border:1px soild red;

}

< /style>

< /head>

< body>

< h3>大家喜欢吃什么水果?< /h3>

< u>< ul class="test">

< li>苹果< /li>

< li>香蕉< /li

< li>西瓜< /li>

< /u>

< /body>

< /html>

图例为:

若想要列表符号也在红格内, 则要把<u>list-style-position:outside;</u> 中改为<u>list-style-position:inside;</u>

3.list-style-type 设置列表项所使用的预设标记

可选值

none不使用项目符号

disc实心圆(相当于html属性type=“disc”)

circle空心圆

square实心方块

示例

ul {list-style-type:circle;}

代码示例:

< !DOCTYPE html>

< html>

< head lang="en">

< meta charset="UTF-8">

< title>列表属性< /title>

< style>

.test{

list-style-type:square;

}

li{

list-style-position:outside;

width:100px;

border:1px soild red;

}

< /style>

< /head>

< body>

< h3>大家喜欢吃什么水果?< /h3>

< u>< ul class="test">

< li>苹果< /li>

< li>香蕉< /li

< li>西瓜< /li>

< /u>

< /body>

< /html>

图例为:

文本前边的符号则会变为实心方块

4.list-style 复合属性

写法为:

list-style:list-style-image list-style-position list-style-type

把之前的几个属性值 写在一个list-style中

示例:

ul{ list-style:url("images/icon.png")outside disc;}

前面设置了图片,最后再设置项目符号的目的是,如果图片未能正常显示,可以有符号来代替

代码示例:

< !DOCTYPE html>

< html>

< head lang="en">

< meta charset="UTF-8">

< title>列表属性< /title>

< style>

.test{

list-style-type:square;

}

li{

width:100px;

border:1px soild red;

list-style:url("images/duihao.png")outside disc;

}

< /style>

< /head>

< body>

< h3>大家喜欢吃什么水果?< /h3>

< u>< ul class="test">

< li>苹果< /li>

< li>香蕉< /li

< li>西瓜< /li>

< /u>

< /body>

< /html>

图例为:


在这里插入图片描述

(ps:如果您觉得有用,请点赞转发,让更多人看到哦)


小伙伴也可以加一下QQ群,可以获取资源以及更多学习方法哦

QQ群:1126277960 (暗号:CSDN)

这篇关于CSS系列——那些容易被人遗忘的列表属性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/771434

相关文章

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Python中DataFrame转列表的最全指南

《Python中DataFrame转列表的最全指南》在Python数据分析中,Pandas的DataFrame是最常用的数据结构之一,本文将为你详解5种主流DataFrame转换为列表的方法,大家可以... 目录引言一、基础转换方法解析1. tolist()直接转换法2. values.tolist()矩阵

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

python展开嵌套列表的多种方法

《python展开嵌套列表的多种方法》本文主要介绍了python展开嵌套列表的多种方法,包括for循环、列表推导式和sum函数三种方法,具有一定的参考价值,感兴趣的可以了解一下... 目录一、嵌套列表格式二、嵌套列表展开方法(一)for循环(1)for循环+append()(2)for循环+pyPhWiFd

Python容器类型之列表/字典/元组/集合方式

《Python容器类型之列表/字典/元组/集合方式》:本文主要介绍Python容器类型之列表/字典/元组/集合方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 列表(List) - 有序可变序列1.1 基本特性1.2 核心操作1.3 应用场景2. 字典(D

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...