无题
前面的课程我们已经对 HTML、CSS、JS 有了初步的了解,但是我们之前的练习并没有提到过响应式布局和移动端页面布局的问题,如果大家只用电脑浏览网页的话,可能差别不算太大,但是如果使用移动设备(如手机和平板电脑)打开网页,就可能会遇到在不同设备上显示效果不尽人意。移动端页面需要具备响应式设计,以适应不同大小和分辨率的移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术,确保页面在各种设备上都能良好显示。采用适合移动设备的布局方式,以确保用户在小屏幕上浏览时获得良好的用户体验。
首先,我们需要了解如何在 PC 端查看不同设备的显示情况,这里我使用的是 Chrome 浏览器,对于所有搞开发的小伙伴来说,Chrome、火狐浏览器以及新版的 Edge 浏览器应该是最好用的工具了
接着,我们在浏览器页面使用 F12,进入开发者工具,
主流的实现方案有两种:
通过 rem、vw/vh 等单位,实现在不同设备上显示相同比例进而实现适配。
响应式布局,通过媒体查询 @media 实现一套 HTML 配合多套 CSS 实现适配;
比如,小米商城移动端使用 rem 布局,
第二种,比如我们 ...
无题
JavaScript 于 1995 年由 Netscape 公司的 Brendan Eich 创建。起初,它被设计为一种简单的脚本语言,用于处理用户在浏览器中的输入。随着浏览器技术的不断发展,JavaScript 也逐渐演变成为一种功能强大的编程语言。
JavaScript 是一种轻量级、解释型、面向对象的脚本语言。它主要被设计用于在网页上实现动态效果,增加用户与网页的交互性。作为一种客户端脚本语言,JavaScript 可以直接嵌入 HTML,并在浏览器中执行。与 HTML 和 CSS 不同,JavaScript 使得网页不再是静态的,而是可以根据用户的操作动态变化的。
JavaScript 的语法灵活,易于学习,是前端开发的核心技术之一。它使得开发者可以通过处理用户输入、修改页面内容、与服务器进行交互等方式,为用户提供更富有体验的网页。
JavaScript 在前端开发中扮演着重要的角色,其应用领域包括但不限于:
客户端脚本: 用于在用户浏览器中执行,实现动态效果和用户交互。
网页开发: 与 HTML 和 CSS 协同工作,使得网页具有更强的交互性和动态性。
后端开发: 使用 N ...
无题
HTML标签html全称Hypertext Markup Language(超文本标记语言)
HTML通过一系列==标签(元素)==来定义文本、图像,链接等。HTML标签是尖括号包裹的关键字
1234567<p>这是一个段落<p><h1>这是一个标题<h1><a href = "#">这是一个超链接</a><!-- 也存在单标签 --><input type = "text"><br><hr>
<br> 换行标签<hr> 水平分割线标签区别:单标签用于没有内容的元素,双标签用于有内容的元素
HTML文件结构如下12345678910111213141516<!doctype html><html lang="en"> <head> <!-- 这里放置标题的元信息 --> <title>文档标题</titl ...
无题
CSS(Cascading Style Sheets)是一种用于定义网页样式和布局的样式表语言。它与 HTML 一起用于构建 Web 页面,HTML 负责定义页面的结构和内容,而 CSS 则负责控制页面的外观和样式。
当谈到 HTML 和 CSS 的关系时,你可以将 HTML 想象成一座建筑的结构,而 CSS 则是这座建筑的外观和装饰。
HTML(结构) 就像是一座建筑的骨架和框架。它定义了建筑的基本结构,包括墙壁、窗户、门、楼梯等。在网页开发中,HTML 定义了文本、图片、链接、表格、表单等基本元素的结构,它告诉浏览器应该在页面上放置哪些内容,但没有指定它们的外观。就像建筑的骨架告诉你建筑有哪些房间,但不告诉你它们的颜色或装饰。
CSS(样式) 就像是建筑的粉刷、装饰和布局。它决定了建筑的外观,包括墙壁的颜色、窗户的形状、门的样式以及家具的摆放。在网页开发中,CSS 用于定义文本的颜色、字体、间距、背景颜色,以及页面的布局和排列方式。就像建筑的外观和装饰可以让你的建筑变得独特而吸引人,CSS 可以让你的网页看起来吸引人且专业。
所以,HTML 提供了网页的结构和内容,而 CSS 负责 ...
网络技术与应用笔记
计算机网络技术与应用:第 1—2 章详细复习笔记
整理依据:本目录《计算机网络技术与应用01-清华2版.pdf》(29 页)与《计算机网络技术与应用02-清华2版.pdf》(53 页)。目录中目前只有这两章课件,因此本文覆盖第 1、2 章,不预设后续章节内容。
使用方式:先通读概念与原理,再做计算和转发推演,最后用“速记清单”和“自测题”检查掌握情况。文中的“课件页码”均指 PDF 阅读器从 1 开始计数的页码。
标注约定:【课件】为课件直接给出的内容;【理解补充】为帮助理解的解释、例题或必要的前置知识;【辨析/校正】为课件简化表述、笔误与严格技术含义的区别。未逐条标注的主体按课件内容展开;练习中的新数值均为自拟。
目录
一、第 1 章:计算机网络的概念
二、第 2 章:以太网原理与组网技术
三、以太网组网实验与 Packet Tracer 操作
四、典型例题与自测题
五、复习速记清单
六、课件页码索引、表述校正与核查来源
一、第 1 章:计算机网络的概念1.1 什么是计算机网络课件定位:第 1 章,第 2—4 页。
定义:利用通信线路,将具有独立功能的计算机连接起来,使它们能 ...
算法模板
自用算法模板记录
Trick题单
萌新向Trick题单笔记记录
DP
前缀DP例一、前缀和给定⼀个数组 a ,求出所有起点到当前位置的和
f[i] = f[i-1] + a
例二、前缀最大值f[i] = max(f[i-1], a)
例三、爬楼梯假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。有多少种不同的⽅法爬到楼顶呢?
状态:f[i]表示从起点到阶梯i有多少种方式
状态转移:f[i] = f[i - 1] + f[i - 2]
拓展:每次向上一步或者向下直接跳到楼底,问k次行动后,到达第x阶台阶的方案数(以行动次数找状态)
例四、最大子数组和给一个整数数组nums,找出一个最有最大和的连续子数组(子数组最少包含一个元素),返回其最大值
状态:f[i]表示以当前节点i结尾的子数组的最大值
则f[i] = max(f[i] + ai)
以问题做状态、以i开头、以i结尾作为状态定义
例五、过河卒类似二维dp或者双重前缀dp吧
例六、滚动数组利用奇偶性,把i % 2这个数组当作当前阶段,1 - i % 2当作上一阶段
123456789101112vector<vector<int>> dp(2, ve ...
回溯
==本质上是一种枚举==
定义从初始状态经过不确定的步数,到有条件的⽬标状态
每个状态有⼀种或多种⽅式到下⼀个状态(状态转移)
在过程中进⾏⼀定的判定,对⼀定不可能到⽬标状态的提前结束枚举(剪枝)
例一 :组合数给定两个整数n和k,返回范围[1, n]中所有可能的k个数的组合
123456789101112131415// c++ 11vector<vector<int>> ans;vector<int> comb;void traceback(){ if(comb.size() == k){ ans.push_back(comb); return; } int lower = comb.size() == 0 ? 1 : comb.back() + 1; for(int i = lower; i <= n;i ++){ comb.push_back(i); traceback(); comb.pop_bac ...