Html 项目介绍

项目名称：

小U课堂

项目描述：

小U课堂是优就业打造的在线实用技能学习平台，我们要完成 首页、同步课程、视频详情、登录、注册页面等静态页面的制作

项目页面（预览）

• 首页

• 列表页

• 详情页

• 其他

• 开发工具以及技术栈

  • 开发工具

    • VScode Photoshop 主流浏览器

  • 技术栈

    • 利用 HTML5 + CSS3 布局

• 采取结构与样式相分离，模块化开发

项目规划与项目搭建

概述：基于项目页面效果图分析，创建项目文件目录。 分析页面公共模块，规划创建公共模块的样式表文件，如页面头部和底部，方便重复使用

文件目录

概述：根据项目名称创建项目文件夹,推荐用对应的英文单词命名。 html、css、img、js 文件均归档至项目名称目录中

目录示例

• 项目文件夹

  • 样式类图片文件夹（images）

  • 样式文件夹（css）

  • 字体类文件夹（fonts）

  • 脚本文件夹（js）

  • 产品类图片文件夹（upload）

  ----webset
  ​
  - ---/html/
    |---- /user/                    与用户相关的页面  
    |---- /user/login.html          登录页
    ---/css/
    |---- /base.css                 重置浏览器样式    
    |---- /page                        其他页面的css
    |---- /page/pagename.css        单独某个页面的css
    |---- /common.css                  css通用样式库
    ---/js/
    |---- /lib                      公用组件
    |---- /lib/jquery.2.2.3.min.js  调用jq库文件 
    |---- /page                          其他页面的js
    |---- /page/pagename.js         单独书写的js
    |---- /common.js                公用方法
    ---/img/
    |---- /page                     其他页面对应的图片
    |---- /page/wap                 手机端图片夹
    |---- /page/wap/wap_icon.png    手机端图标
    |---- /logo.png                 公用图片

样式文件

公共样式(common.css)

• 说明： 有些样式和结构在很多页面都会出现，如页面头部和底部，此时，可以把这些结构和样式单独作为一个公共模块，方便重复使用

初始化样式（reset.css）

• 解释为什么要重置浏览器样式

• 总结重置样式

项目模块化开发

将一个项目按照功能划分，一个功能一个模块，互不影响，模块化开发具有重复使用、更换方便等优点

• 首页整体画块分析

• 首页头部画块分析、布局讲解

• 首页【同步课程模块】布局讲解，渗透margin负值的应用

• 在线练习页【选项卡】模块讲解

• 登录、注册弹框讲解