PHP全栈开发(八):CSS Ⅵ 列表 style
列表分为有序列表和无序列表
我们知道有序列表的标签是<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的更多相关文章
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- Python全栈开发:css引入方式
css的四种引入方式: 1.行内式 行内式是在标记的style属性中设定CSS样式.这种方式没有体现出CSS的优势,不推荐使用. <p style="color: red;backgr ...
- python 全栈开发,Day14(列表推导式,生成器表达式,内置函数)
一.列表生成式 生成1-100的列表 li = [] for i in range(1,101): li.append(i) print(li) 执行输出: [1,2,3...] 生成python1期 ...
- Python 全栈开发八 文件处理
一.基本流程 打开文件得到文件句柄 将文件句柄赋值给一个变量 通过文件句柄对文件进行操作 关闭文件 二.基本操作 1.文件句柄 f = open("a.txt",encoding= ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- python 全栈开发,Day99(作业讲解,DRF版本,DRF分页,DRF序列化进阶)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天)
点击了解更多Python课程>>> 老男孩Python高级全栈开发工程师三期完整无加密带课件(共104天) 课程大纲 1.这一期比之前的Python培新课程增加了很多干货:Linux ...
随机推荐
- 在less里面使用js函数
.colorPaletteMixin() { @functions: ~`(function() { this.colorPalette = function() { return '123px'; ...
- 1269: 求最长上升子序列(LIS)
题目描述: LIS问题(longest increasing subsequence),即:最长上升子序列问题,是动态规划中一个比较经典的问题.具体描述为:一个有n个整数的序列:A[1],A[2], ...
- Web Worker: Shared Worker的使用
Web Worker: Shared Worker的使用 参考资料: JavaScript高级程序第四版 https://juejin.cn/post/7064486575916187656 http ...
- break和continue语句的使用
break break关键字的用法有常见的两种: 1.可以用在switch语句当中,一旦执行整个switch语句like结束. 2.还可以用在循环语句当中,一旦执行,整个循环语句立刻结束,打断循环 关 ...
- GreatSQL季报(2021.12.26)
欢迎来到 GreatSQL社区分享的MySQL技术文章,如有疑问或想学习的内容,可以在下方评论区留言,看到后会进行解答 自从GreatSQL 8.0.25 于 2021.8.26发布以来,针对MGR的 ...
- 喜讯:“行走的文档” 当选 Apache DolphinScheduler Committer啦
点击上方蓝字关注 Apache DolphinScheduler Apache DolphinScheduler(incubating),简称"DS", 中文名 "海豚调 ...
- List的同步类比较
TL;NRs CopyOnWriteArrayList类在多线程顺序读取上有很大的优势,但在随机读取上反而有较大的劣势,且在写入方面性能极差. Vector类在顺序读取方面性能较差,但在随机读取方面有 ...
- luogu1486 [NOI2004]郁闷的出纳员 (平衡树)
加的注释,都流着泪... 胡了一种做法,样例都没过,翻题解发现一神仙Remove操作,妙啊! #include <iostream> #include <cstdio> #in ...
- Luogu2290 [HNOI2004]树的计数 (组合计数,prufer编码)
这不prufer编码吗,防爆long long就行了啊 #include <iostream> #include <cstdio> #include <cstring&g ...
- Spring源码 13 IOC refresh方法8
本文章基于 Spring 5.3.15 Spring IOC 的核心是 AbstractApplicationContext 的 refresh 方法. 其中一共有 13 个主要方法,这里分析第 8 ...