css
十年4646454sdg5sagsa
这个作者很懒,什么都没留下…
展开
-
文字和图片同行,垂直居中的三种方式
1.img div :display:inline-block;vertical-align: middle;2.父元素:display:flex父元素flex,子元素自动消除高度差,可以很简单的实现,只是不兼容ie,flex布局时css3的,兼容性不强。3.img: transform: translateY(10px);改变y值向上向下移动...原创 2021-03-04 11:23:07 · 1027 阅读 · 1 评论 -
容器宽度适应内部文字宽度
做p的border-bottom充当文字下划线的时候,p的宽度自适应csswidth:fit-content; width:-webkit-fit-content; width:-moz-fit-content;原创 2021-03-01 10:23:46 · 214 阅读 · 0 评论 -
输入框鼠标悬停效果
<div class="col-3"> <input class="effect-7" type="text" placeholder="请输入您要查询的地域关键词"/> <span class="focus-border"> <i></i> </span></div>、.col-3{ width: 400px; height: 38px; position: relative;display.转载 2021-02-27 09:48:32 · 936 阅读 · 0 评论 -
解决layui的弹框出现位置不居中问题layer.ready(function () {})
layui.use(['layer'], function () { var layer = layui.layer; //询问框 layer.ready(function () { // 弹框代码 layer.confirm('<br/> xxxxxxxxx<br/>', { btn: ['确定'], title:'通知',//按钮 }, func.原创 2021-02-19 09:01:45 · 1521 阅读 · 0 评论 -
文字和图片水平对齐
1.flex布局父级元素使用flex,display:flex;justfy-content:center实现水平居中对齐,2.图片transform: translateY(14px);图片向下移动原创 2021-02-07 15:00:43 · 1345 阅读 · 0 评论 -
移动端的rem屏幕适配css文件 于蓝湖配合使用 pc端和移动端的适配,写两套css
375px宽度设计稿对应22px=1rem设置蓝湖的自定义css rem 点击确定就可以直接看到计算好的rem值。非常方便效果:@media only screen and (min-width: 320px) { html { font-size: 18.773px !important }}@media only screen and (min-width: 340px) { html { font-size: 20px.原创 2021-02-07 11:42:54 · 3409 阅读 · 0 评论 -
文字的前后伪类装饰
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ width: 1000px; margin: 10px auto; border: 1px solid r.原创 2021-02-06 11:05:39 · 188 阅读 · 0 评论 -
flex css底部tabbar四个部分均分一行,居中
tab-bar大的父元素tab-bar-item 子元素原创 2021-01-05 14:29:40 · 448 阅读 · 0 评论 -
vue-cli配置sass,使用全局sass变量
vue-cli创建vue2.0项目,安装sass步骤创建vue2.0项目:vue init webpack 项目名安装sass步骤:npm install node-sass@4.14.1npm install sass-loader@7.3.1 --save-dev不要使用一条命令npm i --save-dev node-sass sass-loader因为最新安装的sass-loader是8.0,会报错!就这两个步骤,即可在项目里使用sass(scss)!不需要在build文件夹下的原创 2020-11-28 10:19:33 · 764 阅读 · 0 评论 -
移动端,div点击瞬间,去掉出现阴影问题。
/移动端,div点击瞬间,出现阴影问题。/div,a,img {-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none;user-select:none;}原创 2020-10-11 17:42:52 · 750 阅读 · 3 评论 -
当内容超出宽度时实现横向滑动效果
当内容超出宽度时,可以横向滚动我们经常会遇到内容超过高度时,页面出现滚动条,通过滚动条来继续浏览内容,比如当前页面就是。很简单,设置css属性overflow-y: auto;就可以实现。 而如果想要内容不换行,当超过宽度,横向滚动呢,overflow-x: auto;就不能实现了,因为默认会换行。 话不多说,直接上代码。<!--使用了vue,这里的重点应是css--><div class="content"> <div v-for="prizeItem转载 2020-09-07 14:44:28 · 4013 阅读 · 0 评论 -
定位position,官方的说明
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative 生成相对定位的元素,相对于其正常位置进行定位。转载 2020-08-06 15:11:48 · 156 阅读 · 0 评论 -
2020-08-06tab栏,顶部和底部
tab栏切换,适合移动端的。weui,底部tab栏<link rel="stylesheet" href="../css/weui.css"/> <link rel="stylesheet" href="../css/weuix.css"/> <script src="../js/zepto.min.js"></script> <script src="../js/zepto.weui.js"></script原创 2020-08-06 15:06:09 · 398 阅读 · 0 评论 -
折叠面板的使用,简洁-weui的使用
<link rel="stylesheet" href="../css/weui.css"/> <link rel="stylesheet" href="../css/weuix.css"/> <script src="../js/zepto.min.js"></script> <script> $(function(){ $('.collapse .js-category').c.原创 2020-08-06 14:44:58 · 1619 阅读 · 0 评论 -
文章内容用css控制:分栏,列宽,列数
1.2.column-width:列宽3.column-count:n定义列数。4.column-gap:3em:定义栏边距。5.column-rule:dashed...页分栏线的样式。6.定义显示方式:box,定义显示顺序:盒子 ......box-ordinal-group排列方向:默认水平vertical垂直模...原创 2020-02-13 10:30:34 · 351 阅读 · 0 评论