CSS
周家大小姐.
这个作者很懒,什么都没留下…
展开
-
css文字垂直居中
.label-library-li-left { writing-mode: vertical-rl; }原创 2021-08-12 10:21:16 · 146 阅读 · 0 评论 -
css3 背景图缩写
body{ /* css3背景图缩写 */ background: #eee url('xs.png') no-repeat fixed 50% 50%; /*相当于 backgorund-color:#eee background-...原创 2019-03-07 17:04:47 · 1113 阅读 · 0 评论 -
css3 文本自动换行
关于文本自动换行问题 ,中文会自动换行,但是英文不会;如果想英文自动换行;需要用到word-break div{ /* 关于文本自动换行问题 ,中文会自动换行,但是英文不会;如果想英文自动换行;需要用到 */ word-break: break-all; }...原创 2019-03-07 17:11:52 · 5243 阅读 · 0 评论 -
scss 引入外部公共样式
要src/scss/common.scss$header-height: 48px;$theme-color: #fff;NavBar/index.scss引入@import '../../scss/common.scss'; .dropdown-menu { position: absolute; right: 10px; height: $h...原创 2019-07-17 10:40:46 · 1011 阅读 · 0 评论 -
css 修改placeholder 占位符 字体颜色
<input class='search-input' placeholder-class='placeholder-input' placeholder='蚂蚁花呗'></input> .placeholder-input{ color: #fff;}原创 2019-04-29 12:12:54 · 1772 阅读 · 0 评论 -
vue引入less文件
npm install less less-loader在下方文件中配置:module: { rules: [{ test: /\.less$/, loader: "style-loader!css-loader!less-loader", }, ] },重新启动:npm run dev<s...转载 2018-05-03 11:49:23 · 3623 阅读 · 0 评论 -
css 文本两端对齐及数字两端对齐
html: <view class="content"> <view class="title">{{cell.title}}</view> <view class="name">{{cell.name}}</view> ...原创 2019-07-01 18:16:45 · 2906 阅读 · 0 评论 -
css 清除字体锯齿
-webkit-font-smoothing主要有一下三个属性:none: 无抗锯齿 subpixel-antialiased (default): 次像素平滑 常见于Mac OS和MacType For Windows antialiased: 灰度平滑 常用于Android和iOS等移动设备的 *{ /* -webkit-font-smoothing:antialias...原创 2019-07-13 18:13:16 · 1334 阅读 · 0 评论 -
H5 使用textarea输入时让文字下方出现下划线
<!DOCTYPE html><html lang="zh"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta charset="utf-8" /> <...原创 2019-09-05 14:32:54 · 3450 阅读 · 0 评论 -
html css 横杠样式设置
<!-- 活动详情弹框 bigin --> <div class="z_activity_popup"> <div class="z_activity_mask"> <div class="z_activity_body"> <p class="z_activity_close">X<...原创 2019-09-05 17:05:47 · 2329 阅读 · 0 评论 -
css html 编写凌形图案
<div class="z_activity_diamond"> <div class="z_activity_diamond_top"></div> <div class="z_activity_diamond_bottom"></div><br /> ...原创 2019-09-05 17:28:41 · 246 阅读 · 0 评论 -
css 实现弹框滚动条
<!-- 活动详情弹框 bigin --> <div class="z_activity_popup"> <div class="z_activity_mask"> <p class="z_activity_close"> <span class="z_activity_close_...原创 2019-09-05 18:39:31 · 2022 阅读 · 0 评论 -
css3 伪元素::focus 获取焦点事件
获取input焦点时改变轮廓颜色 form>input:focus{ outline-color: red; }原创 2019-03-07 16:36:37 · 3533 阅读 · 0 评论 -
css3 伪元素::selection选择改变背景色
h1::selection{ background: #f0f; }原创 2019-03-07 16:32:34 · 844 阅读 · 0 评论 -
css select 去除高亮和默认下位样式
去除高亮样式 .selected{ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; }去除select默认下拉样式 .selected...原创 2018-10-22 11:22:59 · 2183 阅读 · 0 评论 -
css 超出隐藏显示省略号
以下三个需要配合使用: text-overflow: ellipsis; //字体超出用省略号显示 overflow:hidden; // 超出隐藏white-space:nowrap // 不换行 div{ text-overflow: ellipsis; overflow: hidden; ...原创 2018-10-22 11:26:43 · 573 阅读 · 0 评论 -
css3之弹性盒模型
什么是弹性盒模型?弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小。 弹性盒模型的提出可以解决一些响应式布局的需求 如何使用弹性盒模型?建立弹性盒模型: 给父级设置css属性display: flex; 即可。若子集宽度大于父级宽度则子集会整体压缩或者给子集设置css属性flex-shrink: 1;浏览器会根据flex...转载 2018-10-23 09:05:50 · 217 阅读 · 0 评论 -
css3 实现两端对齐
HTML: <ul class="person-info"> <li> <div class="photo"> <img src="../../../assets/img/Path.png" alt="">原创 2018-10-25 19:25:43 · 2492 阅读 · 0 评论 -
css3 超出部分显示省略号
/* 超出部分显示省略号*/display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。 -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。.goods { /* 一行显示*/ -webkit-line-clamp: 1; /* 将对象作为弹性伸缩盒子模型显示 */ display: ...原创 2018-11-22 21:26:27 · 1873 阅读 · 0 评论 -
css 给img预留占位符位置
需求:在进入页面时,如果图片还没有加载进来应该给到它一个预留位置;不然如果不预留等图处加载进来就会蹭的一下把文字挤下去会不太好看;所以我们可以用css来实现 .food .food-wrapper .food-content .img-wrapper{ position: relative; width: 100%; height: 0; padding-top: 100%;}...原创 2018-12-05 21:47:04 · 5306 阅读 · 0 评论 -
引入flexible.js rem字体
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta原创 2018-12-06 14:56:41 · 1002 阅读 · 0 评论 -
html 引入less文件
开发工具为vscode在扩展里下载 Easy LESS这个插件 在css文件夹中创建一个less后缀名写入css 如:body{ background-color: #fff; font-size: 14px;}.container{ width: 100%; max-width: 100%; height: auto;}.co...原创 2018-12-19 15:44:25 · 13241 阅读 · 6 评论 -
移动端去掉a标签点击时出现的背景
需求:每次在a链接点击的时候总是会有一个背景色出来很难看;我们需要去掉a:active { -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}原创 2019-01-05 18:01:04 · 859 阅读 · 0 评论 -
css3 flex使用
.box{display:flex;}flex的6个属性:flex-direction 容器内项目的排列方向(默认横向排列) flex-wrap 容器内项目换行方式 flex-flow 以上两个属性的简写方式 justify-content 项目在主轴上的对齐方式 align-items 项目在交叉轴上如何对齐 align-content 定义了多根轴线的对齐方...转载 2019-02-15 11:26:54 · 1211 阅读 · 0 评论 -
css 隐藏滚动条
/* scroll-view 不显示滚动条 */::-webkit-scrollbar { width: 0; height: 0; background-color: transparent;}原创 2019-02-22 17:55:55 · 1587 阅读 · 0 评论 -
css3上下居中
第三种是给父级添加样式。先写这几种, 够大家用了,还有通过伪类实现居中的效果,有兴趣的可以自己敲下试试第一种 css3的transform写在子级上.ele{ display:inline-block;/*设置元素绝对定位*/ position:absolute;/*top 50%*/ top: 50%;/*left 50%*/ left: 50%;...原创 2018-10-16 10:59:46 · 18311 阅读 · 1 评论