摘要:
前言 原本只是想简单的聊一下代码格式化的问题,无奈本文拖沓了很久,在此期间,我又思考了很多,我越来越觉得代码格式化是一门艺术。为了衬托“艺术”二字,可能叫“代码美化”更贴切一点,但是本文的深度远没有标题那么宏大。 在我看来,代码质量不仅体现在逻辑上,也要体现在形式上。尤其前端代码,在日渐复杂的单页面 阅读全文
摘要:
实现样式: 1、鼠标移入后,鼠标样式图标变为“锤子”。 2、用户砸金蛋,锤子简单的扬起效果。 3、砸碎金蛋,显示内容。 分析实现步骤: 1、在html中插入一颗金蛋 找一张静态图片或带一点效果的动态图,直接放入img标签即可。 2、鼠标移入,改变鼠标样式图标 系统自带的鼠标样式就那几种,可以通过cs 阅读全文
摘要:
首先,为了避免与微软的 Visual Studio IDE 发生混淆,这里先说明一下,Visual Studio Code(也即 VS Code)是一款轻量级的编辑器,类似 Atom 或 Sublime Text。它的采用量节节攀升,迅速占领了开发者市场! 2015 年,微软推出了 VS Code 阅读全文
摘要:
今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。 什么是 rem 可能在你使用收音机或者用其他音乐播放器之前,就已经听过“R.E.M.”这个词了。在这个乐队眼中,这个词是“浅睡眠时眼球的快速转动”的缩写,而在 阅读全文
摘要:
前几天遇到一个页面需求是这样的: 一个评论框,后面的按钮有点赞或者发送评论两种状态,其中发送按钮有根据输入框中是否有字分为可点击和不可点击两种状态。 需求: 没有文字,没有聚焦——点赞没有文字,聚焦——灰色发送有文字——红色发送 如果用js实现,需要监听输入框的change和focus事件,比较麻烦 阅读全文
摘要:
SVG 简介 SVG,即可缩放矢量图形(Scalable Vector Graphics),是一种 XML 应用,可以以一种简洁、可移植的形式表示图形信息。目前,人们对 SVG 越来越感兴趣。大多数现代浏览器都能显示 SVG 图形,并且大多数矢量绘图软件都能导出 SVG 图形。SVG 主要可以概括为 阅读全文
摘要:
做前端最难受的就是产品给的需求以及测试给的bug了,看待这个标题是不是有点蒙,这是什么需求,下面来解读下! 需求 需求:如下图,点击已保存按钮弹出已保存列表,当点击屏幕其他区域要关闭这个下拉框,是不是很简单 加点东西,但是点击这个下拉框内部的区域不能关闭下拉框)(原谅我里面没写东西你就当有东西,给个 阅读全文
摘要:
实现一个普通边框 <style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div> 实现由四个三角形组成的正方形 <style> .triangle { 阅读全文
摘要:
根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。 本文的px转rem换算公式为: 100px = 1rem 18px = 0.18rem 基础css body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textare 阅读全文
摘要:
在css基础当中,我们往往会遇到块元素和行内元素,块元素和行内元素也是很重要的基础知识。那么块级元素是什么?html中的块级元素有哪些? 什么是块级元素? display属性为block的元素为块级元素。通常块级元素在很多浏览器中,都是显示占据一行,并且排斥其他元素和其他元素在同一行,在浏览器中,块 阅读全文