随笔分类 - CSS
摘要：一、注释 在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
前端一点红
摘要：如果你想在网页的某些文字前加图标或者想改变li元素默认的图标，你会如何做？常见的做法是在文字前再加一个标签用于存放图标，引入一个图标库（比如Iconfont-阿里巴巴矢量图标库）或者一张图标图片。 本文价绍一种不用再额外添加html标签，存粹利用css就能插入或者自作图标的方式。先了解伪元素：bef
阅读全文
posted @ 2020-07-09 22:39
前端一点红
摘要：一、css继承性 子元素可以直接使用父元素中的一些样式（特征），这个我们就称之为继承性。继承性一般用于设置网页上的公共信息，例如网页文字颜色、字体以及大小等。 注意点： 并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承 在css的继承中不仅仅是儿
阅读全文
posted @ 2020-07-09 22:36
前端一点红
摘要：关于css的恶作剧 相信你看完以下代码后能够预料到会出现什么效果。 *{ cursor: none!important; } 简单的文字模糊效果 以下两行简单的css3代码可达到将文字模糊化处理的目的，出来的效果有点像使用PS的滤镜，so cool! p { color: transparent;
阅读全文
posted @ 2020-07-06 23:56
前端一点红
摘要：基于实现元素的展开收缩，通常的想法是通过控制display的元素属性和none之间的切换，虽然说功能可以实现，但是这种展开是没有任何动画的效果，只是单纯的显示与隐藏。例外一种方法就是通过JQuery的slideUp()、slideDown()方法，这是jQuery带有的功能属性，大家都应该很清楚，在
阅读全文
posted @ 2020-07-06 23:29
前端一点红
摘要：需求如下： 前端需要显示矩形的缩略图，接口返回的图片尺寸大小不一，宽高不相等，需要前端来处理并显示成正方形，类似微信朋友圈图片的效果，等比例正方形显示在列表中，让图片根据宽高来自适应显示在页面上。那么使用纯css该如何实现不定宽高的图片居中裁剪呢？ mate标签： <meta name="viewp
阅读全文
posted @ 2020-07-06 23:25
前端一点红
摘要：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
前端一点红
摘要：extarea称文本域【文本区】，即有滚动条的多行文本输入控件，在网页的提交表单中经常用到。textarea有maxlength属性，但是textarea不兼容ie8/9。如何实现textarea输入框限制字数长度的兼容问题呢？ 通常的做法就是使用JavaScript脚本语言来实现对textarea
阅读全文
posted @ 2020-07-05 22:20
前端一点红
摘要：有些人写页面会走向一个极端，几乎页面所有的标签都用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
前端一点红
浙公网安备 33010602011771号