CSS:列表样式(设置列表项的标志图案/位置)
通过CSS 列表属性能够放置、改变列表项标志。或者将图像作为列表项标志。
代码整理自w3school:http://www.w3school.com.cn
效果图:
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYm9va3MxOTU4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">
演示样例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" /> <title>CSS 列表样式</title> <head>
<style type="text/css">
body {background-color:#eaeaea}
h3 {display:inline;}
ul.squareType {list-style-type:square}
ul.imageStyle {list-style-image:url(images/red_icon.png);}
ul.defPositionInside {list-style-position:inside}
ul.defPositionOutside {list-style-position:outside} /*设置list-style-image之后,list-style-type将无效。*/
ul.defStyle {list-style:url(images/red_icon.png) square inside}
</style>
</head> <body>
<p>CSS 列表属性同意你放置、改变列表项标志,或者将图像作为列表项标志。 </p>
<hr/> <h3>(一)设置列表的列表项标志:list-style-type</h3>
<ul class="squareType">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul> <h3>(二)设置自己定义图标为列表的列表项标志:list-style-image</h3>
<ul class="imageStyle">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul> <h3>(三)设置列表项标志的位置:list-style-position</h3>
<h4>(1)inside</h4>
<ul class="defPositionInside">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul> <h4>(2)outside</h4>
<ul class="defPositionOutside">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul> <h3>(四)将以上3个列表样式属性合并为一个属性:list-style</h3>
<ul class="defStyle">
<li>苹果</li>
<li>橘子</li>
<li>香蕉</li>
</ul> </body> </html>
CSS:列表样式(设置列表项的标志图案/位置)的更多相关文章
- 四大伪类,css鼠标样式设置,reset操作,静止对文本操作
07.31自我总结 一.a标签的四大伪类 a:link{样式} 未访问时的状态(鼠标点击前显示的状态) a:hover{样式} 鼠标悬停时的状态 a:visited{样式} 已访问过的状态(鼠标点击后 ...
- CSS背景样式和列表样式
background-color 设置元素的背景颜色 background-image 把图像设置为背景 background-position 设置背景图像的起始位置 background-atta ...
- css 字体样式设置大全
css样式大全(整理版) 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- css 字体样式设置
css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人 css字体样式(Font Style) ...
- 前端 CSS 优先级 样式设置important
!important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...
- CSS滚动条样式设置
webkit浏览器css设置滚动条 主要有下面7个属性 ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ...
- 认识CSS中css背景样式设置
前端之HTML,CSS(五) CSS CSS背景 CSS可以添加背景颜色和背景图片,也可以对图片进行设置.设置的样式有: background-color 背景颜色 background-image ...
- CSS 特殊样式设置集合
1. 父窗口宽度不定,要求内部两个子块, 第一个子块宽度固定,第二个子块宽度自适应. 第一个子块宽度固定,定位为绝对定位 position:absolute; 第二个子块设置margin-left即 ...
- [CSS]滚动条样式设置
概述 最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需要以滚动条的形式展现,当时也考虑了使用webbrower的滚动条 ...
随机推荐
- iOS开发多线程篇 04 —线程间的通信
iOS开发多线程篇—线程间的通信 一.简单说明 线程间通信:在1个进程中,线程往往不是孤立存在的,多个线程之间需要经常进行通信 线程间通信的体现 1个线程传递数据给另1个线程 在1个线程中执行完特定任 ...
- poj1182食物链--并查集
动物王国中有三类动物A,B,C,这三类动物的食物链构成了有趣的环形.A吃B, B吃C,C吃A. 现有N个动物,以1-N编号.每个动物都是A,B,C中的一种,但是我们并不知道它到底是哪一种.有人用两种说 ...
- vue render函数
基础 vue推荐在绝大多数情况下使用template来创建你的html.然而在一些场景中,你真的需要javascript的完全编程能力.这就是render函数.它比template更接近编译器 < ...
- POJ 2472 106 miles to Chicago
最短路问题变形. 题意是给你一些道路,和路过时不被抓的概率. 要求找一条到达目的地时不被抓的最大概率概率. 初始 dis[]设为 1 .其余为 0 .找最大就可以. #include<cstdi ...
- Storm实战
需求: spout输出一些手机品牌小写名称,第一个bolt将手机名称转成大写,第二个bolt在手机名称的后面再追加上时间. 项目目录: 导入相关的jar包. RandomWordSpout.java: ...
- 【BZOJ】3432: [Usaco2014 Jan]Cross Country Skiing (bfs+二分)
http://www.lydsy.com/JudgeOnline/problem.php?id=3432 题目说要相互可达,但是只需要从某个点做bfs然后判断其它点是否可达即可. 原因太简单了.... ...
- tcpdf
将文档整为pdf格式文档 网址:http://www.tcpdf.org/examples.php
- uva414 - Machined Surfaces
uva414 - Machined Surfaces /* 水题,值得一提的是,getline使用时注意不能让它多吃回车键,处理方法可以用getchar. */ #include <iostre ...
- UE问题分部解决
0.寻找Actor ALandscape *land=nullptr; for (TActorIterator<ALandscape> It(GEditor->GetEditorWo ...
- CFontDialog学习
void CMfcFontDlgDlg::OnBtnFont() { // Show the font dialog with all the default settings. CFontDialo ...