随笔分类 - html/css
摘要：本文以react为例。 用css变量来切换黑暗模式，易于维护和扩展。 css变量的用法： .selector { --black-color: #282c34; } :root { --black-color: #282c34; } 方案一 设置主题对应的CSS变量，切换主题只需切换css属性的变量
阅读全文
posted @ 2020-10-14 15:45
笑人
摘要：响应式布局 一个网站能够兼容多个终端，并且在各个终端都可以很好展示体验。 媒体类型 在何种设备或者软件上将页面打开 all：所有媒体 braille：盲文触觉设备 embossed：盲文打印机 print：手持设备 projection：打印机预览 screen：彩屏设备 speech：'听觉'类似
阅读全文
posted @ 2020-10-14 15:43
笑人
摘要：准备工作 安装 webpack： npm init -y npm i -D webpack webpack-cli css-loader 创建 webpack.config.js 进行配置： const path = require('path'); const MinicssExtractPlug
阅读全文
posted @ 2020-10-14 15:42
笑人
摘要：css实现底部对齐效果 因公司业务要求需要实现如下图中红色区域的效果： 效果说明： 1、红色区域数据需要倒排（即从底部开始数，数字为1、2、3、4、5），并且显示在最底部 2、当数据过多时需要显示滚动条，**并且滚动条需要拉到最底部** 3、数据从websocket中推送过来，推送间隔为几十毫秒 4
阅读全文
posted @ 2020-10-14 15:41
笑人
摘要：如今，随着各种新趋势的层出不穷，Web和移动领域的创新不仅改变了人们、乃至整个社会的日常行为习惯、以及业务处理方式，而且也使得开发人员能够轻松、且高效地创建出各种实用的解决方案。 我们作为业内人员显然需要通过不断的学习来保持知识的储备，熟悉各种新的趋势，并在竞争中站稳脚跟。下面，我们来一起讨论那些本
阅读全文
posted @ 2020-10-14 15:38
笑人
摘要：一、float介绍 float元素也称为浮动元素，设置了float属性的元素会根据属性值向左或向右浮动。浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。简单来说，就是让block元素无视float元素，让inline元素让流水一样围绕着float元素来实现浮
阅读全文
posted @ 2020-10-14 15:37
笑人
摘要：开发人员需要做的决策有很多。当 Web 应用程序的需求确定下来之后，就该选择效率最高的 Web 技术栈了。Web 技术栈是用于创建 Web 应用程序的技术工具集。一套 Web 技术栈由 OS（操作系统）、Web 服务器、数据库软件以及编程语言（通常前端和后端都需要自己的语言）组成。一些常见的编程语言
阅读全文
posted @ 2020-10-14 15:35
笑人
摘要：1、第一种写法： <a href="JavaScript:js_method();">This is Test</a> 这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且JavaScript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeun
阅读全文
posted @ 2020-10-14 15:34
笑人
摘要：学习前端第一步：划分网页结构，网页的结构的划分应该遵循哪些原则，如何去划分网页的结构呢？ 对于一个前端初学者，第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图，你需要根据这张图做出一个符合标准的页面，这里所说的标准，即w3c标准，参考w3school在线教程。那么做出一个完整的符合标
阅读全文
posted @ 2020-10-14 15:32
笑人
摘要：在每个Web应用程序中，作为用户直接可见的应用程序外观，“前端”包括：图形化的用户界面、相应的功能、及其整体站点的可用性。我们可以毫不夸张地说：如果前端无法正常工作，您将无法“拉新”网站的潜在用户。这也正是我们需要对Web应用执行前端测试的重要原因。 为了确保Web应用无论发生了何种变更之后，其对应
阅读全文
posted @ 2020-10-14 15:31
笑人
摘要：最近接的新项目，登录注册页根据需求要使用手机号获取验证码登录或者注册，一开始的想法是要做6个inputshur输入框，但是光标问题太严重。在网上看别人的实现方法，发现可以用一个input+6个span或者6个div来做，经过构思，实现了以下的方法。 代码 html： <div class="pc_i
阅读全文
posted @ 2020-10-14 15:29
笑人
摘要：元素的显示与隐藏 在css中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩
阅读全文
posted @ 2020-10-14 15:28
笑人
摘要：最开始的网站架构 最初业务量不大，访问量小，此时的架构，应用程序、数据库、文件都部署在一台服务器上，有些甚至仅仅是租用主机空间 1. 应用、数据、文件分离 将应用程序、数据库、文件各自部署在独立的服务器上，并且根据服务器的用途配置不同的硬件，达到最佳的性能效果。 2. 利用缓存改善网站性能 大部分网
阅读全文
posted @ 2020-10-14 15:27
笑人
摘要：1. 页面适配 这一点不能算是建议，应该说是解决方案。 最近查了好多关于移动端适配的资料，把人都看懵了，收获了以下名词 css像素、物理像素、逻辑像素、设备像素比、PPI、DPI、DPR、DIP、Viewport 说实话，我一点都不想了解这些名词到底有着什么样的解释，只想知道怎么让开发的页面能适配不
阅读全文
posted @ 2020-10-13 14:57
笑人
摘要：网站的设计是吸引客户的非常重要的因素。如今，互联网上存在着很多竞争，每个人都可以点击其客户，但是只有少数人能吸引他们。这通常是由于网站给人的第一印象。 如今，最常见的方法是访问Internet查找产品或服务，搜索引擎在每次搜索中显示成千上万的结果，这就是第一印象发挥作用的地方。几秒钟内，客户可以选择
阅读全文
posted @ 2020-10-13 14:56
笑人
摘要：那一年，我所在公司的用户量达到了公司成立以来的新高峰，经过多个程序员日日夜夜加班，每个业务系统达到了几乎四个 9 的稳定性，同时业务在业界也有了一定的知名度。 PS：以下业务场景只针对于 Web 系统，而且 Web 页面有后台服务程序的场景。 那一天突然有一个合作商登门拜访，提出合作共赢的意向。业务
阅读全文
posted @ 2020-10-13 14:54
笑人
摘要：Sass 使 css代码保持DRY（也就是不要重复），编写代码的一种方式是将相关的代码保存在单独的文件中，我们可以创建带有css片段的小文件，以包含在其他Sass文件中，比如：重置文件、变量、颜色、字体或者是字体大小等等。 导入文件 与CSS一样，Sass也支持 @import 指令，它允许我们将一
阅读全文
posted @ 2020-10-13 14:53
笑人
摘要：介绍 Dojo 是基于 html 的技术，使用 css 为框架中的元素和用它开发的应用程序设置样式。 Dojo 鼓励将结构样式封装在各部件中，以便最大限度复用；同时将外观主题设置到应用程序所有部件上。用户为他们的应用程序设置样式和主题时，这种模式提供了固定的套路，即使混合使用 Dojo 的 @doj
阅读全文
posted @ 2020-10-13 14:49
笑人
摘要：前端页面的成功呈现，不仅要求在理想情况下没问题，当一些后台接口访问异常、静态文件获取失败时，仍然需要尽可能提供降级方案或给用户良好的反馈，不至于整个页面的奔溃。今天我将分享一些提高页面健壮性的技巧。 异常处理 主要指数据类型。这种情况最常出现在读取后台数据的时候，尤其是需要取数组、对象等引用类型时，
阅读全文
posted @ 2020-10-13 14:47
笑人
摘要：Web应用安全测试可对Web应用程序执行功能测试，找到尽可能多的安全问题，大大降低黑客入侵几率。 在研究并推荐一些优秀的开源Web应用安全测试工具之前，让我们首先了解一下安全测试的定义、功用和价值。 安全测试的定义 安全测试可以提高信息系统中的数据安全性，防止未经批准的用户访问。在Web应用安全范畴
阅读全文
posted @ 2020-10-13 14:46
笑人
浙公网安备 33010602011771号