随笔分类 - HTML
摘要：做前端多年，虽然不是经常需要hack，但是我们经常会遇到各浏览器表现不一致的情况。基于此，某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现。我个人是不太推荐使用hack的，要知道一名好的前端，要尽可能不使用hack的情况下实现需求，做到较好的用户体验。 可是啊，现实太残酷，浏览
阅读全文
posted @ 2020-07-16 16:37
前端一点红
摘要：动态生成html元素的方法有三种： 第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>
阅读全文
posted @ 2020-07-16 16:25
前端一点红
摘要：box-sizing用于更改用于计算元素宽度和高度的默认的 css 盒子模型。它有content-box、border-box和inherit三种取值。inherit指的是从父元素继承box-sizing表现形式，不再冗赘。 1. 属性讲解 content-box 默认值，也是css2.1中的盒子模
阅读全文
posted @ 2020-07-16 16:22
前端一点红
摘要：说到Tab切换，你可能首先想到的就是使用jQuery，短短几行代码就可以轻松搞定一个Tab切换。而今天所要分享的，是使用 0 行js代码来实现Tab切换！ 方法一：模拟单选框原理 该方法大致原理如下：当用户点击label元素时，该label所绑定的input单选框就会被选中，同时通过使用css选择器
阅读全文
posted @ 2020-07-16 16:19
前端一点红
摘要：在移动端部分浏览器中点击了图片，变成了查看图片的效果，怎么防止img的图片被手机浏览器的图片查看器打开呢？下面整理了一些方法来实现。 1、1.在img元素上添加 onclick="return false" <img src="./img/tip.png" onclick="return false
阅读全文
posted @ 2020-07-16 16:10
前端一点红
摘要：需求 textarea默认的高度不是对着内容变化，而是随着内容增多，出现了滚动条。目前的需求是实现一个能够输入的textarea，并且高度跟着内容变化。 发现了一个比较好用的插件flexText，但是这个基于jquery写的，目前的技术栈是react，所以简单看了下，然后用原生的js模拟了一个实现。
阅读全文
posted @ 2020-07-16 15:54
前端一点红
摘要：1.不要让你的代码脱离你的掌控，尽量简洁 别让你的代码脱离你的掌控 这是编程的一种通用建议，不仅仅适合css. 当你开始写代码的时候，先思考，思考以下几个问题： 我怎样实现？ 有其他方法实现么？ 怎样优化（简洁，可维护，等等）？ 急于编码会浪费时间，你有可能花了一个小时也没实现，不得不从头再来，这不
阅读全文
posted @ 2020-07-16 15:53
前端一点红
摘要：网络加载类 减少 HTTP 资源请求次数 合并静态资源图片、JavaScript 或 css 代码，减少页面请求数和资源请求消耗 避免重复的资源，防止增加多余请求 减小 HTTP 请求大小 减少没必要的图片、JavaScript、css 及 html 代码 对文件进行压缩优化 使用 gzip 等方式
阅读全文
posted @ 2020-07-16 15:45
前端一点红
摘要：使用 css 让元素不可见的方法很多，剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见，但背后却在多个维度上都有差别。 元素不可见，同时不占据空间、辅助设备无法访问、不渲染 使用 script 标签隐。例如： <script type="text/html"> <img src="1
阅读全文
posted @ 2020-07-16 15:41
前端一点红
摘要：一、注释 在html中还有一种特殊的标签——注释标签。如果需要在html文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。 注释内容不会显示在浏览器窗口中，但是作为html文档内容的一部分，也会被下载到用户的计算机上，查看源代码时就可以看到。 语法： <!-- 注释语
阅读全文
posted @ 2020-07-16 15:39
前端一点红
摘要：需求： 需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下： 这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： <div class="box"> <div class="roll">滚动区域</div> <footer
阅读全文
posted @ 2020-07-16 15:35
前端一点红
摘要：需求： 需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下： 这篇文章主要讲解三种实现方案，包括：fixed,absolute,以及css3的flex布局。 html结构如下： <div class="box"> <div class="roll">滚动区域</div> <footer
阅读全文
posted @ 2020-07-10 00:01
前端一点红
摘要：创建剪切动画 对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。 .animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip
阅读全文
posted @ 2020-07-09 23:50
前端一点红
摘要：一、 web1.0时代的网页制作 网页制作是web1.0时代的产物，那个时候的网页主要是静态网页，所谓的静态网页就是没有与用户进行交互而仅仅供读者浏览的网页，我们当时称为“牛皮癣”网页。 例如一篇QQ日志、一篇博文等展示性文章。在web1.0时代，用户能做的唯一事情就是浏览这个网站的文字图片内容，这
阅读全文
posted @ 2020-07-09 23:41
前端一点红
摘要：整理提供最新的各种免费jsON接口，其中有部分需要用jsONP调用。方面前端同学的学习或在网站中的使用 电商接口 淘宝商品搜索建议: http://suggest.taobao.com/sug?code=utf-8&q=商品关键字&callback=cb 用例 ps:callback是回调函数设定
阅读全文
posted @ 2020-07-09 22:43
前端一点红
摘要：如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。 本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。先了解伪元素：bef
阅读全文
posted @ 2020-07-09 22:39
前端一点红
摘要：一、css继承性 子元素可以直接使用父元素中的一些样式（特征），这个我们就称之为继承性。继承性一般用于设置网页上的公共信息，例如网页文字颜色、字体以及大小等。 注意点： 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 在css的继承中不仅仅是儿
阅读全文
posted @ 2020-07-09 22:36
前端一点红
摘要：这是一篇关于前端的技巧使用，或许你做前端很多年了，但是下面的这些你可能闻所未闻。现在这里给大家整理出来，分享给前端的小伙伴们。 浏览器URL地址栏运行html代码 在非IE内核的浏览器地址栏可以直接运行html代码！ 代码如下： data:text/html,<h1>Hello, world!</h
阅读全文
posted @ 2020-07-07 00:01
前端一点红
摘要：基于实现元素的展开收缩，通常的想法是通过控制display的元素属性和none之间的切换，虽然说功能可以实现，但是这种展开是没有任何动画的效果，只是单纯的显示与隐藏。例外一种方法就是通过JQuery的slideUp()、slideDown()方法，这是jQuery带有的功能属性，大家都应该很清楚，在
阅读全文
posted @ 2020-07-06 23:29
前端一点红
摘要：需求如下： 前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果，等比例正方形显示在列表中，让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？ mate标签： <meta name="viewp
阅读全文
posted @ 2020-07-06 23:25
前端一点红
浙公网安备 33010602011771号