随笔分类 - html\css
摘要：1 什么是css？ css通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置html页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS以html为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不
阅读全文
posted @ 2020-11-26 12:58
浅笑·
摘要：前提：有时候在项目中会有用到进度条的情况，使用css3也可以实现，但是对于性能不好的设备，或者网络不好的情况下，卡顿现象非常明显，避免出现不流畅的尴尬情况，所以记录一下，使用canvas来实现的方法。 效果图： DOM中，首先定义canvas画板元素： <canvas id="canvas" wid
阅读全文
posted @ 2020-11-26 12:56
浅笑·
摘要：css3新增属性rgba和opacity:(0~1); 在ie8下无法使用Alpha(opacity=[0~100]);//[0~100] 0是透明 100是不透明。 IE下的透明度属性，子元素会继承这个透明度。下面有阻断子元素继承方法。 背景透明，文字不透明。 <!DOCTYPE html><ht
阅读全文
posted @ 2020-11-26 12:55
浅笑·
摘要：Hash hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）,在页面中的hash有多种功能意义: 锚点 url: http://www.example.com/index.html#jump dom: <a name="jump"></a> 或者 <div i
阅读全文
posted @ 2020-11-26 12:53
浅笑·
摘要：在这篇文章中，我们将使用:placeholder-shown伪类创建一个浮动的问题标签效果，使用纯css实现。 浮动的文字标签 当我们处理输入框时，会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的： label标签是关联表单元素，提供说明信息最适合的元素。 输入框的placehold
阅读全文
posted @ 2020-11-26 12:51
浅笑·
摘要：需求效果： 原理：拖动效果的实现基本都是dom操作来实现的，通过拖动分隔线，计算分隔线与浏览器边框的距离(left)，来实现拖动之后的不同宽度的计算；当拖动分隔线1时，计算元素框left和mid；当拖动分隔线2时，计算元素框mid和right；同时设置元素框最小值以防止元素框拖没了（其实是被遮住了）
阅读全文
posted @ 2020-11-26 12:49
浅笑·
摘要：在我们平时练习或者实际项目中也好，我们常常遇到这么一个需求：移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言，这是一个很简单的需求，而且市面上有很多开源的组件库就可以实现，像比如说：cube-ui等！那么对于一个要是还在练习
阅读全文
posted @ 2020-11-26 12:48
浅笑·
摘要：1. 基于server端session的管理 在早期web应用中，通常使用服务端session来管理用户的会话。快速了解服务端session: 1) 服务端session是用户第一次访问应用时，服务器就会创建的对象，代表用户的一次会话过程，可以用来存放数据。服务器为每一个session都分配一个唯一
阅读全文
posted @ 2020-11-26 12:47
浅笑·
摘要：一、Web应用 1、什么是Web应用？Web应用程序是一种可以通过Web访问的应用程序，特点是用户很容易访问，只需要有浏览器即可，不需要安装其他软件。 2、Web应用程序的模式 应用程序有两种模式，即C/S、B/S两种，C/S是客户端/服务器端程序，这类程序一般独立运行；而B/S就是浏览器端/服务器
阅读全文
posted @ 2020-11-26 12:46
浅笑·
摘要：随着技术的发展、用户量的增加、客户端种类变多，每一个小小的细节都需要优化和考虑。在海量的访问量面前，也许改变一个按钮的位置和颜色就能影响上千万次的用户体验。如今的互联网产品已不是以一己之力就可以完成的乐高积木了，Web开发需要以某种可控的方式来管理。于是，所有认真对待互联网产品的大公司都引入了流水线
阅读全文
posted @ 2020-11-26 12:45
浅笑·
摘要：预测未来并非易事。在预测社会现象的未来趋势时，我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象。 在收集数据和观察趋势时，人们总会忽略一些不显眼的事实、一些难以观察到的趋势，反而很可能收集到一些本应无视的数据。话虽如此，但设法做出一些合理的预测总比完全不管不问、假装未来
阅读全文
posted @ 2020-11-25 13:55
浅笑·
摘要：一、背景 随着公司业务的拓展，随之而来就是各种系统横向和纵向的增加，PV、UV也都随之增加，原有的系统架构和模式慢慢遇上了瓶颈，需要逐步的对系统从整体上进行改造升级，通过一段时间的整理思路，做一个简单的总结与分享。同时由于能力等方面的不足，如果有什么说的不好之处，还请各位大神多多指点。 二、整体思路
阅读全文
posted @ 2020-11-25 13:54
浅笑·
摘要：在html5中，CanvasRenderingContext2D对象也提供了专门用于绘制圆形或弧线的方法，请参考以下属性和方法介绍： arc(x, y, radius, startRad, endRad, anticlockwise) 在canvas画布上绘制以坐标点 (x,y)为圆心、半径为 ra
阅读全文
posted @ 2020-11-25 13:53
浅笑·
摘要：背景 在回家的地铁上使用自家应用H5相关功能时，可能由于网络原因导致体验较差，在使用微信、今日头条App时，感觉很流畅，基本做到了秒开，然后就想了解下业内H5秒开方案。 问题原因 文件下载耗时：包括html、css、js、图片等 页面渲染耗时：页面渲染，解析js、css文件等 WebView创建耗时
阅读全文
posted @ 2020-11-25 13:51
浅笑·
摘要：媒体查询 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自css3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。 基本使用 具体的使用方式是 <!-- link元素中的css媒体查询 --> <
阅读全文
posted @ 2020-11-25 13:49
浅笑·
摘要：css 指层叠样式表 (Cascading Style Sheets)，定义如何显示 html 元素，但由于 css 天生全局性，随着项目复杂度增加，极易出现样式覆盖以及其它的问题。 1. 通用规范 文件编码 为了避免内容乱码，统一使用 UTF-8 编码保存。 样式文件第一行设置字符集为 UTF-8
阅读全文
posted @ 2020-11-25 13:48
浅笑·
摘要：在初始页面加载问题之外，“布局颠簸”是我在动态Web应用程序中看到的最常见的性能问题。 对于单页应用程序尤其如此，它可以动态构建和销毁视图。 但是，我常常对我遇到的Web开发人员的数量感到惊讶，他们不知道导致浏览器做不必要的布局的模式（在Mozilla社区中也称为“重排”）。 如果您使用WebKit
阅读全文
posted @ 2020-11-25 13:47
浅笑·
摘要：标签的类型(显示模式) html标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。 一、块级元素(block-level) 每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有<h1>~<h6>、<p>、<div>
阅读全文
posted @ 2020-11-25 13:46
浅笑·
摘要：在做上传文件的时候，大家会引入input标签。但在实现的过程中，在上传一个文件后，第二次上传同一个文件时会无法触发上传的代码，问题其实这样解决。 <input type="file" ref="referenceUpload" @change="onUpload" style="width: 78p
阅读全文
posted @ 2020-11-25 13:45
浅笑·
摘要：通过<input id="input" type="file" onchange="changeFile()"> 中的change事件 拿到的file不能直接在本地预览选择的图片或者视频，可以通过以下两种方式预览本地图片，不用上传到服务器就可以本地预览。 createObjectURL 这种方式生成
阅读全文
posted @ 2020-11-25 13:44
浅笑·
浙公网安备 33010602011771号