• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
李志敏 显示全部楼层 发表于 2021-8-16 11:51:11 |阅读模式 打印 上一主题 下一主题
列表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小写、大写英文字母
  1. ul.a {list-style-type: circle;}
  2. ul.b {list-style-type: square;}
  3. ol.c {list-style-type: upper-roman;}
  4. ol.d {list-style-type: lower-alpha;}
复制代码
例如上述设置后,表现的为
2.列表项标志的图像list-style-image: url
  1. 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属性设置表格的边框被折叠成一个单一的边框或隔开
  1. table {border-collapse: collapse;}
  2. table, td, th {border: 1px solid red;background-color:lightgray;color:green;text-align:center}
复制代码

2.表格宽度和高度,例如
  1. table{width:100%;}
  2. th{height:40px;}
  3. tr{height:30px;}
复制代码
3.表格内文本对齐方式
text-align水平对齐,vertical-align垂直对齐(设置垂直对齐方式时必须指定td的高度)

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作