![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML-成长之路
坏丶毛病
一只努力学习的web前端小菜鸟,欢迎大家一起学习进步。
展开
-
“浮空“滚动条
前端界面布局中,滚动条是我们必不可少的东西,当我们容器不足以呈下所有内容时,需要滚动条来支撑我们查看完整的数据。当然了,简单的属性我们就不介绍了,想必大家都很了解和熟悉,我们来看个特殊的属性。场景一:定宽高的容器,不足以放下所有内容时就需要滚动条来进行扩展查看场景二:初始时容器足够放下所有内容,但是点击展开后内容过多无法呈现的情况(例如表格的扩展)这时我们会采取文本溢出呈现滚动条的情况(如纵向的滚动条:overflow-y:auto),但是滚动条出现后会挤压宽度,毕竟它自己占一部分宽度,这就会导致我原创 2020-08-06 13:09:28 · 1529 阅读 · 1 评论 -
mock.js模拟数据实现前后端分离
众所周知,在日常开发中,前后端分离是最常见的开发模式,前端完成页面渲染,后端提供接口数据。但是起初项目刚开始,后端还没有写好接口数据,前端要构建页面,还得考虑结构以及后期真实数据的问题。所以前后端统一接口数据和格式是必要的。而当统一好接口数据和格式后,前端就可以通过mock.js来模拟对应格式的数据,以此来完成页面的搭建,当后端完成接口和数据后,因为前期数据格式都是规范好的,所以只要去...原创 2019-03-25 10:15:13 · 684 阅读 · 0 评论 -
伪类复选框改变样式
大家在开发的过程中,肯定都用过复选框,那么大家有没有为了改变样式而烦恼过?这里给大家介绍特别简单的一种方式。话不多说,上代码。<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"></head><style typ...原创 2019-03-22 10:07:59 · 582 阅读 · 0 评论 -
阿里字体小图标的使用
在项目开发中,我们难免会用到一些图片之类的样式,但是图片本身体积大,而且更改样式和其他标签融合布局相对麻烦,那么有没有更好的办法呢?字体小图标解决了我们这个问题。我们这次就说说常见的阿里字体小图标的使用官网地址:阿里字体小图标官网使用步骤:进入阿里字体小图标官网,注册登录(推荐使用微博登录,懒得注册) 搜索自己想要的图标加入购物车 在右上角的购物车图标那一栏可以看见自...原创 2019-03-26 10:04:22 · 7111 阅读 · 0 评论 -
CSS实现三角形
三角形是我们在开发中常用的,比如点击展开某个树状菜单,右边本来是向右的小箭头,然后变为向下,类似的 场景很多。那么怎么简单的用css实现一个三角形呢?话不多说,上代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Documen...原创 2019-04-04 09:55:54 · 16660 阅读 · 3 评论 -
常见布局—弹性布局
在常见的布局中,通常有一部分是固定高度,而其他部分是剩余大小分配的,这种情况我们可以使用弹性布局。说到弹性布局,就得介绍一下css属性中的弹性盒——display:flex它分为主轴和交叉轴两个方向,没有固定的方向,默认主轴是X轴,交叉轴是Y轴,也可以通过属性 flex-direction: column来设置主轴为Y轴主轴是X轴,意味着它会把子元素横向排列,所有子元素都到一行,Y轴也...原创 2019-03-27 09:52:13 · 10480 阅读 · 0 评论 -
原生JS实现不固定行和列的表格
之前有个需求,就是需要一个不固定行和列的表格,第一行的所有列的标题内容,用来表示数据对象中的key,而表格中的其他行,分别显示对应key的value。起始显示一行一列的表格th,然后根据用户是否输入值,动态增加行和列,每次根据倒数第二行是否有值,以此来判断是否要新增行,每次根据倒是第二列是否有值,以此来判断是否要新增列,然后根据行和列的值是否清空,以此来判断是否要删除行和列。代码部分:...原创 2019-04-01 09:44:25 · 2084 阅读 · 2 评论 -
纯css实现上左固定,中间切换效果
接触过vue的童鞋都知道路由跳转,配置子路由实现tab选项卡效果。而常见的头部固定,左侧边栏固定,只是右侧内容变化的这种布局方式又是我们所必须的。那么脱离框架,怎么基于简单的css实现这种布局效果呢?一起来看看吧。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&...原创 2019-04-23 09:59:02 · 752 阅读 · 0 评论