web前端开发（HTML+CSS）

杨根福

目录

  • 1 课程介绍
    • 1.1 课程介绍
    • 1.2 思政设计
    • 1.3 软件安装
  • 2 任务一 创建第一个HTML5网页
    • 2.1 教学设计
    • 2.2 任务描述
    • 2.3 知识准备
    • 2.4 任务实现
    • 2.5 任务小结
    • 2.6 测试
    • 2.7 拓展
    • 2.8 教学反思
  • 3 任务二 搭建学院简单网站
    • 3.1 教学设计
    • 3.2 任务描述
    • 3.3 知识准备
    • 3.4 任务实现
    • 3.5 测试
    • 3.6 任务小结
    • 3.7 拓展
  • 4 任务三 美化学院简单网站
    • 4.1 教学设计
    • 4.2 任务描述
    • 4.3 知识准备
    • 4.4 任务实现
    • 4.5 任务小结
    • 4.6 测试
    • 4.7 拓展
  • 5 任务四 制作学院介绍页面
    • 5.1 教学设计
    • 5.2 任务描述
    • 5.3 知识准备
    • 5.4 任务实现
    • 5.5 任务小结
    • 5.6 测试
    • 5.7 拓展
  • 6 任务五 制作学院网站导航条
    • 6.1 教学设计
    • 6.2 任务描述
    • 6.3 知识准备
    • 6.4 任务实现
    • 6.5 任务小结
    • 6.6 测试
    • 6.7 拓展
  • 7 任务六 制作学院新闻块
    • 7.1 教学设计
    • 7.2 任务描述
    • 7.3 知识准备
    • 7.4 任务实现
    • 7.5 任务小结
    • 7.6 测试
    • 7.7 拓展1 盒子模型
    • 7.8 拓展2 CSS常见数值单位
    • 7.9 拓展3 行内元素与块级元素
    • 7.10 拓展4 flex布局
  • 8 任务七 制作学生信息表
    • 8.1 教学设计
    • 8.2 任务描述
    • 8.3 知识准备
    • 8.4 任务实现
    • 8.5 任务小结
    • 8.6 测试
    • 8.7 拓展
  • 9 任务八 制作学生信息注册表单
    • 9.1 教学设计
    • 9.2 任务描述
    • 9.3 知识准备
    • 9.4 任务实现
    • 9.5 任务小结
    • 9.6 测试
    • 9.7 拓展
  • 10 任务九布局学院网站主页
    • 10.1 教学设计
    • 10.2 任务描述
    • 10.3 知识准备
    • 10.4 任务实现
    • 10.5 任务小结
    • 10.6 测试
    • 10.7 拓展
  • 11 任务十 使用CSS3制作动画效果
    • 11.1 教学设计
    • 11.2 任务描述
    • 11.3 知识准备
    • 11.4 任务实现
    • 11.5 任务小结
    • 11.6 测试
    • 11.7 拓展
  • 12 任务十一 学院网站
    • 12.1 教学设计
    • 12.2 任务描述
    • 12.3 任务实现
    • 12.4 任务小结
    • 12.5 拓展
  • 13 任务十二 制作化妆品网站
    • 13.1 教学设计
    • 13.2 任务描述
    • 13.3 任务实现
    • 13.4 任务小结
    • 13.5 拓展
知识准备
  • 1 知识准备
  • 2 美化样式CSS3
  • 3 行内样式
  • 4 内部样式表
  • 5 外部样式表
  • 6 标记表达式

知识准备

CSS 是目前流行的网页表现语言，所谓表现，就是赋予结构化文档内容显示的样式，包括版式颜色和大小等。也就是说，页面中显示的内容放在结构里，修饰、美化放在表现里，做到结构与表现分离。这样当页面使用不同的表现时，可以显示不同的外观。目前CSS 的最新版本是CSS3。CSS功能强大，能实现比HTML 更多的网页元素样式，几乎能定义所有的网页元素。现在几乎所有漂亮的网页都使用了CSS，CSS已经成为网页设计必不可少的工具之一。很多网页都使用CSS添加了各种酷炫的效果。