如何用纯HTML3实现常用CSS效果 求HTML3排版相关学习资源

1. 实现border-radius + overflow: hidden效果 #

HTML3无原生圆角支持，采用九宫格表格方案实现：

• 绘制4张对应圆角尺寸的单色GIF图片（带透明区域，仅保留圆角边框部分），以及上下边、左右边的1px宽/高的同色边框GIF
• 搭建border=0 cellpadding=0 cellspacing=0的3*3表格，四个角的单元格分别放置对应的圆角GIF，上下边、左右边单元格放置对应边框GIF，中间单元格放置实际内容
• 给整个表格设置固定宽高，中间内容单元格也设置对应固定宽高，内容超出尺寸后会被外层表格结构限制，不会溢出圆角范围

2. 实现float: right + clear: right文字环绕效果 #

直接用HTML3原生标签属性即可实现，无需CSS：

• 给需要居右的<img>标签添加align="right"属性，即可自动实现图片居右、周边文字环绕的效果
• 需要清除右侧浮动、让后续内容不再环绕时，添加<br clear="right">标签即可

3. 实现渐变背景效果 #

采用渐变背景GIF平铺方案：

• 按照需要的渐变方向、颜色、高度/宽度，制作1px宽（纵向渐变）或1px高（横向渐变）的渐变GIF图片
• 给需要添加渐变的容器（<body>、表格、单元格等）添加background属性，值为该GIF的资源地址，老式浏览器会自动沿对应方向平铺，实现全屏/全容器的渐变效果

4. 实现display: inline-block; vertical-align: text-top布局效果 #

用无框单行表格实现：

• 搭建border=0 cellpadding=0 cellspacing=0的单行多列表格
• 每个需要横向排列的元素放入单独的<td>单元格，给所有<td>添加valign="top"属性
• 最终效果和inline-block加顶部对齐完全一致

学习资源推荐 #

优先查找W3C官方的HTML3.2规范作为标准参考，其次可查找90年代发布的HTML入门教程、书籍扫描件，重点关注原生标签属性、表格布局、图片属性相关内容即可，无需涉猎任何CSS相关的规则。

内容的提问来源于stack exchange，提问作者DMJ