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的高度)
css列表list、表格table的更多相关文章
- 复习-css列表和表格相关属性
css列表和表格相关属性 list-style:设置所有列表属性 list-style-image:将图像设置为列表项标记,主要有url值 list-style-position:设置列表项标记的放置 ...
- 1、前端--HTML简介、head内常见标签、body内常见标签(特殊符号、div、span、a、img、列表、表格table、表单form)、标签两大属性
今日内容 HTML简介 HTML是构造网页的骨架>>>:几乎所有的网站都是由HTML构建而成 HTML:超文本标记语言 # 不是一门编程语言 没有任何的逻辑 只有固定的标记功能 &q ...
- css如何让表格table的边框为1像素呢
在Html中使用table是网页制作中必不可缺的一部分,如果直接给css设置table里面的td边框为1像素的话,那么实际我们从网页上看到的效果却不是1像素. 那么我们怎么用css让table的边框为 ...
- CSS基础(背景、文本、列表、表格、轮廓)
CSS 背景属性 属性 描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其余部分滚动. backgr ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- python 全栈开发,Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS的相关知识——背景,超链接,列表,表格,奇偶选择器
接着上一篇总结一些css的相关知识 ㈠背景 背景属性 1.background-color 背景颜色 rgb函数设置 2.background-image 背景图片 url(“logo.jp ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- css链接,列表,表格
1.css链接 a:link - 正常,未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 注意: a:h ...
随机推荐
- nginx反向代理 支持WebSocket
WebSocket(简称WS)协议的握手和HTTP是兼容的,通过HTTP/1.1中协议转换机制,客户端可以传递名为“Upgrade” 头部信息将连接从HTTP连接升级到WebSocket连接 那么反向 ...
- Windows PyCharm永久激活
1.下载 链接: https://pan.baidu.com/s/1LvQozk5lXdyk2p8qgGsr3A 提取码: x1t5 放置到 pycharm安装目录的\bin目录下(位置可随意,只要配 ...
- 服务请求比较慢SYN flooding
服务请求比较慢 dmesg 查看日志,发现SYN flooding 问题,某一端口居多 内核输出“TCP: Possible SYN flooding on port”信息,在内核syncookie机 ...
- winrar自解压释放路径详解
因为在 WINRAR 的帮助文件中没有对自解压路径和系统的环境变量之间作说明,所以,很多人只知道,其自解压路径可以智能定位到系统的 PROGRAM FILES 目录,而不知道它其实还可以智能定位到系统 ...
- Ubuntu下安装eclipse遇到的问题
今天在Ubuntu中安装eclipse时遇到如下问题: 解决方法: 打开eclipse安装目录下eclipse.ini文件 在文件最开头(注:一定是最开头)加上如下语句(-startup前面两行),第 ...
- eclipse显示xml提示
当网速比较慢时,可以添加本地的dtd. window下的preferces,输入xml,找到xml catalog 接着
- c#之课后习题
1.折叠代码 #region 折叠内容#endregion 2.保留三位小数 using System; namespace _005_double保留3位小数 { class Program { s ...
- sql 存储过程命名规范
规范的命名可以提高开发和维护的效率,如果你正在创建一个新的存储过程,请参考如下的命名规范. 句法: 存储过程的命名有这个的语法:[proc] [MainTableName] By [FieldName ...
- kettle杂记
版本8.0,以下是我在使用kettle时候的一些小tips 1.“插入/更新”必须指定字段,“表输出”无需指定字段,但是源表的字段必须包含在目标表中,否则unknown colum! 2.连接数据库时 ...
- EF切EFCore2.0存储过程问题
在从EF切换成EFCore2.0的过程中,遇到了存储过程的实现问题. 在EF中调用存储过程,非常方便,能够直接将结果转换成对应的结果类. 如代码中的Database.SqlQuery<TElem ...