分享学习网络的点点滴滴

AJAX异步JavaScript和XML：允许我们以异步方式与远程web服务器通信。通过AJAX调用，我们可以动态地从web服务器请求数据；AJAX名称中最初包含XML，这是一种数据格式，之前很常用，现在，JSON更加的被常用，因为JSON更轻量，更容易解析，与JavaScript有天然的兼容性；这里简单的介绍一下， 后面的文章在做详细的解释和用法应用程序编程接口：可以被另一个软件使用的软件，以允许应用程序相互通信在WEB开发中有很多很多很多的API：DOM API。

本地存储API在现实使用的尽量减少使用，它不仅是明文的，而且随着数据越来越多，你的性能也就会越来越慢现在刷新浏览器数据就会进行存储。

● 当然这个表单只能接受100个，但是作为实验也够用了。然后就能在Netlify接受到用户的表单。● 之后会有一个提示，提示我们提交成功。● 接着在我们的网站输入并提交表单。

● 注册完成之后，点击sites，将我们的网站文件夹拖入。● 我们也可以修改我们的站点名称，让他更加好记。● 首先先点击右上角注册一个账号。● 之后就可以正常访问啦。

如上图所示，这个图标的内部尺寸为14791459，但是我们实际呈现的渲染的效果为570562；所以我们可以调整一下图像的大小，缩小图片的文件大小；

● 同理，为Android添加一个512和192像素的尺寸。● 对于安卓，我们需要添加一个单独的文件来实行。● 之后我们为IOS和Android添加图标。● 之后我们再添加一下我们的title。● 接着我们添加一下Favicon。● 这节课，我们将来完善它。首先我们调整一下图标的大小。● 之后再HTML链接上。

● 我们选择好这些之后，可以直接给我们进行分析。● 之我们点击这些就可以给我们意见进行改进。

这段 CSS 代码是用来解决 flexbox 的 row-gap 和 column-gap 属性在某些浏览器中不被支持的问题。它使用了一个类名 .no-flexbox-gap，然后为这个类名下的一些元素设置了间距，以达到类似 row-gap 和 column-gap 的效果。另外，它还使用了媒体查询来在不同的屏幕尺寸下改变间距的大小。● 例如，现在我们在导航添加一个很新的CSS属性，这个会让背景变得模糊。● 但是例如老版本的safari浏览器不支持，我们需要加另外的参数。

position: fixed” 是 CSS 中的一个属性，用于控制元素的定位方式。当一个元素被设置为 “position: fixed” 时，它的位置将相对于浏览器窗口而不是文档流中的其他元素进行定位。这意味着即使页面滚动，该元素的位置也不会改变。通常，“position: fixed” 属性用于创建固定在页面顶部或底部的导航栏、工具栏或广告等元素。由于这些元素需要保持在页面的相同位置，不受页面滚动的影响，因此使用 “position: fixed” 可以很方便地实现这个效果。

当我们用手机的时候，点击导航栏，跳转的时候，这个导航还是不会消失；我们可以用JS来实现跳转之后导航关闭。● 在导航中，我们使用#简单的实现了，现在我们要实现，点击导航自动跳转指定的节去，通过id去选择。● 但是这样跳转非常的生硬，我们可以添加一个参数让动画变得更加得流畅。● 注意，这里我们在HTML引用了一段JS，为了解决不兼容的问题。● 当然我们可以使用js来实现平顺滑动的效果。这样我们点击导航就能跳转到指定的节了。

● 还记得我们之前的移动导航吗？需要手动添加类才能使其生效，现在我们用js来自动实现。

const myName = '周杰伦';● 当然我们也可以创建变量去选择HTML文档中的元素const myName = '周杰伦';##选择文档中第一个类名为“heading - primary”的元素，并将其存储在名为“h1”的变量中。这个变量可以在后续的代码中被使用##在JavaScript中，document 是一个全局对象，代表整个 HTML 文档。querySelector 是document对象上的一个方法，它可以通过指定 CSS 选择器来查找文档中的元素。

● 调整了grid之后，布局有点错乱，现在我们来修改。● 合作伙伴的图标太挤了。● 使得两边边距减少。

如上图，我们希望把这些变成两列。让卡片胖一点，更加的好看。

● 和之前的手风琴一样，默认情况下，是全部透明的，导航将不可见，如果加上nav-open这个class类的话，导航将可见，这个取决去我们点击旁边的按钮通过JS来实现，后面我们会讲解;● 除此之外，我们还可以做一个动效的效果，使得导航出现的时候，有从右侧滑出的效果；● 之后我们来添加动画效果，除此之外，通过透明度的方式并不能真正的将导航隐藏。● 但是这里还有一个问题，我们希望打开的时候这三个杠消失，X图标出现。● 同样，在导航出现的时候我们需要把这些参数加上。● 然后通过选择器的方式，默认不显示X。

● 通过整个页面的修正，我们可以让其来平板上适配的更好！这次我们从59em来断点，904px。这个首页的位置更改为一行可能更好看！

我们通过浏览器的Devtools来查看，通过ipad观看已经非常不错了。

当我们自动生成HTML的框架代码的时候，会有这样一句代码在我们的头部这段代码是用于设置网页的视口（viewport）的。视口是指用户在浏览器中看到的网页区域，它的大小可以根据设备的宽度和高度而变化。这段代码中的width=device-width指示浏览器将视口的宽度设置为设备的宽度，而initial-scale=1.0指示浏览器将页面的初始缩放比例设置为1.0，也就是不进行缩放。这样设置可以确保网页在不同的设备上都能够正确地呈现，而不会出现缩放或显示不全的问题。.hero {

在响应式设计中，媒体查询中的断点指的是屏幕宽度或设备宽度的特定值，通常用于确定何时应用特定的CSS样式。媒体查询允许您根据屏幕大小和设备类型等因素，为不同的设备提供不同的CSS样式。在媒体查询中，您可以设置一个或多个断点，以确定何时应用特定的CSS样式。例如，您可以设置一个断点，使在屏幕宽度小于768像素时应用特定的CSS样式，而在屏幕宽度大于或等于768像素时应用不同的CSS样式。这样，您就可以根据不同的屏幕大小和设备类型，为不同的用户提供最佳的用户体验。● 手机设备：通常小于480像素。

媒体查询的工作原理是，当浏览器加载页面时，它会检查页面中的每个媒体查询，以确定哪些规则应该应用。如果媒体查询匹配当前设备，则其中的CSS规则将被应用。如果不匹配，则其中的CSS规则将被忽略。这样，您就可以根据设备的特性来为不同的设备提供不同的样式，从而实现响应式设计。● 以我们之前的代码来具体演示。

● 之后我们再设置一下访问的样式，以及通过flex的方式来调整间距。● 之后再替换我们的导航部分，我们整个页面就完成啦！● 接着我们就设置一下关于我们的这个样式。● 接着我们设置社交图标这一块。● 这节课我们来添加样式。

● 如图所示，我们首先建立五个grid的部分。● 之后替换一些logo和地址信息之类的。● 之后我们添加一些社交logo。● 接着替换其他东西。

● 但是里面默认的内容太深了，我们要把它变得浅一点，不让别人认为这是真正得内容。● 接着设置一下按钮得样式，首先我们采用之前得代码，直接赋予btn一些样式。● 选中它，就会出现一个边框，我们可以设置这个样式，因为默认的太丑了。也许你觉得很丑，但是这会让用户有反馈，使得用户眼前一亮的感觉。● 接着，我们来设置选择框得样式，直接给与填写框一样即可。● 首先，我们设置一下label的字体样式。● 接着给这个按钮一些单独的样式。● 接着我们可以设置一下焦点范围。● 接着设置输入框的样式。

● 接着，我们给每个input加上一个div，使得他们以列表的方式排放，并且有利于我们后面布局。#当点击姓名和邮箱的时候，会自动的选择输入框，通过id定位。● 之后我们在添加复选框，在给这个input添加必须项目。● 现在我们来替换左边文本框的内容。● 接着，我们给它添加一些小功能。● 接着我们添加一些简单的样式。● 然后设置一下样式。

● 但是看上图，这个由于container多了一点间距，我们可以把Cta的class移下来。● 之后我们添加一点阴影和背景颜色渐变，仅仅做测试。● 像上图这样，我们首先先建立两个框子。● 接着还需要设置overflow。● 接下来我们设置一下图片。

● 但是这个间距太大了，我们要来消除间距，这个是我们之间写的参数，就一个margin-bottom。● 到这里基本上就完成了，但是我们可以中间再添加一些文字作为两个组件的过渡。● 接着我们给这些图标添加一些圆圈之类的。● 接着就是添加一些样式了。● 然后直接设置一下样式。

● 作为企业我们肯定去推荐豪华价的这种，所以我要把基础价淡化，构造视觉层次。● 接着我们给基础价格再调价一项，为了使得按钮一平。● 但是这个基础价也太惨淡了，我们给它添加一些边框。● 接着我们给649价格加一个推荐的效果。● 接着我们再下面添加一些推荐性的语句。● 之后我们调整下框子的大小和位置。上节课我们完成的定价页面是这样的。● 首先我们先给卡片加上背景颜色。● 之后通过not添加一个间距。● 然后再调整下位置。

● 除了定价表之外，我们在定价表的下方还需要添加一些号召行的语言来刺激消费者，还是复制之前的那样。● 之后对这些文本来设置样式，为了让头部文字部分更容易布局，对这些再加一层class。● 接着我们将文本内容给通过HTML写上去，列表的部分我们直接复制之前的代码即可。● 接着讲下面的按钮什么的居中一下。● 同样的情况，生成第二个定价表。● 这节课我们来完成价目的部分。● 之后我们完成简单的布局。

● 但是仍然有一个问题，当图标放大时，会超过他的父元素box的大小，这里还是要使用hidden元素，这样会变成一个内部变大的效果，很好看。● 在建立这个网格的时候，会默认有间距，但是这个不是我们想要的，我们可以删除这些class，单独来建立grid布局。● 之后我们给用户见证和图片添加一些padding，是的跟图片会有一个好的搭配。● 但是这个图片太密集了，我们知识想让他展示，重点还是要放在用户评价上。● 接下来我们就来完成，我们未完成的内容吧，为其添加画廊。上节课，我们的推荐信完成如下。

● 接着，我们为这一部分添加副标题，我们可以直接复制之前的代码。● 接下来我们就开始来构建推荐信的部分。● 接着我们把它变成一个2x2的网格。● 先使用gird构建简单的布局。我们上节课完成了样品餐的部分。● 这节课我们来构建推荐部分。● 接着，我们来设置一下文本。● 总共有四个，直接来复制。● 接着我们设置一下图片。

● 然后还是通过之前添加图标的方式为这些分类添加一个好看的图标。● 之后我们再添加一个查看更多的链接。● 之后给一些行距，添加一个标题。● 上面的间隔是通过辅助类的方式。● 接下来给图标和文本一些样式。● 接着我们设置一下链接。

● 内容脱离了box，我们需要给内容单独再加一个class，然后给这个class一个padding的值。● 这样一个好看的卡片就制作出来了，后面的卡片我们可以直接复制这个样例。● 但是我们的图片再边框之上，我们可以通过overflow参数去。● 为了突出这些参数的数据，我们把数字单独添加一个class。● 接着替换内容，然后我们给不同标签一个不同的颜色。● 之后我们添加padding。● 接着我们设置一下文本样式。● 接下来就是添加边框阴影了。● 之后我们设置一下图标。● 之后就是添加圆角了。

● 本次我们将使用ioncons来添加我们的图标。● 当然这些部分的间距也需要跟上面的一样。● 话不多说，直接来添加文本和图片的样式。● 按照同样的方法去添加其他的图标吧。● 让我们先简单的生成这些框架。● 之后就来制作我们的卡片吧。● 大致实现的页面是这样的。● 然后我们的图标就出现啦。

上节课我们完成了工作流程的部分● 这节课我们将展示产品的特色宣传，首先把这部分的标题和图片通过html展现。

● 但是仍然感觉字体和图片的距离太大，这是因为我们设置了gap的原因，将gap设置未列。● 接着，我们给图片加一下圆圈背景，使其变得更好看。● 但是这个图片看上去怪怪的，我们将图片居中一下。

记得我们上次实现的页面的了么，如下图所示，这节我们接着来记住我们之前的画的草图现在我们就来构建Z字形的工作流程部分；● 首先我们添加标题工作流程。

● 现在我们应该取消前面的点，然后的让它们排队排摆放，仍热是flexbox。● 接着，我们想把section 5弄成一个注册的样式。● 接着我们去掉a标签的下划线，并给与一些样式。● 接着我们仍然需要去设置点击上去的颜色变更。● 接着我们仍然要设置点击时候的样式。

● logo在左边，导航在右边，这个很熟悉了把，直接flexbox大法。● header中包含logo和导航，先在HTML中生成这些。● 很显然LOGO太大了，我们来修复它。● 接着我们修复我们的背景和间距。

● 我们预计在按钮下面放置一些用户案例去年我们送了25万多份餐品!● 我们将这些图片文字以flex布局方式排列摆放● 之后我们设置一下图片的属性，将其设置为圆形，稍小一点，并设置一下文本● 之后将他们居中，并给一些间距● 之后我们可以将这些头像进行一个叠加，营造一种层次感；● 接着我们要取消最后一个元素的叠加。

● 但是没有边框看上去总是怪怪，我们添加上边框，但是我们不能直接用border，因为border会在外围添加边框，当放置到边框的时候会导致页面抖动；● 但是一般情况下，这个了解更多，我们一般希望太突出，来调整下，我们通过辅助类的形式去实现。● 接着我们来编写标题的样式，标题的调整可以根据自己的需求来调整，我这里就直接写。● 接下来，为了提升体验和更加美观，我们添加放置和点击的效果。● 接着，我们还是通过辅助类的方式来调整一下间距。● 接着我们在设置描述的字体样式。● 接着我们设置下按钮的样式。