开发者学堂课程【移动 Web 前端开发:页面-项目结构&页面结构】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/594/detail/8450
页面-项目结构&页面结构
一、项目案例
WebStorm 中创建一个项目,分别创建 css 目录,demo 目 录,images 目录,js 目录和 lib 目录以及第三方字体 fonts
1.准备工作
把准备好的图片拷贝到 images 中
把准备好的 font 字体拷贝到项目中 fonts
把项目入口图标拷贝到新建项目根目录下
Link
rel="shortcuticon"
type="image/x-icon"
href=
"favicom.ico"/
在项目的根目录下
2.创建 index.httml
//把 index 页面变成开发环境页面
我们使用基本 demo 模板里面的 container.html
< ! DOCTYPE html>
//修改题目为微金所-25期
微金所-25期
//修改目录结构,因为现在和 lib 是同级目录href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
//顺带把所有的容器分析一遍,查看网页结构
//第一部分顶部通栏
//第二部分导航
//第三部分轮播图
//第四部分是预约区域通栏,以及新闻模块
//经过分析此页面结构简单
< / header>
</code><code><span class="lake-fontsize-1515"> </span></code><code><span class="lake-fontsize-1515">src="lib/jquery/jquery.min.js">
src="lib/bootstrap/js/bootstrap.min.js">
代码运行:
基本框架已经搭建,内容还需写入
在 js 目录下创建 index.js
在 css 中创建 index.css
自此,所需的东西就已经齐全,项目结构就齐全了