![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html/css
敲代码的柯基
努力的小前端,主修前端开发,同时也包揽公司后端开发的菜狗
展开
-
vue table使用colgroup进行表格自定义宽度
在默认情况下table表格的宽度是根据表格内容进行分配的想自定义宽度可以通过colgroup标签配合col标签设置:col的个数与表格的列数对应,因为我做的是自适应大小表格,所以width是用的百分比,默认是px;设置后就是自己想要的宽度/;...原创 2022-06-10 15:06:01 · 3389 阅读 · 0 评论 -
vue table如何去掉默认边框样式
要去掉所有的默认边框样式可以这样设置:原创 2022-06-10 14:43:42 · 3704 阅读 · 0 评论 -
Vue:The template root requires exactly one element.的解决办法
Vue:The template root requires exactly one element.的解决办法解决方法:在template标签下加一个根标签,就可以在根标签下放置多个标签不会报错了例如:<template> <div> <div id="nav"> <router-link to="/">Home</router-link> | </div> <router-view/>原创 2022-01-10 09:54:06 · 452 阅读 · 0 评论 -
vue动态绑定class常用的方式
1、 绑定单个:class="{ 'active': isActive }"2、 绑定多个:class="{ 'active': isActive, 'sort': isSort }"3、 绑定数据对象:class="classObject"data() { return { classObject:{ active: true, sort:false } }}4、 三元运算符进行判断:class="[isActive?'active':'']"5、 数组对象结合动态判断原创 2021-11-03 11:22:36 · 269 阅读 · 0 评论 -
css实现方框内打勾
css实现方框内打勾html: <div class="select-container" @click="selectItem(index)"> <i class="feature" v-if="checkBoxArr[index].selectStatus==1"></i> </div>css:.feature { width: 1rem; height: 0.5rem;原创 2021-09-07 17:05:12 · 2351 阅读 · 0 评论 -
flex布局纵向排列右对齐
flex布局纵向排列右对齐flex布局的对齐方式分为主轴方向和交叉轴方向,默认主轴为横向即flex-direction:row;需要使布局方向纵向需要设置为,设置后主轴为纵向,交叉轴为横向flex-direction:column;布局盒子中的项的排列方式设置时也要注意其应用的轴。用于设置在主轴上项目对齐:justify-content:设置在交叉轴上项目对齐:align-items:实现项目右对齐,则需要在设置交叉轴上。最终代码如下 .study-info-left {原创 2021-08-05 18:01:45 · 5944 阅读 · 0 评论 -
用placeholder遇到的坑
placeholder的文字位置调整不生效最近写页面的时候使用到了input输入框的placeholder属性,在调整他的样式的时候遇到了问题。placeholder的文字位置的调整不能使用margin,否则不会生效,要使用padding进行设置 input::placeholder { font-size: 14px; font-family: Arial; color: black ; padding-right: 5rem;原创 2021-07-29 16:28:48 · 693 阅读 · 0 评论 -
在HTML中打开windows计算器
在vue项目中点击任意按钮或者图标调用本地计算机自带的计算器。首先需要在注册表编辑器中添加注册表,实现自定义URL Protocol协议。1.打开 注册表编辑器 Windows+R->regedit2.右击HKEY_CLASSES_ROOT新建项 这里我起名为WebCalc3.在WebCalc下新建俩个项 DefaultIcon和shell4.在shell下新建项open5.在open下新建项command目录结构如下图所示6.在WebCalc下右键新建字符串值命名为URL原创 2021-07-27 17:12:17 · 1122 阅读 · 0 评论 -
2021-07-16
calc()不生效calc()实现计算属性不生效,原因:calc(100% - 3rem); 100%和3rem的“-”两边有空格.edit-dropdown {position: relative;top: 0;width:calc(100% - 3rem);z-index: 999999;}原创 2021-07-16 10:55:45 · 106 阅读 · 0 评论 -
我遇到的vue+better-scroll滚动不生效问题
一、DOM结构不正确better-scroll的结构应为三层结构,且公用同一父节点,最外层的包裹层的内层content只有一个 <div class="wrapper" ref="wrapper"> <ul class="content"> <li></li> <li></li> <li></li> </ul> </div>原创 2020-08-16 18:25:27 · 1228 阅读 · 0 评论 -
Vue 获取dom元素中的自定义属性值
方法一:通过绑定函数传参直接获取DOM元素自定义的值<div id="app"> <button @click="getData($event,'100')"></button></div>methods : { getData(e,num) { console.log(num); // 100 }}方法二:通过$ref属性获取<div id="app"> <button dat原创 2020-08-12 19:00:53 · 3436 阅读 · 1 评论 -
css内联样式---动态绑定背景图片
在内联样式中动态获取背景图片,并为背景设置变暗效果 <div class="top-wrapper" :style="{'background':'linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+coverImg+')'}"> </div>原创 2020-08-10 22:09:52 · 3076 阅读 · 0 评论 -
高度塌陷问题以及解决方法
高度塌陷问题以及解决方法在浮动布局中,父元素的高度默认是被子元素撑开的, 当子元素浮动后,其会完全脱离文档流,子元素从文档流中脱离,将会无法撑起父元素的高度,导致父元素的高度丢失,父元素高度丢失以后,其下的元素会自动上移,导致页面的布局混乱。下面来定义两个盒子,box1为父元素,box2为子元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2020-07-11 22:44:27 · 220 阅读 · 0 评论 -
html/css中的块元素,行内元素,行内块元素
html/css中的块元素,行内元素、行内块元素** 块元素(block element)**在网页中一般通过块元素来对页面进行布局,块级大多为结构性标记,它的特点是:1.总是从新的一行开始2.高度、宽度都是可控的,margin和padding的上下左右均对其有效3.宽度没有设置时,默认为100%4.块级元素中可以包含块级元素和行内元素注意:块元素中基本上什么都能放, p元素(块元素)中不能放任何的块元素。常见的块元素是: <h1>...</h1> 标题一级原创 2020-07-11 15:56:26 · 552 阅读 · 0 评论