第8课CSS基础(四)素材.pptxVIP

上次课内容回顾： 用CSS设置图像样式 图片边框 边框粗细——border-width 边框颜色——border-color 边框样式——border-style 边框属性——border 图片缩放 图片宽度——width 图片高度——height 2017-4-9 CSS基础（四） 1 图文混排 文字环绕——float 图片与文字的边距——外边距：margin 内边距：padding 图片与文字对齐方式 横向对齐方式：借助父元素的对齐方式 纵向对齐方式——top/middle/bottom/baseline/text-bottom/text-top/middle/sub/super/像素值 2017-4-9 CSS基础（四） 2 上次课内容回顾： 上次课内容回顾： 用CSS设置背景颜色与图像 背景颜色——background-color 背景图像——background-image 背景图像平铺——background-repeat 背景图像位置——background-position 背景图片位置固定——background-attachment 2017-4-9 CSS基础（四） 3 12.7 使用滑动门技术的标题 对于这样标题宽度不固定，需要变化宽度，而同时要保证花纹在左右两端，需要使用“滑动门技术”。 所谓“滑动门”，就是两个嵌套的元素，各自使用一个背景图像，二者中间部分重叠，两端不重叠，这样左右两端的花纹就可以都被显示出来，中间部分的宽度可以自动适应，因此宽度变化时依然可以保证左右两端的图案不变。 2017-4-9 CSS基础（四） 4 第8课 CSS基础（四） 知识要点 用CSS设置表格样式 控制表格 美化表格 制作案例 2017-4-9 6 CSS基础（四） 知识回顾 HTML表格标记 table tr td/td td/td td/td /tr tr td/td td/td td/td /tr /table 2017-4-9 CSS基础（四） 7 知识回顾 其他表格标记和属性 cellspacing cellpadding thead/thead tbody/tbody tfoot/tfoot 2017-4-9 CSS基础（四） 8 第15章 用CSS设置表格 【学习目标】 表格是网页制作中使用最多的工具之一，通过表格配合文字和精美的图片，才能完成优秀的网页，常用于统计数据、制作调查表、无边框表格排版等，可通过CSS设置表格的颜色、标题、边框、背景等。 本章主要内容包括： 表格标签 用CSS设置表格结构 用CSS设置表格样式 用CSS设置表格的斑马纹效果 9 2017-4-9 CSS基础（四） 第15章 用CSS设置表格 2017-4-9 10 CSS基础（四） 2 1 网页中的表格 11 淘宝网商品搜索页面 2017-4-9 CSS基础（四） 网页中的表格 12 得意生活网社区页面 2017-4-9 CSS基础（四） 网页中的表格 13 天涯社区网发帖页面 2017-4-9 CSS基础（四） 15.1 控制表格 1、 表格中的标记 表格由行、列和单元格3部分组成，常用标记参见HTML部分。下表为表格常用元素标签及说明 例第15章\01\begin.htm HTML中表格常用属性： border bgcolor width height cellspacing cellpadding 14 2017-4-9 CSS基础（四） 2、 设置表格的边框 边框作为表格的分界在显示时往往必不可少。根据不同的需求，可以对表格和单元格应用不同的边框。可以定义整个表格的边框也可以对单独的单元格分别进行定义。CSS的边框属性是美化表格的一个关键元素，利用CSS可以定义各种边框样式。 语法：样式名{border: 属性值；} 要点：先设置table样式，再分别对该样式的th和td进行设置 例第15章\01\record.htm 设置细线边框:在table标签中添加属性cellspacing=0 例第15章\01\record-2px.htm 15 2017-4-9 CSS基础（四） 15.1 控制表格 2、 设置表格的边框 (1) 设置单元格边框