分享到

项目一 Web 前端设计基础

任务一 HTML 世界里的“Hello world”

一、Web 基础

二、HTML 的发展历史

三、Web 标准

四、主流浏览器

五、浏览器、域名与网站的工作原理

任务二 基于 IDE 进行 HTML 页面的开发

一、目前主流 Web 开发工具

二、安装 HBuilderX

项目二 HTML5：构建内容的骨架

任务一 黄山旅游网网站首页骨架构建

一、HTML5 文档结构与基础语法

二、HTML5 引入样式表

三、HTML5 语义化标签

任务二 黄山旅游网网站首页内容构建

一、文本标签：<h1> ～ <h6>、<p>

二、列表标签：<ul>、<ol>

三、链接标签：<a>

四、分组标签：<div>、<span>

五、图像与多媒体：<img>、<video>、<audio>

六、理解块级别元素和内联元素

任务三 大学课程表内容设计

一、<table> 标签

二、<table> 标签属性详解

任务四 用户注册页面设计

一、认识表单

二、HTML5 新增的表单属性

三、HTML5 表单标签

项目三 CSS3：为内容添加样式

任务一 智汇资讯——文字与基础视觉修饰

一、CSS3 概述

二、CSS 样式的引入机制与工程实践

三、元素选择器的精准定位逻辑

四、CSS 优先级与层叠规则的数学逻辑

五、继承

六、CSS 自定义变量

七、CSS 值与单位

八、CSS 嵌套

九、文本属性与视觉传达的深度应用

任务二 智汇资讯——盒子模型与区块装饰

一、盒子模型：Web 空间的底层逻辑

二、box-sizing：开发者夺回控制权的利器

三、盒子模型相关属性

四、视觉质感的提升：圆角与阴影

五、CSS 逻辑属性

项目四 现代 CSS 布局技术

任务一 基于经典布局实现电商平台首页设计

一、float 定位

二、position 定位

三、z-index：控制元素层叠顺序

四、传统布局（浮动 + 定位）优缺点

任务二 基于 Flex 布局重构电商平台首页设计

一、Flexbox 灵活布局

二、Flex 布局优缺点

任务三 基于 Grid 布局重构电商平台首页设计

一、Grid 网格布局

二、Grid 布局优缺点

三、三大布局总结与工程选型规范

四、Flex+Grid 实战配合策略与项目应用方案

项目五 CSS3：高级样式与动效

任务 环球电影·光影盛宴

一、过渡

二、变形

三、关键帧动画

四、渐变

项目六 响应式 Web 设计

任务 基于响应式布局的书城网站构建

一、视口

二、媒体查询

三、响应式单位（rem、em、vw、vh）

四、图片的响应式处理

项目七 综合演练一：在线汽车销售网站

任务一 大屏轮播图效果制作

一、JavaScript 概述

二、JavaScript 基本语法

三、JavaScript 基本语句

四、JavaScript 的事件

五、浏览器内部对象

任务二 综合案例：汽车销售网站制作

一、网页排版

二、SEO（搜索引擎优化）

项目八 综合演练二：中华岩彩艺术

任务 中华岩彩艺术网站

一、Tailwind CSS 简介

二、Tailwind CSS 安装

三、Tailwind CSS 基础概念

四、Tailwind 配置

参考文献