css列表标签list与表格标签table详解

列表list,无序列表ul,有序列表ol

1.列表项样式list-style-type

无列表默认为dist实心圆,有序列表默认为decimal阿拉伯数字(前面不带0)

其他无序列表常用none无样式,circle空心圆,square实心方块

有序列表常用decimal-leading-zero以0开头的数字,lower-roman、upper-roman小写、大写罗马数字,lower-alpha、upper-alpha小写、大写英文字母

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

例如上述设置后,显示的为

 2.列表项标记的图像list-style-image: url

ul { list-style-image: url('sqpurple.gif'); }

3.列表项标记的位置list-style-position

默认值outside,标记位于文本的左侧,且放置在文本以外,环绕文本不根据标记对齐

inside,标记放置在文本以内,且环绕文本根据标记对齐

上述三个属性可集合在一起,通过list-style表示,顺序为type、position、image,可根据需要选择

例如ul { list-style: square url("sqpurple.gif"); }

表格table

1.边框border

如果仅使用border,例如table, th, td { border: 1px solid black; },得到的效果如下,因为th和td都有各自的边框

可再通过border-collapse属性设置表格的边框被折叠成一个单一的边框或隔开

table {border-collapse: collapse;}

table, td, th {border: 1px solid red;background-color:lightgray;color:green;text-align:center}

2.表格宽度和高度,例如

table{width:100%;}
th{height:40px;}
tr{height:30px;}

3.表格内文本对齐方式

text-align水平对齐,vertical-align垂直对齐(设置垂直对齐方式时必须指定td的高度)

(0)

相关推荐

  • 利用js+css+html实现固定table的列头不动

    话不多说,跟这小编来一起看下吧 1.CSS <style type="text/css"> #scroll_head { position: absolute; display: none; } </style> 2.Javascript <script type="text/javascript"> //该函数在上面一个table数据加载完成后调用 //把表头的宽度设置到会滚动的页头去 var copyWidth = funct

  • css列表前的小方块

    自己用个符号·来代替,却发现怎么显示都比较小,后来自己研究才发现我的字体全部定义成tahoma了,只要采用"宋体"就正常了. 列表前的小方块--design by 我们 body{font:14px tahoma;} a:link,a:visited{text-decoration:none;font-family:"宋体";color:#999999;} a:hover{color:red;text-decoration:underline;} ul{list-s

  • css之使table也能overflow:hidden

    css table 超出隐藏 table { width:*; table-layout : fixed ; } td { white-space:nowrap; overflow:hidden; } 固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,单元格间距,列的宽度,而和表格内容无关固定布局的算法.在这算法中,水平布局是仅仅基于表格的宽度,表格边框的宽度,

  • CSS List Grid Layout 图片垂直居中

    CSS List Grid View Layout body{ font-family:Arial; text-align:center; } p{ } .img-grid{ width:603px; margin:auto; overflow:hidden; position:relative; border:solid 20px #CCCCCC; } .img-grid h3{ padding:0 0 12px 0; background:#ccc; margin:0; font:norma

  • css ol有序列表

    今天看了振之关于有序列表的一篇文章,觉得挺不错的.写个例子: 类型值  生成样式  序列举例  A  大写字母  A.B.C.D.E  a  小写字母  a.b.c.c.e  I  大写罗马数字  I.II.III.IV.V  i  小写罗马数字  i.ii.iii.iv.v  1  阿拉伯数字  1.2.3.4.5 有序列表_www.jb51.net 第一名 第二名 第三名 第四名 第五名 第六名 第七名 第八名 第九名 第十名 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • css+table 1px边框单元格

    css table 之1px边框单元格--我们 .myTable,.myTable td { border:1px solid #cccccc; border-collapse:collapse; } 我们 我们 我们 我们 我们 我们 我们 我们 我们 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 从Table向Css过渡的优缺点比较

    CSS布局提倡者的声音正被"表格布局的优点"的声音所覆盖.一个荒诞的说法是CSS是难学的.事实上,CSS一点也不比其他网页技术难.问题在于:对于表格设计已经相当有经验的web设计师不得不完全放弃他们的思维模式改用CSS方法. 我曾经用表格布局设计过许多年,当我第一次开始使用CSS布局时,我也遇到了问题."用表格多简单呀"我想.但是,那只是因为我已经用惯了表格,我知道如何巧妙的处理它们.任何改变,哪怕是小小的一点,都会让我觉得麻烦,更不用说这么激烈的变化. 回忆起我第

  • JS实现的样式切换功能tableCSS实例

    本文实例分析了JS实现的样式切换功能tableCSS.分享给大家供大家参考,具体如下: 把前阵子写的JQ插件函数(alterBgColor )改写成不基于JQ的代码,还添加了一个click样式效果 代码风格还是按照JQ插件风格来写,使用了闭包来循环设置TR元素的样式 function TableCss(options){ //如果没参数,就退出 if(arguments.length < 1 || !document.getElementById(options.tableName) ) { r

  • 对Xpath 获取子标签下所有文本的方法详解

    在爬虫中遇见这种怎么办 想提取名称, 但是 名称不在一个标签里 使用xpath string()方法 例如 data.xpath("string(path)") path -- 你xpath提取的路径 这里提取到父标签 string() 方法会提取子标签多有的文本内容. 以上这篇对Xpath 获取子标签下所有文本的方法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • Android studio git创建与删除标签(Tag)的教程详解

    git上的标签一般是用于标记版本,当发布新版本后,便将该版本的代码打上Tag,用以区别及管理 使用标签前需要先将代码提交到远程仓库上 创建并提交Tag 远程端提交后: 使用Git 命令删除Tag Android Studio上没发现界面化的删除Tag操作 定位到项目根路径(该项目.git 文件夹所在处) 右键打开Git Bash 输入 git tag 查看本地tag 输入 git tag -d v1.0.3 删除本地名为"v1.0.3"的Tag 输入 git push origin –

  • vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • C#实现从PDF中提取表格的方法详解

    目录 程序环境 从PDF中提取表格具体步骤 完整代码 PDF是办公中比较常见的一种文件格式,在工作中应用也越来越普遍.由于PDF文件集成度和安全可靠性都较高,所以在PDF中编辑内容是一件比较复杂且困难的事.但有时因工作需要,要求我们从中提取数据或表格该怎么办呢?别担心,今天为大家介绍一种通过C#/VB.NET代码从PDF中提取表格内容的方法.下面是我整理的思路步骤及代码供大家参考. 程序环境 本次测试时,在程序中引入 Spire.PDF.dll 文件. 方法1: 将 ​ ​Free Spire.

  • 利用Vue3实现可复制表格的方法详解

    目录 前言 最基础的表格封装 实现复制功能 处理表格中的不可复制元素 测试 前言 表格是前端非常常用的一个控件,但是每次都使用v-for指令手动绘制tr/th/td这些元素是非常麻烦的.同时,基础的 table 样式通常也是不满足需求的,因此一个好的表格封装就显得比较重要了. 最基础的表格封装 最基础基础的表格封装所要做的事情就是让用户只关注行和列的数据,而不需要关注 DOM 结构是怎样的,我们可以参考 AntDesign,columns dataSource 这两个属性是必不可少的,代码如下:

  • Java实现导出word表格的示例详解

    目录 目标 实现 依赖 模版 代码 目标 多级表头.分页.动态数据 实现 依赖 <!-- poi工具类--> <dependency> <groupId>com.deepoove</groupId> <artifactId>poi-tl</artifactId> <version>1.12.0</version> </dependency> 模版 代码 TableData数据(模版对应的数据对象)

  • 对Python3中列表乘以某一个数的示例详解

    在Python列表操作中:列表乘以某一个数,如list2 = list1 * 2 得到一个新的列表是list1的元素重复n次,且list1不改变. 但运行如下代码时,得到的新列表b中,b[0]和b[1]的地址相同,即对b[0]进行操作,b[1]也会发生改变. a = [0] b = [a] * 2 print(b) b[0].append(1) print(b) 输出为: [[0], [0]] [[0, 1], [0, 1]] 随后尝试以下几种代码: 代码(1) a = [0] b = [a f

  • 对python列表里的字典元素去重方法详解

    如下所示: def list_dict_duplicate_removal(): data_list = [{"a": "123", "b": "321"}, {"a": "123", "b": "321"}, {"b": "321", "a": "123"}] run

  • Vue.js中对css的操作(修改)具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • Java实现添加条形码到PDF表格的方法详解

    目录 程序环境 代码示例 条码的应用已深入生活和工作的方方面面.在处理条码时,常需要和各种文档格式相结合.当需要在文档中插入.编辑或者删除条码时,可借助于一些专业的类库工具来实现.本文,以操作PDF文件为例,介绍如何在编辑表格时,向单元格中添加条形码. 程序环境 本次功能测试中,使用 Free Spire.PDF for Java. 实现功能的大致思路:生成条形码,将条形码保存为图片,然后在PDF中的表格单元格中插入条码图片. Spire.PDF for Java 中的Spire.Pdf.Bar

随机推荐