html用图片代替列表,Html列表与图片的应用

1.Html文档中使用的特殊字符

2.列表的标记

1)用途：列表标记可以创建一般的无序列表、编号列表、以及定义列表的三种方式，还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容

①无序列表

• …

②有序列表

1. …

③定义列表

*****注意***

可以直接输入标记，查看标记默认状态

2)无序列表

①语法：

• 内容
• 内容

其中：

…表示一个项目

②项目符号类型参数及显示

3)有序列表

①语法：

1. 内容1
2. 内容2

②项目符号类型参数及显示说明

4)定义列表

①语法：

标题1

内容1

标题2

内容2

定义列表表示一个项目.表示一个项目下更详细的内容的解释

3.网页支持的图片

①GIF   256种颜色，支持透明，动画

②JPEG(高度压缩)1670万种颜色，不支持透明，不支持动画

③PNG(网络可移植格式)无损压缩，支持透明，不支持动画，颜色从几种到1670万种4.插入图片标记

5.路径

①绝对路径：提供目标文档的完整主机名称、路径信息及文档全称

②相对路径：从当前文档开始的路径

③使用:

(1)如果当前文档和目标文档的位置平行，则直接书写目标文档全称；

(2)如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称

(3)如果当前所在文档所在文件夹和目标文档位置平行，则书写为../目标文档全称

(4)根相对路径：从站点根目录开始的路径，以“/”开始(PHP使用)

6.图片属性

7.表格基本结构

-----定义表格...----定义表行...---定义表列(单元格)...----文字标题栏(加粗)会默认自动居中

8.表格标题

9.表格结构化

作用：代码乱序时结构得到保持

(1)结构化格式(加了无效果，浏览器看)

...----表示表头区

...----表体区....------表尾区

(2)直列化格式

...用于统一控制某一列的格式，取代重复的工作

(例如：用于某一列标红，或者某一列居中)10.特殊表格技巧

(1)制作凹凸表格：改变table的bordercolorlight、bordercolordark属性(这是手册中没有的)

Bordercolorlight设置边框亮时的颜色(boder=”1”时才有用)

Bordercolordark设置边框暗时的颜色(boder=”1”时才有用)

(2)隐藏表格某部分边框线：改变table下的frame属性和rules属性

(3)细线表格效果公式

①表格自身的border==”0”

②给表格设置背景颜色==细线颜色

③给表格设置、单元格之间距离cellspacing==细线粗细

④设置表格内部背景色

html>

table

.table {

border: 1px solid #ccc;

border-collapse: collapse;

}

.table thead tr th,

.table tbody tr td {

padding: 10px 12px;

text-align: center;

color: #333;

border: 1px solid #ddd;

border-collapse: collapse;

background-color: #fff;

}

css制作table细线表格

编号姓名性别电话号码生日

1coco男123456788882020-06-12 10:00:002cici男136888899992020-06-12 10:00:003tom女136565656562020-06-12 10:00:00