<!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <title></title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

     <table border=""><!--border属性只要设置，值为空也能显示边框-->

         <caption>我的表格</caption>

         <tr><td>单元格单元格单元格单元格单元格单元格</td><td>单元格</td><td>单元格</td></tr>

         <tr><td>单元格</td><td></td><td>单元格</td></tr>

         <tr><td>单元格</td><td>单元格</td><td>单元格</td></tr>

     </table>

     <ul>

         <li>无序列表项1</li>

         <li>无序列表项2</li>

         <li>无序列表项3</li>

     </ul>

     <ol>

         <li>有序列表项1</li>

         <li>有序列表项2</li>

         <li>有序列表项3</li>

     </ol>

 </body>

 </html>
 table{

     width: 200px;

     border-collapse:;/*默认值separate双边框；collapse单一边框。*/

     border-spacing: 2px;/*默认值2px；当border-collapse为collapse时此设置有效果，双边框的间距*/

     caption-side: bottom;/*默认值top表格之上，bottom表格之下。*/

     empty-cells:hide;/*默认值show显示空单元格；hide隐藏空单元格，此时需要border-collapse设置为separate才能看到效果*/

     table-layout: ;/*默认值auto；fixed列宽由表格宽度和列宽设定*/

 }

 ul{

     list-style-type:upper-alpha;/*none无标记；disc默认实心圆；circle空心圆；square实心方块；list-style-type属性值在ul和ol上通用。*/

     list-style-position: ;/*标志位置，默认outside，可设inside*/

     /*list-style-image: url("img/鸟1.jpg");*//*默认值none*/

 }

 ol{

     list-style-type:upper-alpha;/*默认decimal数字；decimal-leading-zero以01开头的数字；lower-roman小写罗马数字；upper-roman大写罗马数字；lower-alpha小写字母；upper-alpha大写字母；日文、拉丁文……等其他字符，可查CSS手册。*/

     list-style-position: ;

     /*list-style-image: url("img/鸟1.jpg");*/

     list-style: circle inside;/*此属性可同时设置其他三个属性值*/

 }

【CSS3】表格、列表的更多相关文章

  1. 【转】一张图解析FastAdmin中的表格列表的功能

     一张图解析FastAdmin中的表格列表的功能 功能描述请根据图片上的数字索引查看对应功能说明. 1.时间筛选器如果想在搜索栏使用时间区间进行搜索,则可以在JS中修改修改字段属性,如 {field: ...

  2. 循序渐进VUE+Element 前端应用开发(5）--- 表格列表页面的查询，列表展示和字段转义处理

    在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...

  3. 7.css3表格、列表、边框的样式设置--list/border

    1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...

  4. html 和 html5（一）（表格 | 列表 | 提交按钮 | 单选 |复选 | 框架 | 脚本 | html字符实体 ）

    一.框架 使用iframe来显示目录链接页面 iframe可以显示一个目标链接的页面 目标链接的属性必须使用iframe的属性,如下实例: 实例 <iframe src="demo_i ...

  5. 一张图解析FastAdmin中的表格列表的功能

    大图: 1.默认生成的CRUD是没有菜单名称和描述显示的,如果需要显示则可以在后台修改,权限管理->菜单规则,给对应菜单的添加上备注信息后即可显示,支持HTML 2.TAB过滤选项卡 在一键生成 ...

  6. 用CSS3把列表项目反转显示

    忘了哪儿的一个题目来着,说是把 一个列表 给翻转序列显示,比如 : 有一个列表如图: 翻转为  回复里面有人机智的使用 CSS3 的 transform:rotate(180deg); 实现了,引发众 ...

  7. html基础-表格-列表（4）

    今天准备为大家准备了表格和列表. 一.文章有各种数据的表格这个网页也不例外. (1).标签意思 <table>----------------------表格开始 <caption& ...

  8. css3—产品列表之鼠标滑过效果

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" /> <title&g ...

  9. css3表格样式

    <caption>  关于表格存储内容的描述或总结. 1.border-spacing:0;border-spacing 属性设置相邻单元格的边框间的距离(仅用于“边框分离”模式). 2. ...

  10. HTML表格列表简介

    HTML简介: html列表: ol标签:order list 有序列表. ul标签:unorder list 无序列表. li标签:list item 列表项. style属性: 标签内写css表达 ...

随机推荐

  1. 基于树莓派的智能家居项目的设想与实现 Hestia

    注:本人内容的准确性仅限于笔者写该篇文章时的情况,不保证后续与实际项目代码一致.实时内容还请关注Github项目托管页面:https://github.com/GenialX/hestia-serve ...

  2. tungsten-replicator安装

    需要环境 ruby1.8.5 or laterJava1.6 or later 应用程序对外开放接口 3306 (MySQL database)2112 (Tungsten THL)10000 (Tu ...

  3. Mysql--触发器的操作

    1.为什么使用触发器 2.创建触发器 2.1 创建有一条执行语句的触发器 例子:在数据库company中存在两个表对象:部门表(t_dept)和日记表(t_diary),创建触发器实现向部门表中插入记 ...

  4. Android Weekly Notes Issue #286

    December 3rd, 2017 Android Weekly Issue #286 本期文章包含如何通过踩坑来学习Kotlin,以及利用Kotlin的data class做MVVM状态保存,还包 ...

  5. ATL实现ActiveX插件

    文章属于原创,转载请联系本人.有参照两个博客(http://blog.csdn.net/jiangtongcn/article/details/13509633 http://blog.csdn.ne ...

  6. python 小白(无编程基础，无计算机基础)的开发之路，辅助知识6 python字符串/元组/列表/字典互转

    神奇的相互转换,小白同学可以看看,很有帮助 #1.字典dict = {'name': 'Zara', 'age': 7, 'class': 'First'} #字典转为字符串,返回:<type ...

  7. Maven项目pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径)

    在今天的学习Maven项目中遇到的这个错误:pom.xml文件报xxx\target\classes\META-INF\MANIFEST.MF (系统找不到指定的路径) 在Maven项目学习中,缓存问 ...

  8. winform在鼠标操作时要判断是否按下Ctrl键

    (Control.ModifierKeys & Keys.Control) == Keys.Control

  9. Okio 之初探黄龙

    Okio 是一个包装了 java.io 和 java.nio api 的库,以便可以更容易的访问.存储以及处理数据. ByteStrings 和 Buffers Okio 是围绕着两个容器类构建起来的 ...

  10. mac mono Fiddler.exe启动失败

    mono version 5.4 fiddler version 4.6 启动fiddler:mono Fiddler.exe 启动报错 WARNING: The Carbon driver has ...