::-webkit-scrollbar { width:4px; } /* 滚动槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow:inset006pxrgba(0,0,0,0.3); border-radius:10px; } /* 滚动条滑块 */ ::-webkit-scrollbar-thumb { border-radius:10px; background:r
效果图 （部分） 配置文件 package.json { "main": "index.html", "name": "tree", "window": { "title": "tree", "icon": "./favicon.ico", "
单行省略 overflow:hidden; text-overflow:ellipsis; white-space:nowrap; / 多行省略 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; /* 显示的行数，后面省略 */ overflow: hidden;
1、background:linear-gradient(90deg,rgba(237,219,211,1) 0%,rgba(202,152,124,1) 100%) 2、多边形①clip-path:polygon(50% 0,50% 0,100% 100%) 三角形 ②width:0;height:0;border-width:0 40px 40px;border-color:transparent transparent color 3、shape-outside 环绕
1.html <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><link type="text/css" href="css/style.css" rel="stylesheet" /></head><bod
<com.hjhrq1991.library.tbs.TbsBridgeWebView android:id="@+id/webView" android:layout_width=“match_parent” android:layout_height=“match_parent” /> JsBridge的使用请参考Android-使用JsBridge来优化js与本地的交互。 wvWebview.setWebViewClient(new MyWebViewC
一、form 下面只有一个 input 时回车键刷新页面 原因是：触发了表单默认的提交行为，给el-form 加上 @submit.native.prevent 就行了。 <el-form inline @submit.native.prevent> <el-form-item label="编号"> <el-input v-model="query.orderNo" :placeh
我遇到的场景： 对于iframe窗口，自带滚动条是整个窗口的大小。有时需要顶部或底部固定，则滚动条不应该触碰到顶部或底部。 那么首先打开iframe时应该去掉滚动条 scrolling="no"，然后在需要滚动的区域自定义滚动条。 <iframe frameborder="0" scrolling="no" src="index.html" > 自
并不是所有的CSS属性都能触发GPU的硬件加速，实际上只有少数属性可以，比如下面的这些： transform opacity filter 对于transform，2D transform 动画在开始和结束时发生的 repaint 操作，因此建议采用以下方式 .example1 { transform: translateZ(0); } .example2 { transform: ro
css - 滚动条样式 - webkit-scrollbar -webkit-scrollbar 浏览器兼容 火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。 IE下的滚动条样式修改跟chrome下的不一样，而且只能修改颜色。 CSS滚动条选择器 可以使用以
写在最前面 前端开发经常与css打交道，本人在过往的开发过程中遇到了许多CSS相关的奇奇怪怪的问题，本篇随笔用于（持续）记录遇到的问题及解决办法。 本随笔仅仅针对某一些问题或需求的个人经验记录，不适合被用于学习。并且由于汇总了各种奇奇怪怪有趣的经验，本篇也不适合被用于检
1、基本表单验证特性介绍 ① html5表单新增了那些类型？ email、url、number、range、date、search、color、tel等② 文本框中，输入一次，下一次再输入会自动提示是哪个特性？ autocomplete③ 初始化页面之后，如何让input自动获取焦点？ autofocus④ html5如何设置表单元素
情景： vue+element，table里使用v-html 内容是带标签<p> 可用以下方法使解决。不影响提示框： <el-table-column :show-overflow-tooltip="true" label="内容" align="center"> <template slot-scope="scope"> <div class
前言： 不同浏览器的内核不尽相同，所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎 所以浏览器兼容性问题一般指：css兼容、js兼容 常见的浏览器内核： 常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit IE浏览器Trident
简单来说，浏览器内核是浏览器的核心，也称“渲染引擎”，用来解释网页语法并渲染到网页上，浏览器内核决定了浏览器该如何显示网页内容以及页面的格式信息 浏览器内核又可以分成两部分：渲染引擎和JS引擎 渲染引擎：负责获取网页的内容并显示，不同的浏览器内核对网页的解析渲染也不同JS引擎：
1.单行文本溢出/多行文本溢出隐藏显示省略号 /* 单行文本溢出隐藏代替 */ display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 多行文本溢出 */ display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp
确定技术选型：方案：单独制作移动页面方案 技术：布局采取流式布局 题外知识：制作favicon.ico图标制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net 1.视口（选择理想视口）：设备有多宽，布局视口有多宽 meta视口标签标准
// 多行省略号样式 .type { display: -webkit-box; overflow: hidden; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; width: 137px;
多行转省略 width: 100%; max-height: 60px; font-size: 13px; line-height: 20px; /*关键之处，缺一不可*/ display: -webkit-box; -webkit-line-clamp: 3; /*要在第几行处隐藏，单行超出便省略就把3改成1*/ -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellips
1 overflow: hidden;// 超出的文本隐藏 2 text-overflow: ellipsis;// 溢出用省略号显示 3 display: -webkit-box; 4 -webkit-line-clamp: 2; //多行在这里修改数字即可 5 overflow:hidden;// 将对象作为弹性伸缩盒子模型显示。 6 /* autoprefixer: ignore next */ 7 -webki
首先元素要有宽度 单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
浏览器自定义滚动条样式 // An highlighted block var foo = 'bar'; #main { width:400px; height:400px; overflow:auto; } #main div { width:600px; height:600px; } #main::-webkit-scrollbar { width:10px; height:10px; } .main::-webkit-scrollbar-button { backgrou
1.边框 边框涉及1物理像素的问题，需要根据媒体查询进行相应的配置 .border-bottom{ position: relative; } @media screen and (-webkit-device-pixel-ratio:1){ .border-bottom::after{ position: absolute;
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节
{ scrollbar-arrow-color: red; /*上下按钮上三角箭头的颜色*/ scrollbar-face-color: #CBCBCB; /*滚动条凸出部分的颜色*/ scrollbar-3dlight-color: blue; /*滚动条亮边的颜色*/ scrollbar-highlight-color: #333; /*滚动条空白部分的颜色*
