列表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的高度)

css列表list、表格table的更多相关文章

  1. 复习-css列表和表格相关属性

    css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...

  2. 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性

    今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...

  3. css如何让表格table的边框为1像素呢

    在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...

  4. CSS基础(背景、文本、列表、表格、轮廓)

    CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. backgr ...

  5. BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))

    上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...

  6. python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)

    一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...

  7. CSS的相关知识——背景,超链接,列表,表格,奇偶选择器

    接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色   rgb函数设置 2.background-image   背景图片  url(“logo.jp ...

  8. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  9. css链接,列表,表格

    1.css链接 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 注意: a:h ...

随机推荐

  1. 第1章 CLR的执行模型

    1.1将源代码编译成托管代码模块

  2. 一个toolkit或者一个开源项目如何学习它并使用它

    一个toolkit或者一个开源项目如何学习它并使用它 一般一个流行的toolkit和开源项目,一般都会被广泛地被应用: 那么,我们如何学习它,如何应用它在自己的业务场景中呢? 答案就是:学习源码并借鉴 ...

  3. express框架之session 存储

    1.express-session 是基于express框专门用于处理session的中间件.这里不谈express-session怎么安装,只给出相应的实例代码.另外,session的认证机制离不开 ...

  4. JAVA_POI 操作Excel

    转自: http://rensanning.iteye.com/blog/1538591# Apache POI 是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API ...

  5. H5 dom元素保存为图片

    一.使用插件html2canvas:https://github.com/niklasvh/html2canvas 具体代码: 1.html <div class="test" ...

  6. ModuleNotFoundError: No module named '_pydevd_bundle.pydevd_cython' error on debug

    现象:pycharm调试代码出现错误:ModuleNotFoundError: No module named '_pydevd_bundle.pydevd_cython' error on debu ...

  7. scu 4439 Vertex Cover

    题意: 给出n个点,m条边,将若干个点染色,使得每个边至少有一点染色,问至少染多少个点. 思路: 如果是二分图,那就是最小点覆盖,但是这是一般图. 一般图的最小覆盖是npc问题,但是这题有一个条件比较 ...

  8. QtCreator 调试源码

    [1]安装源码 声明:要想调试进入Qt源码,必须首先保证我们安装了Qt源码.下面说明安装Qt源码注意事项. 一般安装过程(默认不安装源码): 安装源码过程(需要自己设置,点击“全选”): 综上所述:Q ...

  9. 最小二乘法的Java实现

    最小二乘法原理十分简单,这里不再赘述.对于预测公式y' = a * x + b,最优解如下 double a = Sxy / Sxx; double b = yAvg - a * xAvg; doub ...

  10. flask 操作数据库(分类)

    数据库 数据库是大多数动态web程序的基础设施,只要你想把数据存下来,就离不开数据库. 这里所说的数据库指的是有存储数据的单个或多个文件组成的集合,它是一种容器,可以类比文文件柜.而人们通常使用数据库 ...