Web前端-HeadFirst-笔记-Ch13-表格与列表

本文介绍了HTML表格的创建及样式设置方法,包括表格结构、边框合并、隔行着色等技巧。同时,还详细讲解了如何使用CSS对列表进行样式定制,如列表标记类型更改、文本回绕等。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

表格

  1. html<table>元素:标记表格
  2. 要列出所有的单元格,当为空白格<td></td>,以保证列数的正确。
  3. 标题<caption>
  4. 单元格边框合并:border-collapse:collapse;
  5. 隔行着色
  6. 伪类nth-child:状态是一个元素相对于它的兄弟元素的数字顺序。p:nth-child(even0dd/2n+1/2n){background-color:red;}
  7. 跨行的单元格:<td rowspan属性></td>  在此单元格所跨的行中,删除其他行的元素
  8. 跨列:colspan。删除本行的被跨列的单元格元素
  9. 表格中嵌入表格
  10. 表格中对齐方式:text-align/vertical-align


列表

1. 标识类型

  • 无序列表  li{list-style-type:disc/circle/square/none;}
  • 有序列表  li{list-style-type:decimal/upper-alpha/lower-alpha/upper-roman/lower-roman;}
  • 定制标记  li{list-style-image:url(图片路径);

2. padding-top:px;

3. margin-left:px;相邻的多一些空间}

4. 文本回绕:life-style-position:inside标记下回绕/outside文本下回绕;in/out是相对于列表项的里外。



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值