列表分为有序列表和无序列表

我们知道有序列表的标签是<ol>意思是order list

无序列表的标签是<ul>

列表里面每项的标签用<li>来进行包裹。

使用CSS中的列表样式不仅可以变换列表的列表项标记,还可以使用图片来作为列表项标记。

可以用

list-style-image: url('sqpurple.gif');

来设置列表的列表项标记为图片

也可以用

list-style-type: none;

来设置列表项的标志类型,关于列表项标志的更多不同符号,可以去查阅 css 的 list-style-type 属性

但是我们使用list-style-image: url('sqpurple.gif');的时候会有浏览器不兼容的现象。

因此,为了设置浏览器兼容性,情参照如下代码:

<style>
ul{
/*首先设置列表项标记为none,也就是没有列表项标记*/
list-style-type:none;
/*设置列表的外边距为0(为了对不同的浏览器有更好的兼容性)*/
margin:0;
/*设置列表的内边距为0(为了对不同的浏览器有更好的兼容性)*/
padding:0;
}
/*ul 和 li连在一起,中间用空格隔开,是表示ul标签内的所有li标签,这个是经常使用的*/
ul li{
/*设置列表项的背景*/
background-image:url(image/bg2.gif);
/*设置列表项的背景不能平铺,否则要铺到哪里去,注意这里用的是no-repeat,而不是None*/
background-repeat:no-repeat;
/*设置列表项背景的位置,水平位置为0px,垂直位置为5px*/
background-position: 0px 5px;
/*设置列表项内边距,也就是边框内的填充。左边填充14px*/
padding-left:14px; }
</style>

PHP全栈开发(八):CSS Ⅵ 列表 style的更多相关文章

  1. spring boot + vue + element-ui全栈开发入门——前端列表页面开发

     一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...

  2. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  3. Python全栈开发:css引入方式

    css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...

  4. python 全栈开发,Day14(列表推导式,生成器表达式,内置函数)

    一.列表生成式 生成1-100的列表 li = [] for i in range(1,101): li.append(i) print(li) 执行输出: [1,2,3...] 生成python1期 ...

  5. Python 全栈开发八 文件处理

    一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...

  6. spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发

     前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...

  7. spring boot + vue + element-ui全栈开发入门——开篇

    最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...

  8. spring boot + vue + element-ui全栈开发入门

    今天想弄弄element-ui  然后就在网上找了个例子 感觉还是可以用的  第一步是完成了  果断 拿过来  放到我这里这  下面直接是连接  点进去 就可以用啊 本想着不用vue   直接导入连接 ...

  9. python 全栈开发,Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  10. 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)

    点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...

随机推荐

  1. 在less里面使用js函数

    .colorPaletteMixin() { @functions: ~`(function() { this.colorPalette = function() { return '123px'; ...

  2. 1269: 求最长上升子序列(LIS)

     题目描述: LIS问题(longest increasing subsequence),即:最长上升子序列问题,是动态规划中一个比较经典的问题.具体描述为:一个有n个整数的序列:A[1],A[2], ...

  3. Web Worker: Shared Worker的使用

    Web Worker: Shared Worker的使用 参考资料: JavaScript高级程序第四版 https://juejin.cn/post/7064486575916187656 http ...

  4. break和continue语句的使用

    break break关键字的用法有常见的两种: 1.可以用在switch语句当中,一旦执行整个switch语句like结束. 2.还可以用在循环语句当中,一旦执行,整个循环语句立刻结束,打断循环 关 ...

  5. GreatSQL季报(2021.12.26)

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 自从GreatSQL 8.0.25 于 2021.8.26发布以来,针对MGR的 ...

  6. 喜讯:“行走的文档” 当选 Apache DolphinScheduler Committer啦

    点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...

  7. List的同步类比较

    TL;NRs CopyOnWriteArrayList类在多线程顺序读取上有很大的优势,但在随机读取上反而有较大的劣势,且在写入方面性能极差. Vector类在顺序读取方面性能较差,但在随机读取方面有 ...

  8. luogu1486 [NOI2004]郁闷的出纳员 (平衡树)

    加的注释,都流着泪... 胡了一种做法,样例都没过,翻题解发现一神仙Remove操作,妙啊! #include <iostream> #include <cstdio> #in ...

  9. Luogu2290 [HNOI2004]树的计数 (组合计数,prufer编码)

    这不prufer编码吗,防爆long long就行了啊 #include <iostream> #include <cstdio> #include <cstring&g ...

  10. Spring源码 13 IOC refresh方法8

    本文章基于 Spring 5.3.15 Spring IOC 的核心是 AbstractApplicationContext 的 refresh 方法. 其中一共有 13 个主要方法,这里分析第 8 ...