列表样式属性

  • 在HTML中有2种列表、无序列表和有序列表，在工作中无序列表比较常用，无序列表就是ul标签和li标签组合成的称之为无序列表，那什么是有序列表呢？就是ol标签和li标签组合成的称之为有序列表，列表的基础知识就简单说明下，本章内容主要说明的是如何给列表设置样式，若有不懂园友可以去W3school官网进行学习。
  • 列表样式常用的属性有4种如：list-style-type、list-style-position、list-style-image、list-style，在这里就是简单说明下列表常用的属性名称而已，具体使用或每一个属性值的介绍，在下面会具体的说明，爱学习的园友不用担心哦。
  • 由于个人的时间问题，笔者将列表样式属性分为4篇文章进行说明。
  • 本章内容主要说明的是列表中的list-style-type属性。

list-style-type属性

  • list-style-type属性作用:就是设置列表前面项目符号的类型。
  • list-style-type属性值说明表。
属性值 描述
none 将列表前面项目符号去除掉。
disc 将列表前面项目符号设置为实心圆。
circle 将列表前面项目符号设置为空心圆。
square 将列表前面项目符号设置为实心小方块。

属性值为none使用方式

  • 让我们进入列表的list-style-type属性值为none实践，实践内容如：使用class属性值为.box将列表前面项目符号去除掉。

  • 我们在实践列表的list-style-type属性值为none之前看看列表前面项目符号是什么，让初学者有一个直观的印象。

  • 代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type属性值为none实践</title>
</head>

<body>
    <ul>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

  • 结果图

  • 现在爱学习的园友们知道了什么是列表前面的项目符号了，那我们就进入列表的list-style-type属性值为none实践咯。

  • 代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type属性值为none实践</title>
    <style>
        .box{
            list-style-type: none;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

  • 结果图

  • 既然能看到这里说明园友已经掌握了，列表的list-style-type属性值为none使用，恭喜恭喜恭喜。

属性值为disc使用方式

  • 在这里说明下列表的list-style-type属性值为disc，列表的list-style-type属性值默认就是disc，如果是细心的园友已经发现了，上面有现成的列子在这里就不过多的介绍了，这个属性值为disc就跳过了哈。

属性值为circle使用方式

  • 让我进入列表的list-style-type属性值为circle实践，实践内容如：将列表前面的项目符号设置为空心圆。

  • 代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type属性值为circle实践</title>
    <style>
        .box{
            list-style-type: circle;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

  • 结果图

属性值为square使用方式

  • 让我们进入列表的list-style-type属性值为square实践，实践内容如：将列表前面项目符号设置为实心方块。

  • 代码块

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表的list-style-type属性值为square实践</title>
    <style>
        .box{
            list-style-type: square;
        }
    </style>
</head>

<body>
    <ul class="box">
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
        <li>成功不是打败别人，而是改变自己。</li>
    </ul>
</body>
</html>

  • 结果图

CSS如何设置列表样式属性的更多相关文章

  1. CSS如何设置列表样式属性，看这篇文章就够用了

    列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...

  2. CSS控制列表样式属性list-style有哪些？怎么用？

    CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云 ...

  3. css中的列表样式

    在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化. 在css中对列表 ...

  4. CSS Ul（列表样式）

    CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...

  5. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  6. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

  7. 使用 jQuery 选择器获取页面元素后，利用 jQuery 对象的 css() 方法设置其样式。

    查看本章节 查看作业目录 需求说明: 使用 jQuery 选择器获取页面元素后,利用 jQuery 对象的 css() 方法设置其样式. 要求如下: 点击页面的"更改样式"按钮后, ...

  8. CSS: CSS常用的文本样式属性

    介绍:CSS常用的文本样式属性 color:  颜色 font-size:  字体大小 font-style (normal.italic.oblique): 字体样式(正常.斜体) font-wei ...

  9. CSS之设置滚动条样式

    因为在现在的大部分项目中很多都用到了滚动条,有时候用到模拟的滚动条,现在说下滚动条的CSS也能解决. 比如网易邮箱的滚动条样子很好看,就是利用的CSS来设置的,而且是webkit浏览器的.如图所示: ...

随机推荐

  1. java学习-IDEA运行java程序报错

    问题1: 解决办法:依次执行如下两步   问题2: 解决办法:如下两项版本应保持一致

  2. 百万年薪python之路 -- 递归

    递归(每当有一个函数被递归调用,就应该要有一个返回值,才能正常把递归的返回值'归'回来) 一个正经的递归: ​ 1.不断调用自己本身 ​ 2.有明确的结束条件 递归注重于"一递 一归&quo ...

  3. 设置H5页面文字不可复制

    * { moz-user-select: -moz-none; -moz-user-select: none; -o-user-select: none; -khtml-user-select: no ...

  4. JSONP安全防御要点

    严格安全地实现CSRF方式调用JSON文件:限制Referer.部署一次性token等. 严格安装JSON格式标准输出Content-Type及编码(Content-Type: application ...

  5. Ubuntu 14.04 kylin 安装 OpenCV 2.4.9|3.0.0

    首先安装依赖 sudo apt-get -y install libopencv-dev sudo apt-get -y install build-essential checkinstall cm ...

  6. postman的基本用法，请求，断言，环境变量

    postman基本用法 Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件. 它提供功能强大的 Web API & HTTP 请求调试. 它能够发送任何类型的HTT ...

  7. Mui 长按保存图片

    必须先要 引入 mui.js,然后参考具体代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. 明解C语言 入门篇 第二章答案

    练习2-1 #include <stdio.h> int main() { int x; int y; int percent; puts("请输入两个整数"); pr ...

  9. [springboot 开发单体web shop] 3. 用户注册实现

    目录 用户注册 ## 创建数据库 ## 生成UserMapper ## 编写业务逻辑 ## 编写user service UserServiceImpl#findUserByUserName 说明 U ...

  10. java常用类Time

    LocalDate:IOS格式(yyyy-MM-dd)日期 LocalTime:表示一个时间 LocalDateTime:表示时间日期 Instant 时间线上的瞬时点,可以用来记录应用程序中的时间时 ...