css
关注
分享
扫一扫
O3ohn
我不想上班
展开
-
如何让多个div横向排列而不换行以及位置偏移问题
设置两个div为inline-block。<div style="width: 100%"> <div style="white-space: nowrap; width: fit-content"> <div class="title-style"> <span>xxx</span> </div> <div style="display: inline-block;">原创 2021-12-23 14:03:54 · 564 阅读 · 0 评论 -
溢出隐藏overflow: hidden 与 CSS3 box-shadow 阴影冲突问题
css给div四个边框添加阴影_微若轻澜的博客-CSDN博客_边框加阴影原创 2021-12-15 13:34:58 · 5256 阅读 · 3 评论 -
vue根据定义data的变量修改elementui 导航二级菜单样式 解决适配一级菜单宽度问题
在做项目的时候需要根据导航栏每行的宽度改变二级菜单宽度的显示，因为elementui导航样式默认：.el-menu--collapse .el-menu .el-submenu, .el-menu--popup { min-width: 200px;}需要动态改变min-width的值。解决：一开始考虑通过css动态改变样式的方法，设置this.$el.style.setProperty("--width",this.width);给变量赋值，但是由于elementui原创 2021-10-11 16:06:40 · 3165 阅读 · 2 评论 -
vue 吸顶效果，开始随页面滚动，滚动到指定位置固定在顶部或者固定在指定位置
首先找到需要加吸顶的元素加上id和样式我这里是给页面左侧导航加吸顶，在外层div加id,里层div加样式<div class="asset-main-wrapper" id="menuFlag"> <el-row class="asset-main-wrapper-part"> <el-col :span="4" > <div :class="whether ? 'isFixed' : ''"> <el-row>原创 2021-07-26 09:51:31 · 6028 阅读 · 0 评论 -
CSS在矩形右上角画三角形符号
<template> <div class="margin-2"> </div></template><style>.margin-2 { margin-bottom: 30px; border: 1px solid rgba(45, 106, 230, 100); padding: 10px; position: relative;}.margin-2::before { content: ""; width:0;.原创 2021-05-25 11:09:15 · 3431 阅读 · 0 评论 -
css3动画 提交成功圆圈画对勾
这里写目录标题提交成功圆圈画对勾遇到的问题问题一：对号的动画要在圆圈执行完动画后执行解决：问题二：css不能在display:none和display:block之间进行动画解决：代码提交成功圆圈画对勾这是一个动画效果，可以直接复制代码看特效。遇到的问题问题一：对号的动画要在圆圈执行完动画后执行解决：设置延迟动画：animation-delay 属性规定动画开始的延迟时间。（我的代码使用简写）问题二：css不能在display:none和display:block之间进行动画我设置的动画原创 2021-05-14 13:19:29 · 3058 阅读 · 0 评论 -
在一个div中水平居中
margin:0 auto;display:flex; justify-content: center;原创 2021-05-10 13:55:06 · 76 阅读 · 0 评论 -
elementui Tabs组件 修改样式 自定义样式 去掉底部横线等
默认：在type="card"基础上修改elementui原有样式<!-- tab页 --><template> <div class="asset-detail-tabs"> <el-tabs v-model="activeName" type="card"> <el-tab-pane label="基本信息" name="1"> <!-- <img width="1340px" src="../../..原创 2021-04-26 16:17:34 · 12942 阅读 · 0 评论 -
CSS实现:文字少居中显示，超过一行居左显示
需求：页面某个模块的文字内容是动态的，可能是几个字，也可能是一句话。然后，希望文字少的时候居中显示，文字超过一行的时候居左显示。该如何实现？代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> .box { padding: 10px; background-color: #c原创 2021-04-19 10:08:39 · 777 阅读 · 0 评论 -
CSS属性：vertical-align:middle使用
vertical-align 属性设置元素的垂直对齐方式。说明：该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格（display：table-cell）中，这个属性会设置单元格框中的单元格内容的对齐方式。不作用于块级元素。...原创 2021-04-19 10:05:59 · 1465 阅读 · 0 评论 -
CSS控制图片和文字在同一行显示且对齐的3种方法
CSS控制图片和文字在同一行显示且对齐的3种方法在HTML代码中，我们有时候需要在图片后面加上简单的文字进行说明，但默认情况下，图片置顶对齐，文字置底对齐，所以通常图片高，文字低，不能水平居中对齐。要想解决这个问题，常见方法有3种：通过添加css的 vertical-align:middle;如果图片是背景图片，可以在css中设置背景图片；把文字和图片分别放入不同的div中。默认情况下如图：1、添加上“vertical-align:middle”属性<body> <转载 2021-04-19 09:45:27 · 5726 阅读 · 0 评论