板邓:css ol 列表序列号样式

一。示例

1.自定义序号,

一般的列表顺序都是以1.2.3.为序号,但需要“、”代替“.”  ,这时我们就要自己定义,主要使用了CSS的counter-increment对部分和子部分进行编号,但问题是折行的部分不能自动缩进

[css] view plain copy

1 ol{list-style-type:none;counter-reset:sectioncounter;width:200px;}
2 ol li:before {
3     content:counter(sectioncounter) "、";
4     counter-increment:sectioncounter;
5  }  

执行后为:

2. 标准格式

[css] view plain copy

ol{list-style-type:demical;width:200px;}
ol li{ list-style-position:outside;}

  

执行后为:

二、css的UL、ol、li样式

1.list-style-type 属性设置列表项标记的类型。

取值:disc 点| circle圆圈 | square正方形 | decimal数字 | decimal-leading-zero 十进制数| lower-roman 小写罗马文字| upper-roman 大写罗马文字| lower-greek小写希腊字母 | lower-latin小写拉丁文 | upper-latin 大写拉丁文| armenian亚美尼亚数字 | georgian乔治亚数字 | lower-alpha小写拉丁文 | upper-alpha大写拉丁文 | none无 | inherit继承
初始值: disc

2.list-style-image 属性使用图像来替换列表项的标记

取值:  list-style-image:none/url

3.list-style-position 属性设置在何处放置列表项标记。

该属性用于声明列表标志相对于列表项内容的位置。外部 (outside) 标志会放在离列表项边框边界一定距离处,不过这距离在 CSS 中未定义。内部 (inside) 标志处理为好像它们是插入在列表项内容最前面的行内元素一样。

取值: list-style-position:inside/outside

注:有的时候outside不起作用,原因是加了浮动,

4.list-style属性

list-style 简写属性在一个声明中设置所有的列表属性。

取值:li-style:list-style-type/list-style-image/list-style-position

 

注:有的时候列序号不起作用,原因是加了浮动,

解决办法是 list-style-position:outside;改成list-style-position: inside;或去掉浮动设置

时间: 2024-07-30 07:35:39

板邓:css ol 列表序列号样式的相关文章

CSS控制列表样式属性list-style有哪些?怎么用?

CSS列表样式属性list-style有哪些类型?不同类型CSS控制列表样式使用时该注意什么? 这是W3Cschool用户Shirley于2016-11-10在W3Cschool编程问答提出的问题.云南小天使的回答很好的帮助了众多遇到同样问题的网友原文地址http://www.w3cschool.cn/css3/question-10231611.html 以下为回答原文: 一.什么是CSS列表? CSS列表是HTML里一种很有用的显示方式,可以把相关的并列内容整齐地垂直排列,使网页显得整洁专业

css 利用文档结构给列表添加样式

最近做项目,客户提出一个需求,让新闻列表的前三个条目加粗显示.由于新闻列表每天都有更新,所以就利用文档结构来给列表添加样式. 下面以一个简单列表为例,让前三列的前景色显示为红色. 首先是列表代码: <!DOCTYPE html> <html> <head> <meta charset = 'utf-8'/> <title>ul</title> </head> <body> <ul> <li&g

学习笔记 第八章 使用CSS美化列表

第8章  使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: <ol>...</ol>:标识有序列表: <li>...<li>:标识列表项目. 另外,还可以使用定义列表.定义列表包括词条和解释两块内容.包含的标签说明如下: <dl>...</dl>:标识定义列表: <dt>...<

CSS重置标签默认样式

CSS重置标签默认样式:建议:尽可能的手写代码,可以有效的提高学习效率和深度.在默认情况下,很多标签都有自带的属性,例如body自带有margin.ul有自带的padding.h1-h6的字体大小各部相同.li前面带有的小圆圈等等.这些自带的默认属性会给实际的布局中带来不少的麻烦,我们可以再样式表的开始就重置这些默认的属性.实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8">

CSS图片列表

1.效果图: 2.Example Source Code <h3><a href="http://www.52css.com/">我爱CSS画廊</a></h3><ul>    <li>        <a href="http://www.52css.com/default.asp">        <img src="1.jpg" alt="1

一个带标号的CSS文章列表写法

<title>CSS文章列表</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} a,a:visited{color:#5e5e5e; text-decoration:none;} a:hover{color:#b52725;text-decoration:underline;} .clear{display:bloc

板邓:站长必知网站html代码优化窍诀

SEO优化网站代码优化是基础内容,对于SEO来讲不是核心的内容,但是如果不会优化,必然会导致网站的整体排名.那么网站代码优化核心点是什么呢?懂得以下几点就过关了! 标签的优化 1.h1一个页面只能出现一对,而且用在文章页的正文标题. 2,.h2一个页面可以出现多个,但是不要盲目使用,可以用在网站logo图片.文章主标题. 3.h3.一般用在文章副标题. 4.h4以后一般都不使用了,都是逐级使用!所以这里就不具体讲了. 百度百科把优化到极致,值得大家看看: h标签优化 alt标签优化 由于搜索引擎

7. CSS装饰网页的样式

CSS中有哪些用来装饰网页的样式呢?在这里我们对一些常用的样式做了总结. 字体样式 1 /* 2 * 一般样式书写 3 */ 4 .font_style_1{ 5 font-family: "华文行楷"; 6 font-size: 20px; 7 font-style: italic; 8 font-weight: lighter; 9 } 10 /* 11 * 字体样式简写 12 * 顺序:font-style > font-variant > font-weight &

前端学习(9)~css学习(三):样式表和选择器

本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. css的最新版本是css3,我们目前学习的是css