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

我们知道有序列表的标签是<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. 流程控制语句break

    break语句 用于结束循环结构,通常与分支结构if一起使用 即非正常循环,在中间循环的时候直接退出 注意break打断的是循环语句,不是if语句 注意while循环中一般需要有改变变量这个操作,否则 ...

  2. python 生成Windows快捷方式

    此处以虚拟机镜像快捷方式为例 link_filepath:快捷方式的生成路径 win32_cmd:需要执行的应用程序 arg_str:exe的参数 快捷方式的目标:由win32_cmd + arg_s ...

  3. LGV 引理

    (其实是贺的:https://www.luogu.com.cn/paste/whl2joo4) 目录 LGV 引理 不相交路径计数 例题 Luogu6657. [模板]LGV 引理 CF348D Tu ...

  4. Windows环境中Hadoop配置

    我们之前已经在Windows中安装好了Hadoop,并且配置了环境变量.如果要在本地上运行的,还需要这两个文件,可以去找一下,放到Hadoop的bin目录下面.这样我们写好的mr程序就可以直接在Win ...

  5. linux文件校验

    最近在一次安装centos7程序中遇到了网速很卡的情况,不得已采用了百度云的离线下载功能,后来上传进入虚拟机内,结果遇到无法上传的情况,后来经过转码后才上传成功,详情http://www.cnblog ...

  6. (转)git使用收集

    由于最近项目开始弃SVN用git,特意整理下git命令.原文链接为http://www.jb51.net/article/55442.htm git branch 查看本地所有分支git status ...

  7. AI目标分割能力,无需绿幕即可实现快速视频抠图

    绿幕抠图是影视制作过程中常见的技术手段,常用于视频中抠除并替换背景,通过后期加工实现视频剪辑制作的更多可能性.然而,绿幕抠图技术制作成本费时费力,无法应用于日常生活. 华为视频编辑服务近期上线目标分割 ...

  8. 关于Request复用的那点破事儿。研究明白了,给你汇报一下。

    你好呀, 我是歪歪. 之前不是发布了这篇文章嘛:<千万不要把Request传递到异步线程里面!有坑!> 说的是由于 Request 在 tomcat 里面是复用的,所以如果在一个 Requ ...

  9. 万答#13,MySQL自增键用完后,插入数据会发生什么情况

    欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 MySQL自增键用完了,插入数据会发生什么情况 1.实验场景 GreatSQL ...

  10. Redis 12 持久化

    参考源 https://www.bilibili.com/video/BV1S54y1R7SB?spm_id_from=333.999.0.0 版本 本文章基于 Redis 6.2.6 概述 Redi ...