一，效果图。

二，代码。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>CSS 样式列表(url)</title>
  7.     <style>
  8.     ul.a {
  9.         list-style: circle;
  10.     }
  11.  
  12.     ul.b {
  13.         list-style: square;
  14.     }
  15.  
  16.     ol.c {
  17.         list-style: upper-roman;
  18.     }
  19.  
  20.     ol.d {
  21.         list-style: lower-alpha;
  22.     }
  23.  
  24.     ul {
  25.         list-style: none;
  26.         padding: 0px;
  27.         margin: 0px;
  28.     }
  29.  
  30.     ul li {
  31.         background-image: url(sqpurple.gif);
  32.         background-repeat: no-repeat;
  33.         background-position: 0px 5px;
  34.         padding-left: 14px;
  35.     }
  36.     </style>
  37. </head>
  38.  
  39. <body>
  40.     <p>example of unordered</p>
  41.     <ul class="a">
  42.         <li>coffee</li>
  43.         <li>tea</li>
  44.         <li>coca coca</li>
  45.     </ul>
  46.     <ul class="b">
  47.         <li>coffee</li>
  48.         <li>tea</li>
  49.         <li>coca coca</li>
  50.     </ul>
  51.     <p>example of ordered lists:</p>
  52.     <ol class="c">
  53.         <li>coffee</li>
  54.         <li>tea</li>
  55.         <li>coco coco</li>
  56.     </ol>
  57.     <ol class="d">
  58.         <li>coffee</li>
  59.         <li>tea</li>
  60.         <li>cocoa cocoa</li>
  61.     </ol>
  62.     <ul>
  63.     </ul>
  64. </body>
  65.  
  66. </html>

参考资料:《菜鸟教程》

【代码笔记】Web-CSS-CSS样式列表(url)的更多相关文章

  1. css select 样式列表-----另一种样式列表

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org ...

  2. CSS select样式列表-------美化列表

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 【代码笔记】iOS-plist获得城市列表

    一,工程图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  4. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  5. Python学习笔记整理总结【web基础】【web/HTML/CSS/JavaScript/DOM/jQuery】

    一.HTML HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就可以 ...

  6. CSS Ul（列表样式）

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

  7. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  8. css中的列表样式

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

  9. [CSS3]学习笔记-CSS基本样式讲解

    1.CSS样式-背景 CSS运行应用纯色作背景,也允许使用背景图像创建相当复杂的效果 <!DOCTYPE html> <html> <head lang="en ...

随机推荐

  1. jsp中input获得后台传递的值

    1.后台赋值 req.setAttribute("openId",openId); 2.前台获取值 value="<%= request.getAttribute( ...

  2. Pycharm画五角星

    import turtle turtle.setup(600,400,0,0) turtle.bgcolor('red') turtle.color('yellow') turtle.fillcolo ...

  3. Windows多线程中关键段（Critical Section）的应用

    先看如下代码:(用Visual Studio 2010按照Win32 Console程序创建向导创建) #include "stdafx.h" #include <proce ...

  4. [Swift]LeetCode363. 矩形区域不超过 K 的最大数值和 | Max Sum of Rectangle No Larger Than K

    Given a non-empty 2D matrix matrix and an integer k, find the max sum of a rectangle in the matrix s ...

  5. [Swift]LeetCode561. 数组拆分 I | Array Partition I

    Given an array of 2n integers, your task is to group these integers into n pairs of integer, say (a1 ...

  6. [Swift]LeetCode1020. 飞地的数量 | Number of Enclaves

    Given a 2D array A, each cell is 0 (representing sea) or 1 (representing land) A move consists of wa ...

  7. PowerShell 中 RunspacePool 执行异步多线程任务

    在 PowerShell 中要执行任务脚本,现在通常使用 Runspace,效率很高:任务比较多时,用 Runspace pool 来执行异步操作,可以控制资源池数量,就像 C# 中的线程池一样 == ...

  8. Python数据挖掘指南

    Data Mining in Python: A Guide 转载原文:https://www.springboard.com/blog/data-mining-python-tutorial/(全英 ...

  9. 剖析项目多个logback配置(上)

    来源:http://www.cnblogs.com/guozp/p/5949744.html 以下两个是我在使用slf4j + logback时候日志提示的问题,问题不大,都是WARN,并不真正影响运 ...

  10. 【Docker】(6)---Dockerfile文件

    springboot项目打包镜像中的Dockerfile文件 在讲Dockerfile文件之前应该先讲下maven的一个插件叫:dockerfile-maven-plugin.他们是组合一起用的 一. ...