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

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

开发者学堂课程【移动 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

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

相关文章
|
3天前
|
数据采集 人工智能 安全
|
12天前
|
云安全 监控 安全
|
4天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1042 151
|
4天前
|
编解码 人工智能 机器人
通义万相2.6,模型使用指南
智能分镜 | 多镜头叙事 | 支持15秒视频生成 | 高品质声音生成 | 多人稳定对话
|
17天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1731 9
|
9天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
680 152
|
11天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
644 13
|
6天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
406 4