《使用HTML5实现响应式布局》第七章-边框样式-实践学习资料.pptxVIP

第七章边框样式

实践目标

网页数据表格的样式化

制作天猫商家导航网页

任务一：网页数据表格的样式化

使用CSS3改变表格的默认外观，样式化数据表格。

使用CSS3的边框属性、边距和填充属性，修改第4章实践课工作任务2的代码，对第一个表格执行样式化处理

网页数据表格的样式化

原表格效果

样式化效果

打开第4章实践课工作任务2的代码，添加CSS3样式代码。

定义body选择符，设置body的宽度、字体、文字大小和颜色。

定义table选择符，设置表格宽度、边框样式。

定义td、th选择符，设置td和tr的边框样式。

定义td:first-child和th:first-child，取消左边框的重叠部分

网页数据表格的样式化

使用CSS3的边框属性、边距和填充属性，修改第4章实践课工作任务2的代码，对第二个表格进行样式化处理

原表格效果

样式化效果

使用HTML5和CSS3制作天猫商家的导航页面。

任务二：制作天猫商家导航网页

导航页面是以链接和搜索的方式，提供用户快速访问的入口。

本次任务以天猫商家为题材背景，制作一个基本的商家导航页面。

要求，编写页面结构内容，使用CSS3制作页面边框效果，对form表单样式化，并用列表标签排列商家链接

制作天猫商家导航网页

创建HTML5文档，编写页面结构。

定义body样式，设置最外层div的边框。

设置form表单样式，处理input、button的边框、文本。

定义分隔线的样式。

定义footer样式，设置字体、宽度

定义ul、li及其中的a标签的样式，设置边距和填充。

红色边框

白色

灰色

页脚

制作基本的商家导航页面。要求，编写页面结构内容，使用CSS3制作页面边框效果，用列表排列商家链接

制作天猫商家导航网页

END