大家好，又见面了，我是你们的朋友全栈君。 最近学习了一点HTML，闲来无事写个网页看看， 欢迎、改进、留言。...padding: 0; } ul{ list-style: none; } a{ text-decoration: none; } .clear{ clear: both; 二、头部和底部 先给网页设置一个头部.../img/02.png" alt="牡丹"> 原野生于加拿大的马尼托巴湖及萨斯喀彻温省的东南部及美国中南部的一些开阔树林、大草原上。...[3] 喜欢光照充足、温暖的气候条件 更多 松果菊可供药用，含有多种活性成分，可以刺激人体内的白细胞等免疫细胞的活力，具有增强免疫力的功效，还可以用于辅助治疗感冒、 <div...padding: 10px; text-align: center; background: #ddd; } /* 去下划线 */ a{ text-decoration: none; } 最后就可以得到一个简单的网页啦
大家好，又见面了，我是你们的朋友全栈君 固定布局 为网页设置一个固定的宽度，通常以px做为长度单位，常见于PC端网页。 ...），高度大都是用px来固定住。...缺点：因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样，显示非常不协调 栅格化布局 将网页宽度人为的划分成均等的长度...为了兼容 IE，采用的是浮动方式来实现栅格系统： 即每一个栅格都是用左浮动和百分比来进行排版，当窗口宽度改变，对应改变 container 容器的宽度，对应栅格宽度自然也跟着改变： bootstrap4...通过检测设备信息，决定网页布局方式，即用户如果采用不同的设备访问同一个网页，有可能会看到不一样的展示效果，一般情况下是检测设备屏幕的宽度来实现。
网页屏蔽鼠标右键Ctrl+N、Shift+F10、F11、F5刷新、退格键等按键 //屏蔽鼠标右键Ctrl+N、Shift+F10、F11、F5刷新、退格键 function...(window.event.keyCode == 39))) { //屏蔽Alt+方向键→ alert("不准你使用ALT+方向键前进或后退网页...window.event.srcElement.tagName == "A" && window.event.shiftKey) window.event.returnValue = false; //屏蔽shift加鼠标左键新开一网页
调试 Node.js 的代码和调试网页的代码用同样的工具，经验可以复用，体验也一致。...调试 Node.js 我们一般用 VSCode，而调试网页也可以用 VSCode，那么只要用熟了一个工具就行了，不用再去学 chrome devtools 怎么用，而且用 VSCode 调试体验也更好，...就这么简单，profile 的性能分析就是这么做的，简单的加减法。 火焰图中的每个方块的宽度也反应了耗时，所以更直观一些。...我觉得，除非你想看 rendering、memory 这些信息，因为 VSCode 没有支持需要用 chrome devtools 以外，调试 JS 代码，看 profile 信息和火焰图，用 VSCode...反正我觉得 VSCode 调试网页的 JS 代码挺香的，你觉得呢？
之前一般通过搜索引擎搜索，可以找到相应工具的页面。现在有了 Streamlit ，可以快速制作出对应功能的网页应用。...例如以下的一些例子 安装： pip install streamlit Streamlit 脚本是一个从上到下执行的命令流，页面中控件值的改变会使得脚本重新执行 运行 streamlit 脚本： streamlit...run main.py JSON 格式化 主要用到了以下控件 st.markdown：展示 Markdown 格式的文本，可以用展示标题等 st.text_area：输入文本框 一个文本框用于输入原始...JSON 数据，一个文本框展示格式化后的 JSON import streamlit as st import json def _format(s: str) -> str: try:...session 钟 st.session_state：session 变量，可以用类/字典方式访问 st.button：按钮 st.columns：页面分列 from datetime import
---- 现成的模板引擎 开始手写之前，我们先看看模板引擎应该是什么样的，在用koa开发后台服务的时候，我们用过ejs模板引擎，其作用是把模板渲染成html代码。下面是一个具体的使用例子。...index.js const Koa = require('koa') const views = require('koa-views') const path = require('path') const...手写简单的模板引擎 那这些模板引擎具体是怎么实现的呢？ 下面我们来手写一个简单的类ejs模板引擎。 需求分析 实现模板引擎先要定义模板的语法，这里我们就重新不定义了，直接使用ejs的语法。...我们只实现最简单的几个语法： <% '脚本' 标签，用于流程控制，无输出。 模板（输出是转义 HTML 标签） %> 一般结束标签 设计思路 先贴一下待编译的模板。...在里面的字符，保留为js逻辑 在里面的字符，保留js逻辑，且其值输出为html代码。 对这些处理方式，着手实现。 正则/<%=(.+?)
电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。...但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发...（你还可以设置更多节点） 用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围； 3.还有就是css3的单位rem： rem就是将根节点html的font-size的值作为整个页面的基准尺寸...那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置最大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...height:10.6rem; border:1px solid #000; box-sizing: border-box; } js
生成网页 3.树莓派服务器设置 4.内网穿透 5.结语 阅读本文你将了解的知识点： 了解树莓派做网页服务器的流程框架 使用Hexo生成静态网页 使用树莓派做服务器部署静态网页 穿透内网从外网访问部署的网页...树莓派做服务器运行Hexo博客网页 手头有一块树莓派4B，为了不让树莓派闲着，我用它做一个网页服务器，挂载自己的个人网页，分享一下自己的部署过程 1.服务器框架 配置树莓派网页服务器前首先要了解一下整体的框架...：Node.js，下载LTS版本 下载之后一路安装，不会的可以百度具体安装教程，不多说，安装完成后我们打开刚刚Git的命令行，右击桌面空白处打开GitBash，输入如下指令查看hexo和npm的版本 node...配置步骤： 更新树莓派源 打开树莓派镜像源列表 (此处用的vim编辑器，具体操作可以百度！...frp实现内网穿透 穿透后我们就可以在外网通过公网IP访问网页了（注意使用服务器的公网IP做穿透时一定要记得设置防火墙，让指定端口通行），此处我穿透到公网IP的8080端口，该端口可以通过外网访问 为了让网页访问地址更加合规
大家好，又见面了，我是你们的朋友全栈君。...用HTML和CSS制作简单的静态网页（小米商城） 网页效果如下： 代码如下 （第一次写静态网页，中间css代码和html代码没有分离，所以代码可能有点乱还请见谅） 1、css代码 /*------...} /*清除下划线*/ a{ text-decoration: none; } .tp{ height: 120px; width: 1360px; } /*把li向左浮动，然后设置一个右边的外边距...90的宽度 */ margin: 0 auto; overflow: hidden;/*清除浮动*/ } .top-boss{ background-color: black; line-height...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
流量当下的网络大环境，如何让我们的网站更容易出现在网民的视野中？这里我们就用原生JS实现网页调用系统自带的分享功能，为网页增加一个分享功能！...一.语法参数： url 要共享的 URL（ USVString ） text 要共享的文本（ USVString ） title 要共享的标题（ USVString） files 要共享的文件（“FrozenArray...”） 注意：Navigator.share()这是一个实验中的功能，此功能某些浏览器尚在开发中。...二.实现原理： 三.JS代码： 建议：使用前先判断浏览器是否支持此功能，若不支持，可以设置其它替代方案；若支持，则可以直接使用此功能来进行分享操作！ 1.判断浏览器是否支持： if (!...//要共享的 URL url: window.location.href, //要共享的文本 text: '全网视频免费看
模板引擎在前后端都能用到，但是通过作为前端，我们只需要一些简单的模板引擎。 先上代码： 模板引擎 ...user.id|safe }">{ user.company } js...function (model) { return fn.apply(model); }; } 这个我们能用这个模板引擎创建一个我们前端需要的...这里面我们使用正则表达式去匹配字符串中的变量，当然，你要对js正则表达式熟练应用。
本文讲解怎样用 Node.js 高效地从 Web 爬取数据。 前提条件 本文主要针对具有一定 JavaScript 经验的程序员。...Web 抓取的过程 利用多个经过实践考验过的库来爬取 Web 了解 Node.js Javascript 是一种简单的现代编程语言，最初是为了向浏览器中的网页添加动态效果。...正则表达式：艰难的路 在没有任何依赖性的情况下，最简单的进行网络抓取的方法是，使用 HTTP 客户端查询网页时，在收到的 HTML 字符串上使用一堆正则表达式。...现在，打开终端并运行 node crawler.js，然后你将看到大约存有标题的数组，它会很长。尽管这是一个非常简单的用例，但它展示了 Cheerio 提供的 API 的简单性质。...你也可以侦听 javascript load 事件，然后执行这些操作，在生产环境级别下强烈建议这样做。
做运营时间比较长的小伙伴应该会发现，各种运营活动其实有很多套路，对于不同活动实现运营活动页面有时常常改动UI或者动效果就ok。所以这些套路完全可以总结出来，优化一些工作流程。...支持我们营销活动的就是平台的「营销模板」功能，据说平台有超过 100万正版模板素材，覆盖了非常多的细分行业，包括：促销活动、互动游戏、海报、长页、表单等等模版，基本可以满足我司运营的需求了。...而且平台的这些小程序可以放到我们自己的APP当中，节约了非常多的开发人力！推荐大家去试试。以下是具体的操作流程。第一步，创建营销页面在模板市场中选中想使用的内容，随后点击弹窗中的「立即使用」按钮。...随后，在新的页面中完成相关内容的标记与配置，您可以通过拖拉拽的形式，对页面中的任意内容进行编辑与修改，随后点击右上角的「发布」按钮即可完成创建。...第二步，关联营销模板与小程序创建营销模板完毕后，您可以选择将已经创建好的营销内容上传至已有小程序，或新建小程序添加内容。选择新增小程序内容时，将会自动复用营销页面中的名称。
让你的网页放烟花 如何实现的？...先创建一个Canvas 放烟花之前的练习 动起来 1.setInterval 2.requestAnimationFrame 更像烟花一点 在任意网页上放烟花 源码下载 首先看一下效果 https...但作为前端工程师，这难不倒我们，下面就教大家如何用JS在网页里放烟花。 在 codepen 里搜索 “fireworks” 可以搜到各种使用JS完成的烟花效果。我今天分享的代码，也是参考自其中一个。...这篇文章看完，保证你在任何平台，用任何语言都可以写出来放烟花的效果。 如何实现的？...先创建一个Canvas ---- 先新建一个和网页可视区大小一样的canvas，并且通过监听显示区的resize事件，来改变canvas的大小。
「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」 ---- 本篇带来 FP 函数式编程思想在 JS【循环】中的应用。...因为对于循环来说，比如 while 结构，索引 i 是外部变量，外部变量的修改不受循环内部所控制；） 代码太长了，循环结构有可能比操作的功能代码都长； 所以，我们尝试用 FP 函数式编程思路对循环做下改造...它返回的是一个Boolean类型的值。...迭代器，它只是按顺序返回关联数组中的每个值。...数组必须完整分配，但迭代器仅在必要时使用，因此可以表示无限大小的序列，例如0和无穷大之间的整数范围。
虽然好几年前的了，那时候配色居然那么好 不过现在找不到原文件了 貌似是刚学会ajax的时候做的 右上角的刷新是真的会重新加载图片、文字的 但做出来发现并没什么卵用 然后还有模糊图片的效果，发现模糊图片只能在...img标签用 style的background并不能使用 啧啧 img标签的话按住鼠标左键是会拖动打开新标签的 不太喜欢这样所以一般都会在css设置背景 （不过css有个属性是禁止选择的=禁止拖动 我实在编不下去了...，我点了原创声明，所以要打300字+ 好的那么 再看看现在做的 ，跟○○一样（等等好像就是○○啊 ※阅读全文跳转 然后你再找找有个叫“switch 关灯工具”的东西，嘿~ 这网站我都不敢在面试的时候拿出来了...2333 虽然功能方面没什么问题 以后陆续把做的东西发上来好了 233
今天写一个代码，遇到这个情况：大的DIV嵌了一个小的DIV，大的DIV的宽度我是通过复杂的机制替换完成，现在小的div需要显示边框，但它又不能使用大的DIV的宽度和高度，必须要稍小一点（BOX模型）。...我又不想再增加处理的复杂度，尝试着用JS来完成这种关系。
只是当时我写代码的时候，没有找到纯 js 可以用的代码和库，不能打包成 chrome 扩展，用起来还是不太方便的。所以在验证了思路的可行性后，我就大致写下来，给他人以方便吧。...一、分析网页 DOM 结构，载入验证码图片。 我们可以看到，验证码的 url 是：img/0.jpg。我这里的 url 会变化，是为了模拟更换验证码的过程。...其实旋转不是必要的。没有旋转的步骤，可以用更多的数据量训练来弥补。同理，缩放也不是必须的。...先大致讲一下思路：旋转和缩放都再次利用了 canvas，将图片画上去之后，利用 canvas 的方法操作图片旋转或缩放，之后再把数据拿下来，就像我们最开始读图片时做的一样。...六、识别时，用处理后的图像与库中数据对比，取得最相近的数据，得到真实数字。 这块也比较简单。训练完成后，我将数据库数据导出，保存成了一个大的数组，直接用 js 就可以读了。
作者：Daniel 译者：前端小智 来源：js-craft JS 是一种灵活的语言，这种特性让我们经常觉得它是一门最简单的语言，也是最难掌握的语言。...我们已经知道，用变量的作用域和作用域链（即一个按顺序检索的对象列表）来进行变量名解析，而 with 语句就是用于暂修改作用域链的，其语法为： with(object) 该语句可以有效地将object添加到作用域链的头部...const book = { author: '前端小智', title: '我不知道还可以用 JS 做的 6 件事' } with(book) { console.log(author...); // 前端小智 console.log(title); // 我不知道还可以用 JS 做的 6 件事 } 使用 with语句的 JavaScript 代码很难优化，因此它的运算速度比不使用...因此，要返回实际的未定义值，请使用void运算符。它不是一个非常流行的运算符，并且很少使用。 原文：http://www.js-craft.io/blog/6...
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
