欢迎湖南财经工业职业技术学院信息工程学院25软件技术3班、25软件技术4班的同学们!
| 周次 | 课次 | 学习重点 | 作品展 |
|---|---|---|---|
| 第一周 | 第一次课 | 1、web标准2、html骨架3、利用Visual Studio Code制作网页 | 01我的第一个网页 |
| 第二次课 | 常用的标签：1、标题标签2、段落标签3、换行标签4、水平线标签5、特殊字符 | 02标题标签 03社会主义核心价值观 补：漂亮的社会主义核心价值观 | |
| 第三周 | 第一次课 | 常用的标签：1、图像标签img | 04图像标签 05制作HTML5百科 |
| 第二次课 | 常用的标签：1、超链接标签a2、锚点标签 | 06中国共产党历史 | |
| 第四周 | 第一次课 | 列表标签：ul、li;ol、li;dl、dt、dd | 07制作三级列表、08制作京东导航 |
| 第二次课 | 表格标签：table、tr、td | 09个人简历表格 | |
| 第五周 | 第一次课 | 表单：form、input、text、password、checkbox、button、submit、reset、image | 10制作登录页面 |
| 第二次课 | 表单综合：email、url、number、data、color、tel、placeholder;textarea、select | 11电子信息系学生信息登记表 | |
| 第六周 | 第一次课 | 样式表的引入：1、行内式；2、内嵌式；3、外链式 | 12制作《军民情》 |
| 第二次课 | 基础选择器：1、标签选择器；2、类选择器；3、id选择器；4、通配符选择器 | 13制作google图标 | |
| 第七周 | 第一次课 | 文本样式属性：font-style font-weight font-size/line-height font-family | 14制作《念奴娇·追思焦裕禄》 |
| 第二次课 | 文本外观属性： color text-align line-height text-indent text-decoration | 15忆大山 | |
| 第八周 | 第一次课 | 复合选择器：1、后代选择器；2、子元素选择器；3、交集选择器；4、并集选择器；5、链接伪类选择器 | 16后代选择器；17子元素选择器；18交集选择器；19并集选择器；20链接伪类选择器补：体育新闻 |
| 第二次课 | 标签显示模式：1、块元素；2、行内元素；3、行内块元素 | 21块元素；22行内元素；23行内块元素24元素转换补： 仿新浪导航1 | |
| 第九周 | 第一次课 | 盒模型（content、border、padding、margin）；边框属性(border-style、border-width、border-color) | 25画框显示南宁考察图片补： 仿学校首页导航 |
| 第二次课 | 内边距padding、外边距margin、圆角边框border-radius | 26新浪导航27太极图 | |
| 第十周 | 第一次课 | 背景属性 | 28对联网页 |
| 第二次课 | 盒模型综合案例 | 29探索趣图 | |
| 第十一周 | 第一次课 | 盒模型复习 | 31学习强国 |
| 第二次课 | 浮动：浮-加了浮动的盒子是浮起来的，漂浮在其他标准流盒子的上面。漏-加了浮动的盒子是不占位置的，它原来的位置漏给了标准流的盒子。特-特别注意：浮动元素会改变display属性， 类似转换为了行内块，但是元素之间没有空白缝隙 | 32小米案例练习 | |
| 第十二周 | 第一次课 | 清除浮动：本质是解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流 | 33旅游网 |
| 第二次课 | 定位：静态定位、相对定位、绝对定位,定位口诀：子绝父相 | 34哈根达斯案例 | |
| 第十三周 | 第一次课 | 固定定位、屏幕截图软件的使用 | 35学习强国固定定位 |
| 第二次课 | 复习：仿制网页 | 36仿制网页-警务通报 | |
| 第十四周 | 第一次课 | 网页布局的综合应用、登录页面制作 | 37网页布局 |
| 第二次课 | 音频audio;视频video;菜单栏的应用 | 38b01制作音频播放界面38b02制作梦幻仙境视频播放页面38菜单栏的应用 | |
| 第十五周 | 第一次课 | 登录页面制作 | 39登录页面制作 |
| 第二次课 | H5-过度效果 transition;变形transform: translate(5px, -5px); | 40伸缩布局+鼠标移动特效 | |
| 第十六周 | 第一次课 | H5-过度效果 transition;变形transform:rotate(45deg) ; transform: scale(1.1); | 41CSS3书写三角42图片放大案例43分页按钮案例 |
| 第二次课 | H5-动画效果 animation: move 2s;定义动画@keyframes move {from {}to {}} | 44-动画序列 |