第8课 CSS基础(四)

1、上次课内容回顾：图片边框图片边框 边框边框粗细粗细border-width 边框颜色边框颜色border-color 边框样式边框样式border-style 边框属性边框属性border图片缩放图片缩放 图片宽度图片宽度width 图片高度图片高度height2022-3-28CSS基础（四）1图文混排图文混排 文字环绕文字环绕float 图片与文字的边距图片与文字的边距外边距：外边距：margin 内边距：内边距：padding图片与文字对齐方式图片与文字对齐方式 横向对齐方式：借助父元素的对齐方式横向对齐方式：借助父元素的对齐方式 纵向对齐方式纵向对齐方式top/middle/botto

2、m/baseline/text-bottom/text-top/middle/sub/super/像素值像素值2022-3-28CSS基础（四）2上次课内容回顾：上次课内容回顾：背景颜色背景颜色background-color背景图像背景图像background-image背景图像平铺背景图像平铺background-repeat背景图像位置背景图像位置background-position背景图片位置固定背景图片位置固定background-attachment2022-3-28CSS基础（四）312.7 使用滑动门技术的标题对于这样标题宽度不固定，需要变化宽度，而同时要对于这样标题宽度不固

3、定，需要变化宽度，而同时要保证花纹在左右两端，需要使用保证花纹在左右两端，需要使用“滑动门技术滑动门技术”。所谓所谓“滑动门滑动门”，就是两个嵌套的元素，各自使用一，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样个背景图像，二者中间部分重叠，两端不重叠，这样左右两端的花纹就可以都被显示出来，中间部分的宽左右两端的花纹就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时依然可以保证左右度可以自动适应，因此宽度变化时依然可以保证左右两端的图案不变。两端的图案不变。2022-3-28CSS基础（四）4知识要点知识要点u用用CSSCSS设置表格样式设置表格样式u

4、控制表格控制表格u美化表格美化表格u制作案例制作案例2022-3-286CSS基础（四）知识回顾HTML表格标记表格标记 2022-3-28CSS基础（四）7知识回顾其他表格标记和属性其他表格标记和属性cellspacing cellpadding2022-3-28CSS基础（四）8第15章 用CSS设置表格【学习目标学习目标】表格是网页制作中使用最多的工具之一，通过表格配合表格是网页制作中使用最多的工具之一，通过表格配合文字和精美的图片，才能完成优秀的网页，常用于统计文字和精美的图片，才能完成优秀的网页，常用于统计数据、制作调查表、无边框表格排版等，可通过数据、制作调查表、无边框表格排版等，

5、可通过CSS设设置表格的颜色、标题、边框、背景等。置表格的颜色、标题、边框、背景等。本章主要内容包括：本章主要内容包括：表格标签表格标签用用CSS设置表格结构设置表格结构用用CSS设置表格样式设置表格样式用用CSS设置表格的斑马纹效果设置表格的斑马纹效果92022-3-28CSS基础（四）第15章 用CSS设置表格2022-3-2810CSS基础（四）21网页中的表格11淘宝网商品搜索页面淘宝网商品搜索页面2022-3-28CSS基础（四）网页中的表格12得意生活网社区页面得意生活网社区页面2022-3-28CSS基础（四）网页中的表格13天涯社区网发帖页面天涯社区网发帖页面2022-3-28

6、CSS基础（四）15.1 控制表格1、 表格中的标记表格中的标记表格由行、列和单元格表格由行、列和单元格3部分组成，常用标记参见部分组成，常用标记参见HTML部分。下表为表格常用元素标签及说明部分。下表为表格常用元素标签及说明例第例第15章章01begin.htmHTML中表格常用属性：中表格常用属性： border bgcolor width height cellspacing cellpadding142022-3-28CSS基础（四）2、 设置表格的边框设置表格的边框边框作为表格的分界在显示时往往必不可少。根据不同的边框作为表格的分界在显示时往往必不可少。根据不同的需求，可以对表格和单

7、元格应用不同的边框。可以定义整需求，可以对表格和单元格应用不同的边框。可以定义整个表格的边框也可以对单独的单元格分别进行定义。个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性是美化表格的一个关键元素，利用的边框属性是美化表格的一个关键元素，利用CSS可以定可以定义各种边框样式。义各种边框样式。语法语法：样式名：样式名border: 属性值；属性值；要点要点：先设置：先设置样式，再分别对该样式的样式，再分别对该样式的和和进行设置进行设置例第例第15章章01record.htm在在table标签中添加属性标签中添加属性cellspacing=0例第例第15章章01record-2px

8、.htm152022-3-28CSS基础（四）15.1 控制表格2、 设置表格的边框设置表格的边框(1) 设置单元格边框设置单元格边框语法：样式名border-collapse:属性值；说明：该样式表示相邻的边框线是否合并，属性值可为separate(默认值)或collapse(重叠)，该样式可设置边框为1px的细线表格例第例第15章章01record- collapse.htm(2) 相邻边框的合并规则相邻边框的合并规则见见P220CSS2规范规范下的合并规则下的合并规则例P221(3) 边框的间距边框的间距(单元格外边距）单元格外边距）语法：样式名border-spacing:属性值；例第

9、例第15章章01record- separate.htm补充：单元格内边距使用padding162022-3-28CSS基础（四）15.1 控制表格2、 设置表格的边框设置表格的边框172022-3-28CSS基础（四）15.1 控制表格边框：边框：1 1像素，实线，像素，实线，#0058a3#0058a3；字体：字体：ArialArial；文字大小：文字大小：14px14px；注意边框重叠的处理方式注意边框重叠的处理方式对齐对齐方式？是否方式？是否加加粗？粗？底色底色#4bacff#4bacff、文字颜色、文字对齐方、文字颜色、文字对齐方式、加粗、内部间距式、加粗、内部间距文字大小、对齐方式

10、、文字颜色、内文字大小、对齐方式、文字颜色、内部间距部间距背景颜色：背景颜色：#eaf5ff#eaf5ff背景颜色：背景颜色：#c7e5ff#c7e5ff3、确定表格的宽度、确定表格的宽度CSS表格宽度分为表格宽度分为“自动方式自动方式”和和“固定方式固定方式”两种两种语法语法：样式名：样式名table-layout:属性值；属性值；width:值；值；说明说明：属性值可为：属性值可为auto(自动自动)或或fixed(固定固定)例第例第15章章03中的日历采用了固定方式中的日历采用了固定方式182022-3-28CSS基础（四）15.1 控制表格4、其他与表格相关的标记、其他与表格相关的标记

11、(1) 划分结构表格划分结构表格标签标签、和和基本语法：基本语法： 说明说明：在：在CSS样式表中可分别对样式表中可分别对、和和中的中的设置不同的样式，设置不同的样式， 如：如：tbody th属性名：属性值；属性名：属性值；192022-3-28CSS基础（四）15.1 控制表格4、其他与表格相关的标记、其他与表格相关的标记(2) 划分划分列列结构结构标签标签在在CSS样式表中可单独对某些列设置不同的样式样式表中可单独对某些列设置不同的样式IE浏览器下：浏览器下：如：如： 注意注意：firefox浏览器不支持浏览器不支持202022-3-28CSS基础（四）15.1 控制表格2022-3-2

12、8CSS基础（四）2115.2 美化表格2022-3-28CSS基础（四）2215.2 美化表格capitontheadtbodytfoot15.2 美化表格15.2.1搭建搭建HTML结构结构15.2.2 整体设置整体设置 设置设置table和和table caption的样式的样式15.2.3 设置单元格样式设置单元格样式 设置设置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的样式的样式15.2.4 斑马纹效果斑马纹效果 设置设置tbody tr.even样式并对所有偶数行应用该样式样式并对所有偶数行应用该样式例第例第15章章02table-0.htm15

13、.2.5 设置列样式设置列样式 在在标签后添加六个标签后添加六个标记，并设置标记，并设置col.center和和col.right两种样式，且应用在不同列标签两种样式，且应用在不同列标签中中例第例第15章章02table-1-ie.htm232022-3-28CSS基础（四）15.3 案例-日历例第例第15章章03 calendar.htm例例CSS表格范例表格范例242022-3-28CSS基础（四）2022-3-28CSS基础（四）2515.3 案例-日历15.3.1搭建搭建HTML结构结构15.3.2 设置整体样式和表头样式设置整体样式和表头样式 设置设置table和和table caption的样式的样式15.3.3 设置日历单元格样式设置日历单元格样式 设置设置tbody tr、thead tr、 tfoot tr 以及以及tr和和td 的样式的样式例第例第15章章03table-1-ie.htm2022-3-28CSS基础（四）2615.3 案例-日历说明：说明：padding的顺序的顺序 padding: 10px 5px 15px 20px; 上、右、下、左上、右、下、左 padding: 10px 5px 15px; 上、上、