随笔分类 - html\css
摘要：在日常工作中，用户需要访问大量的信息资源，例如，用户首先要登录到操作系统中，然后进入各个应用系统。进入每一个系统都需要对用户的身份进行识别与验证，这样，用户需要提供多个用户帐号与口令，为了便于记忆，用户很可能把各种帐号与口令信息记录在笔记本上，甚至写在便条上并贴在办公桌或屏幕边，这就使口令信息很容易
阅读全文
posted @ 2020-10-19 16:45
浅笑·
摘要：第一种方式：使用H5的API dataTransfer 实现思路： 1.为将要拖拽的元素设置允许拖拽，并赋予dragstart事件将其id转换成数据保存； 2.为容器添加dragover属性添加事件阻止浏览器默认事件,允许元素放置，并赋予drop事件进行元素的放置。 代码如下： <html> <he
阅读全文
posted @ 2020-10-19 16:44
浅笑·
摘要：现在很多网站都会使用瀑布流的一个效果，什么是瀑布流呢，用在哪些地方呢？ 大概就是这样的一个效果，一般用于无法保证图片大小的网站。 先看下布局+css .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 6px} .i
阅读全文
摘要：在最近开发移动端页面，遇到这么一个情况：当页面宽度 100% 时，高度为宽度一半，并随手机宽度变化依然是一半。 于是我们就需要实现一个宽度自适应，高度为宽度一半的容器。 这里先以高度为宽度一半为例，也可以是其他任意比例。 一、思考如何实现 这个问题类似于：我们在移动端页面，上面有一张宽度 100%
阅读全文
posted @ 2020-10-19 16:42
浅笑·
摘要：这篇文章描述了我们对哈萨克斯坦政府实施的电信级HTTPS劫持的分析。 哈萨克斯坦政府最近开始使用一个假的根证书颁发机构，对包括Facebook，Twitter和Google等网站在内的HTTPS连接进行中间人（MitM）攻击，在此文中，我们给出了还在进行中的研究的初步结果，以及哈萨克劫持系统中新的技
阅读全文
posted @ 2020-10-19 16:39
浅笑·
摘要：一、居中布局 <div class="parent" style="width:300px;height:300px;"> <div class="child">居中布局</div> </div> 水平居中（宽度自适应） 1.inline-block + text-align .child{ dis
阅读全文
posted @ 2020-10-19 16:37
浅笑·
摘要：盒子模型（Box Modle）可以用来对元素进行布局，包括内边距，边框，外边距，和实际内容这几个部分。 盒子模型分为两种 第一种是W3c标准的盒子模型（标准盒模型） 、第二种IE标准的盒子模型（怪异盒模型） 当前大部分的浏览器支持的是W3c的标准盒模型，也保留了对怪异盒模型的支持，当然IE浏览器沿用
阅读全文
posted @ 2020-10-19 16:35
浅笑·
摘要：题目 10w 条记录的数组，一次性渲染到页面上，如何处理可以不冻结UI？ 具体化 页面上有个空的无序列表节点 ul ，其 id 为 list-with-big-data ，现需要往列表插入 10w 个 li ，每个列表项的文本内容可自行定义，且要求当每个 li 被单击时，通过 alert 显示列表项
阅读全文
posted @ 2020-10-19 16:30
浅笑·
摘要：实现效果 X轴Y轴在一个矩形内移动 做斜线运动 .ball { position: absolute; animation: animX 2s linear infinite alternate, animY 2s linear infinite alternate } @keyframes ani
阅读全文
posted @ 2020-10-18 14:00
浅笑·
摘要：前端到底是个啥 前端其实是个很大的范畴。我这里只针对 web 开发的前端而言（下文统称前端）。简单点说，针对浏览器的开发，浏览器呈现出来的页面就是前端。它的实质是前端代码在浏览器端被编译、运行、渲染。前端代码主要由三个部分构成：html（超文本标记语言）、css（级联样式表）、JavaScript。
阅读全文
posted @ 2020-10-18 13:59
浅笑·
摘要：玻璃窗 今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。 <div class='window'></div> .window { position: absolute; width: 100vw; height: 100vh; bac
阅读全文
posted @ 2020-10-18 13:57
浅笑·
摘要：本次分享大纲 电商案例的原因 电商网站需求 网站初级架构 系统容量估算 网站架构分析 网站架构优化 架构总结 电商网站案例，一共有三篇本篇主要说明网站的需求，网站初始架构，系统容量估算方法。 一、电商案例的原因 分布式大型网站，目前看主要有几类1.大型门户，比如网易，新浪等；2.SNS网站，比如校内
阅读全文
posted @ 2020-10-18 13:56
浅笑·
摘要：垂直居中，在 css 中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊 9 种不同的居中方法。 有常见的 flex、transform、absolute 等等。也有 css3 的网格布局。还有伪元素的方法，是的，你没有看错，::after 和 ::before 也可以实现居中
阅读全文
posted @ 2020-10-18 13:54
浅笑·
摘要：一：鼠标尺寸类样式 都要事件对象的配合 Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素的各项尺寸时Height,Width 1：检测相对于浏览器的位置:event.clientX/event.clientY client:整个浏览器的可视区域,当点击鼠标的时候，鼠标事件发
阅读全文
posted @ 2020-10-18 13:53
浅笑·
摘要：web性能优化，主要分为前端和后台两个部分性能优化，后台性能优化决定了web能不能用，前端优化决定了其好不好用，也就是牵涉到前端用户体验和web易用性等情况，所以前端性能与用户体验是有着极大的关联的。 首先，前端优化之前，我们需要知道其整体性能情况，然后对整体情况进行细分与分析，了解其每一步所损耗的
阅读全文
posted @ 2020-10-18 13:52
浅笑·
摘要：前端 css 库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。 为什么要使用 css 库，而不选择自定义 CSS？简而言之，时间是一种宝贵的
阅读全文
posted @ 2020-10-18 13:49
浅笑·
摘要：所周知，要保护一个页面，最基础的就是要屏蔽右键。而现在网页上用得最多的是function click()，即下面这段代码： 〈script〉 function click(){ if(event.button==2){ alert( ‘本网页欢迎您 !!‘); } } document.onmous
阅读全文
posted @ 2020-10-18 13:48
浅笑·
摘要：一份来自 Akamai 的研究报告显示，在对 1048 名网购户进行采访后发现： 约 47% 的用户期望他们的页面在两秒之内加载完成。 如果页面加载时间超过 3s，约 40% 的用户会选择离开或关闭页面。 一直以来，为了提升用户在页面加载时的体验，无论是 Web 还是 iOS、Android 的应用
阅读全文
posted @ 2020-10-18 13:42
浅笑·
摘要：web前端开发技术人才越来越吃香，而且web前端领域划分越来越细，对技术的需求越来越高，想学习web前端的人也是越来越多。那么，如何学习web前端知识？从哪开始？转型成为web前端工程师需要学些什么？小白到高手需要多久？ 1、转型web前端需要学什么 第一阶段：你要从最基础的html/css开始，简
阅读全文
posted @ 2020-10-18 13:40
浅笑·
摘要：SVG：可伸缩的矢量图形 SVG本身是基于 XML 的一种独立的数据格式，用于声明式的 2D 矢量图形。但是，它也可以嵌入到 html 文档中，这是所有主流浏览器都支持的。 让我们考虑一个例子，如何使用 SVG 绘制一个可调整大小的圆： <html style="height: 100%; widt
阅读全文
posted @ 2020-10-18 13:39
浅笑·
浙公网安备 33010602011771号