Html ul、li Css标签详解 使用图片自定义样式 隐藏小点样式齐全
前排丢一下本文大部分内容生成用的代码,使用array数组然后For循环下。有点文章生成器的意思哈哈。贴出来供大家参考
PHP
<style>
body{
width: 1200px;
margin: 0 auto;
margin-top: 100px;
}
p{
border: 2px solid cadetblue ;
padding: 10px 15px;
margin-bottom: 60px;
}
h3{
color: darkblue;
}
.zmki_ul_li_01{
list-style-image:url(https://a-oss.zmki.cn/2020/20200811-6d086a783ed8c.png);
}
</style>
<p>语法:
list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
</p>
<ul style="list-style-image:url(https://a-oss.zmki.cn/2020/20200811-6d086a783ed8c.png)">
<li>11111111111</li>
</ul>
<?php
$arr = array('disc','circle','square','decimal','lower-roman','upper-roman','lower-alpha','upper-alpha','none','armenian','cjk-ideographic','georgian','lower-greek','hebrew','hiragana','hiragana-iroha','katakana','katakana-iroha','lower-latin','upper-latin');
$num = count($arr);
for($i=0;$i<$num;++$i){
echo "<h3>list-style-type:$arr[$i]</h3>";
echo '<ur style="list-style-type:' ;
echo "$arr[$i]" ;
echo '">';
echo ' <li>人生得意须尽欢</li>
<li>莫使金樽空对月。</li>
<li>天生我材必有用</li>
<li>千金散尽还复来。</li>
<li>烹羊宰牛且为乐</li>
<li>会须一饮三百杯。</li>
</ur>';
}
?>
关于li标签的用法我在使用过程中也是经常需要临时去查询,为了以后可以更快找到。还是自己总结一下,方便日后查看。 本文涵盖了所有CSS自带的li标签样式效果,以及一个图片形式。(使用图片Url)
引用自定义图片、
语法:
- list-style-image : none | url (url)
- eg. li {list-style-image : url (image/aa.gif);}
演示
<ul style="list-style-image: url('https://a-oss.zmki.cn/2020/20200811-6d086a783ed8c.png');">
<li>11111111111</li>
</ul>
- 11111111111
引用系统图案
语法: list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin
参数:
- disc: 实心圆
- circle: 空心圆
- square: 实心方块
- decimal: 阿拉伯数字
- lower-roman: 小写罗马数字
- upper-roman: 大写罗马数字
- lower-alpha: 小写英文字母
- upper-alpha: 大写英文字母
- none: 不使用项目符号
- armenian: 传统的亚美尼亚数字
- cjk-ideographic: 浅白的表意数字
- georgian: 传统的乔治数字
- lower-greek: 基本的希腊小写字母
- hebrew: 传统的希伯莱数字
- hiragana: 日文平假名字符
- hiragana-iroha: 日文平假名序号
- katakana: 日文片假名字符
- katakana-iroha: 日文片假名序号
- lower-latin: 小写拉丁字母
- upper-latin: 大写拉丁字母
系统图案演示大全
.post-content ul, .post-content ul li {list-style: inherit;}
list-style-type:disc
<ul style="list-style-type:disc;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:circle
<ul style="list-style-type:circle;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:square
<ul style="list-style-type:square;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:decimal
<ul style="list-style-type:decimal;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-roman
<ul style="list-style-type:lower-roman;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-roman
<ul style="list-style-type:upper-roman;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-alpha
<ul style="list-style-type:lower-alpha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-alpha
<ul style="list-style-type:upper-alpha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:none
<ul style="list-style-type:none;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:armenian
<ul style="list-style-type:armenian;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:cjk-ideographic
<ul style="list-style-type:cjk-ideographic;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:georgian
<ul style="list-style-type:georgian;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-greek
<ul style="list-style-type:lower-greek;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hebrew
<ul style="list-style-type:hebrew;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hiragana
<ul style="list-style-type:hiragana;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:hiragana-iroha
<ul style="list-style-type:hiragana-iroha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:katakana
<ul style="list-style-type:katakana;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:katakana-iroha
<ul style="list-style-type:katakana-iroha;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:lower-latin
<ul style="list-style-type:lower-latin;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
list-style-type:upper-latin
<ul style="list-style-type:upper-latin;"><li>...</li></ul>
- 人生得意须尽欢
- 莫使金樽空对月。
- 天生我材必有用
- 千金散尽还复来。
- 烹羊宰牛且为乐
- 会须一饮三百杯。
扩展资料(转载):
要实现UL标签水平居中,关键在于CSS中 display:inline 的运用。 HTML代码具体示例:
注意:如果UL没有设置宽度,用margin:0 autl是没有用的,因为它默认了100%,给它一个宽度,实际宽度或者width:auto都可以。
在HTML中,有两种类型的列表:无序列表 – 列表项标记用特殊图形(如小黑点、小方框等);有序列表 – 列表项的标记有数字或字母。使用CSS,可以列出进一步的样式,并可用图像作列表项标记。 用CSS设置UL标签的列表符号是不需要去设置的,因为ul默认就是标签符号的,如果使用了这个list-style:none;去掉了这个属性,然后又想有的话,就给这个ul一个id或者是class,然后在css中list-style-type:disc !important,这样就又有序号了。
- 碎片化 | 第四阶段-51-Hibernate注解使用-视频
- 基础JavaScript装逼指南
- 碎片化 | 第四阶段-42-校验验证码-视频
- Angularjs中UI Router超级详细的教程{{上}}
- 【LEETCODE】模拟面试-120- Triangle
- Spring Cloud Edgware新特性之四:Zuul routes端点功能增强
- Spring Cloud Edgware新特性之三:使用配置属性自定义Feign的行为
- 碎片化 | 第四阶段-43-struts2拦截器interceptor-视频
- Spring Cloud Edgware新特性之二:如何配置Zuul的Hystrix线程池
- 碎片化 | 第四阶段-44-struts2注解使用-视频
- Spring Cloud Edgware新特性之:解决Eureka中Jersey 1.x版本过旧的问题-不使用Jersey
- 如何自定义微服务的Instance ID
- 怎样做情感分析
- Python|编写自己的类
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 基于web的图书管理系统设计与实现
- 《Flutter 动画系列一》25种动画组件超全总结
- 网工小白升级打怪篇(三)ssh实现远程管理
- 贪吃蛇的使命 | 零基础入门贪吃蛇游戏(附源码、演示地址)
- Java开发岗面试题--基础篇(二)
- C++核心准则T.48:如果你的编译器不支持concepts,使用enable_if模仿它
- 《Flutter 动画系列》组合动画
- Flutter 完美的验证码输入框
- 【送红宝书】JavaScript 测试系列实战(四):掌握 React Hooks 测试技巧
- Spring 自定义注解你了解过吗?
- 《Flutter 小技巧》一行禁用App,一行置灰App,致敬
- 字符串:总结篇!
- 3 个助你玩转正则表达式的利器
- Flutter 实现虎牙/斗鱼 弹幕效果
- 计算机视觉的数据增广技术大盘点!附涨点神器,已开源!