页面-项目结构&页面结构|学习笔记

简介: 快速学习 页面-项目结构&页面结构

开发者学堂课程【移动 Web 前端开发:页面-项目结构&页面结构】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/594/detail/8450


页面-项目结构&页面结构


一、项目案例

WebStorm 中创建一个项目,分别创建 css 目录,demo 目 录,images 目录,js 目录和 lib 目录以及第三方字体 fonts

1.准备工作

把准备好的图片拷贝到 images 中

把准备好的 font 字体拷贝到项目中 fonts

把项目入口图标拷贝到新建项目根目录下

Linkrel="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">

代码运行:

image.png

基本框架已经搭建,内容还需写入

在 js 目录下创建 index.js

在 css 中创建 index.css

自此,所需的东西就已经齐全,项目结构就齐全了

相关文章
|
2月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
3月前
|
前端开发
如何在前端项目中单独引入 ElementUI 图标以及使用
这篇文章介绍了如何在前端项目中单独引入Element UI的图标文件以及如何使用这些图标。
286 0
如何在前端项目中单独引入 ElementUI 图标以及使用
|
4月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
131 0
|
数据采集 小程序 定位技术
[笔记]微信小程序开发《三》框架基础:小程序生命周期、全局配置、页面配置。
[笔记]微信小程序开发《三》框架基础:小程序生命周期、全局配置、页面配置。
|
6月前
唯美动态个人404页面源码
手机端先加载静态图再缓慢加载gif动图,电脑端先加载静态图在加载mp4。提升打开速度!
32 0
唯美动态个人404页面源码
|
JSON 前端开发 JavaScript
BootStrap框架下使用JS动态加载table并点击相关列弹出二级页面
在这里记录一下,也是在公司用到的一个例子,刚刚解决,正好趁热打铁。前端页面是采用BootStrap框架搭建的,主要的样式涉及到项目,在这里就不截图了,直接上代码:
107 1
|
前端开发
A2021-A2022项目展示页面的内容。
A2021-A2022项目展示页面的内容。
96 0
A2021-A2022项目展示页面的内容。
|
JavaScript 前端开发 程序员
前端开发:VS Code编辑器新建Vue文件自定义模板的方法
在前端开发过程中,尤其是对于经验不足的初级开发者来说,需要掌握一些必备的提升开发速度的技巧,比如使用各种插件来提升开发速度,这样才能事半功倍。
349 0
前端开发:VS Code编辑器新建Vue文件自定义模板的方法
|
前端开发 开发者
评论列表案例-创建 CmtList 组件并渲染基本页面结构|学习笔记
快速学习评论列表案例-创建 CmtList 组件并渲染基本页面结构
146 0
评论列表案例-创建 CmtList 组件并渲染基本页面结构|学习笔记
|
JSON 小程序 程序员
微信小程序---全局配置及页面配置
微信小程序---全局配置及页面配置
微信小程序---全局配置及页面配置

相关实验场景

更多