前端学习笔记
文章平均质量分 57
前端学习笔记,逐步记录学习进程
做想做的,
成年人的世界并没有太多的迂回,证明自己最好的方式,就是行动。
展开
-
el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制
el-input 限制 只能输入数字,数字大小,长度,小数点后位数以及字母e的限制通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。通常情况下在使用elementUI前端框架的时候,经常会遇到表单要限制输入内容,尤其是数字。话不多说,代码如下: <el-input v-model="form.plan" type="number" step="0.5" min="0" max="5" @原创 2020-12-16 12:13:24 · 23304 阅读 · 0 评论 -
实现iframe内嵌页面百分百宽高
第一种 iframe { /*转换为块级元素*/ display: block; /*背景色*/ background: #000; /*重置默认边框*/ border: none; height: 100vh; width: 100vw; }此文章是我开发过程的一个记录,方便我日后学习和复盘。若能帮到你不胜荣幸。...原创 2021-07-08 10:28:01 · 586 阅读 · 0 评论 -
vue中父子页面互相传值问题
先看第一个父传子父组件页面代码<template> <div @click="tabChange">打开弹框</div> <el-dialog :title="dialogTitle" :visible.sync="tabVisible1" width="90%"> <subPage1 :visible="tabVisible1" :toSonData="toSon原创 2021-06-03 10:24:35 · 1132 阅读 · 1 评论 -
element-ui中 根据table表格中单元格的值设置不同的td背景颜色
需求:根据数值大小展示对应的背景色,比如 基本数值:绿色记20分,黄色记10分,红色记5分。总计数值 绿色:80<分数≤100,黄色:60≤分数≤80,红色:25≤分数<60。效果图如下页面代码 <!--表头添加属性 :cell-style--> <el-table :data="tableData" border size="mini" :cell-style="addClass" > <!--列字段不做改变 只添加 prop属性 设定 label --&原创 2021-06-02 09:24:42 · 3031 阅读 · 1 评论 -
CSS3的新特性-学习笔记
现状:CSS3特性有兼容性问题,IE9以上,移动端;CSS3新增选择器,可以更加便捷,更加自由的选择目标元素1. 属性选择器可以根据特定元素的属性来选择元素,这样就可以不用借助类选择器或者id选择器。第一种<style>/*第一种*/ /*首先选择div 然后具有value属性的元素*/input[value]{ color:red}</style><!--1. 利用属性选择器可以不用借助类或者id选择器--><input.原创 2021-03-21 04:13:30 · 221 阅读 · 0 评论 -
CSS初始化-学习笔记
不同浏览器对有些标签的默认值是不同的,为了消除浏览器对HTML文本呈现的差异,照顾浏览器的兼容性,我们需要对CSS进行初始化。简单理解:CSS初始化是指重设浏览器的样式(CSS reset)。每个网页都必须先进行CSS初始化。<style> /*把所有标签的内外边距清零*/ *{ margin: 0; padding: 0; } /*把 斜体 不倾斜*/ em , i { font-s.原创 2021-03-20 13:31:38 · 72 阅读 · 0 评论 -
CSS实现直角三角形
如图:这个盒子的样式该如何实现:盒子只有矩形,圆形,三角形,那梯形如何画出来的呢,即通过一个浮动的直角三角形+矩形,就可以形成梯形这种效果了。理论:直角三角形,把左边和下边的边框宽度设置为0,把上边框宽度调大,即可得到CSS代码如下/*代码简写如下*/.box{ width: 0; height: 0; /*边框颜色*/ border-color: transparent skyblue transparent transparent; /*边框样式*/ border-sty..原创 2021-03-20 12:39:22 · 1879 阅读 · 2 评论 -
CSS-实现元素的显示和隐藏--鼠标样式
定义:让一个元素在页面中隐藏或者显示出来1. display 属性display:block 把元素转成块级元素、显示元素display:inline把元素转成行内元素display:none 隐藏对象并且不保留元素位置2. visibility 可见性visibilty:inherit [默认]集成上一个父对象的可见性,(父可见,子就可见。父不可见,子也不可见)visibilty:visible 对象可见visibilty:hidden 对象隐藏,但是位置保留想要隐藏元素.原创 2021-03-18 12:43:01 · 302 阅读 · 0 评论 -
网页布局总结
大部分的html页面标签是一个盒子通过css浮动、定位可以让每个盒子排列成为网页一个完整的网页,是标准流、浮动、定位一起完成布局的,每个都有自己专门用法标准流-- 擅长的是上下排列可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准流布局浮动–擅长块级盒子一行排列可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局定位(层叠)–可以在某一个盒子内自由移动,可以固定在页面的某一个位置定位最大的特点是有层叠的概念,可以让多个盒子前后层叠压住盒子原创 2021-03-13 20:41:54 · 54 阅读 · 0 评论 -
CSS定位-学习笔记
写在前面:CSS属性书写顺序1. 布局定位顺序:display/position/float/clear/visibilltu/overflow2. 自身属性:width/height/margin/padding/border/background3. 文本属性:color/font/text-decoration/text-aligin/vertical-align/white-space/break-word4. 其他属性(CSS3):content/cursor/border-radiu原创 2021-03-12 13:14:51 · 84 阅读 · 0 评论 -
前端学习笔记--清除元素浮动
浮动的元素不占有高度,会自动上浮;因为父盒子不方便给高度,所以为了解决子盒子浮动不占有高度位置,让父盒子没有高度也不影响标准流盒子。所以需要清除浮动。清除浮动的本质就是清除浮动元素造成的影响。语法:clear:both(清除左右两侧浮动的影响)清除浮动的策略是:闭合浮动:只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。清除浮动的方法:额外标签法也称为隔墙法,是W3C推荐的。原理: 找到最后一个浮动的盒子,添加一个标签(必须是块级元素),给标签添加style clear: both原创 2021-03-10 18:04:50 · 276 阅读 · 0 评论