随笔分类 - HTML
摘要：0.引言 在我们编写css的时候，经常会用到百分比赋值（%）实现自适应。像我们最常使用的流式布局设计模式，基本所有的column的宽度都是通过%来取值的。或者比如经常会遇到的元素水平垂直居中问题，我们常常会使用下面这样的css代码加以实现（absolute+transform思路）： .wrap {
阅读全文
posted @ 2020-07-06 23:19
前端一点红
摘要：使用css画三角形，首先想到的思路是：利用border边框样式来实现，这是由于border的边框是由四个三角形组成的。 首先生成一个带边框宽高为0的div： <style> .dom{ width: 0px; height: 0px; border-width: 50px; border-style
阅读全文
posted @ 2020-07-06 23:14
前端一点红
摘要：一个元素不设置高度时，height的默认值是 auto，浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 css3动画呢？在MDN文档中css 支持动画的属性中的 height 属性如下 ：当 height 的值是 length，百分比或 calc() 时支持 css3
阅读全文
posted @ 2020-07-05 23:18
前端一点红
摘要：增强现实（以下简称 AR）浪潮正滚滚而来，Web 浏览器作为人们最唾手可得的人机交互终端，正在大力发展 AR 技术。很多 Web 前端工程师也在寻求职业转型，于是我把我近半年的相关调研结果在此汇结成文。本文力求把目前前端方向的 AR 技术都罗列一遍，细节不赘述（保证文章篇幅不过长），只做概括和科普（
阅读全文
posted @ 2020-07-05 22:23
前端一点红
摘要：电商m站的首页，有一个需求是配一张大的banner图，然后指定某些区域是热区，点击之后跳转到不同的活动页。听起来简单明了，实现也比较容易，立刻就想起来有个map标签，简直就是为这个需求量身定做。 简单说下做法：我们首先会和后台约定一些规则，定义一个json对象。比如： { type: 1, widt
阅读全文
posted @ 2020-07-05 21:26
前端一点红
摘要：1、防止手机中网页放大和缩小，这点是最基本的，最为手机网站开发者来说应该都知道的，就是设置meta中的viewport 使用viewport使页面禁止缩放。 通常把user-scalable设置为0来关闭用户对页面视图缩放的行为。 <meta name="viewport" content="wid
阅读全文
posted @ 2020-07-05 21:01
前端一点红
摘要：有些人写页面会走向一个极端，几乎页面所有的标签都用div，究其原因，用div有很多好处，一个是div没有默认样式，不会有margin、background等初始化设置，另外可能会觉得不用div还能用啥。所以看他的页面，一展开是div，再展开还是div，展开四、五层都是div。 这样对用户来说虽然没什
阅读全文
posted @ 2020-07-05 20:54
前端一点红
摘要：在做自适应网页的时候，如果在图片中使用了热区map。图片可以通过样式实现：图片大小随页面变化，但是MAP中每个area的坐标并不能通过css直接实现自适应。这篇文章就介绍通过原生js来实现：MAP中每个area的坐标也随页面等比例的变化效果。 map area 热区自适应的实现代码 html: <s
阅读全文
posted @ 2020-07-05 20:33
前端一点红
摘要：css3的渐变可以使用2个或者多个指定的颜色之间显示平稳的过渡的效果。这篇文章主要介绍下css3实现背景颜色渐变，文字颜色渐变，边框颜色渐变的方法，以便大家学习参考！ 1、css背景颜色渐变 代码： <style> .content_bg{ width:600px;max-width: 100%;m
阅读全文
posted @ 2020-07-05 20:30
前端一点红
摘要：这篇文章主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项。 1、用canvas、css3、jquery制作动画 Canvas 优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存
阅读全文
posted @ 2020-07-05 00:16
前端一点红
摘要：创建剪切动画 对于剪切动画，使用clip-path代替width/height，避免DOM重排导致性能过低。 .animate { width: 200px; height: 200px; background: #000; animation: 1s clip; } @keyframes clip
阅读全文
posted @ 2020-07-05 00:06
前端一点红
摘要：前言 通常我们在设置链接的一些伪类（link，visited，hover，active）样式时，要让不同的状态显示正确的样式，我们需要按一定的顺序设置这些伪类的样式。这里我就按css2规范中推荐的顺序进行介绍，即 link-visited-hover-active，可记为 LoVe-HAte 。 要
阅读全文
posted @ 2020-07-04 23:23
前端一点红
摘要：<base>的定义、作用 1. 定义：<base> 标签是 html 语言中的基准网址标记，是一个单标签。 2. 作用：规定页面上所有链接的默认 URL 和默认目标。 例如： <!DOCTYPE html> <html lang="en"> <head> <title>base</title> <m
阅读全文
posted @ 2020-07-04 23:16
前端一点红
摘要：前言 这个需求如题，大体上是将文章的评论数据，在文章的首图上面以弹幕的形式出现。当时在做这个需求的时候，花了挺多精力的，踩了很多坑，现将弹幕的实现思路写出来，如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 实现效果： 实现原理： 实现弹幕的原理，并不算太复杂，耗费一些时间，怼
阅读全文
posted @ 2020-07-04 21:57
前端一点红
摘要：css圣杯布局思路： 外面一个大div,里面三个小div(都是浮动)。实现左右两栏宽度固定，中间宽度自适应。中间栏优先渲染。 css圣杯布局的实现： 在这里，实现了左(200px) 右(220px) 宽度固定，中间自适应，container部分高度保持一致。 html代码中，middle部分首先要放
阅读全文
posted @ 2020-07-04 20:44
前端一点红
摘要：一、功能测试 1.1链接测试 链接是web应用系统的一个很重要的特征，主要是用于页面之间切换跳转，指导用户去一些不知道地址的页面的主要手段，链接测试一般关注三点： 1）链接是否按照既定指示那样，确实链接到了该链接的界面 2）测试该链接所链接的页面是否真的存在 3）保证系统中没有单独存在的页面（即没有
阅读全文
posted @ 2020-07-04 19:05
前端一点红
摘要：Sass是世界上最成熟、稳定和强大的专业级css扩展语言 ,除了Sass是css的一种预处理器语言,类似的语言还有Less,Stylus等。 这篇文章关于Sass快速入门学习笔记。 资源网站大全 https://55wd.com 1. 使用变量; Sass 让人们受益的一个重要特性就是它为css引入
阅读全文
posted @ 2020-07-04 19:04
前端一点红
摘要：浏览器解析HTML文档生成DOM树的过程,以下是一段HTML代码，以此为例来分析解析HTML文档的原理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="script.js"></script> <
阅读全文
posted @ 2020-07-04 00:02
前端一点红
摘要：前言 input是我们接受来自用户的数据常用标签，在前端开发中，相信每个人都会用到这个标签，所以在开发过程中也时候也会遇到一些问题，本文的内容是我在跟input相爱相杀过程中产生的，在此记录分享一下。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。 本文内容包括： 移动端底部i
阅读全文
posted @ 2020-07-03 23:54
前端一点红
摘要：每一个网页或者说是web页都有其固定的后缀名，不同的后缀名对应着不同的文件格式和不同的规则、协议、用法，最常见的web页的后缀名是.html和.htm，但这只是web页最基本的两种文件格式，今天我们来介绍一下web页的其它一些文件格式。 首先介绍一下html与htm 关于HTML，HTML(Hype
阅读全文
posted @ 2020-07-03 23:42
前端一点红
浙公网安备 33010602011771号