Solid

使用vue 开发地图类系统的注意。 1、使用地图应该创建的对象 少使用 vue 的data 和计算属性(comments)存数据或是vuex。 为什么要要注意这个问题呢？ 答：这个就要了解到vue的实现原理 。 原理参考 ； 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter 使用地图引擎创建的创建的实例往往都是创建的一个对象的 。这个实例的对象往往都是有许多的属性和方法。这个我们使用vue 的数据 存储的 ，那么vue就是把这个的属性全部转换成 getter/setter 。这个内存的就是会增加。 地图的变量我们可以使用局部变量存储。 地图引擎使用的是 openlayers <template> <div ref="mapView" class="map-view"> <!-- 弹窗 --> <div ref="popup" class="ol-popup"> <a @click="popupcloser" class="ol-popup-closer"></a> <div class="ol-popup-content" v-html="popupContent"></div> </div> </div> <

前言 有了第一小节的经验，我们可以对直接的动画效果做一些升级效果，如果组合 :before 、 :after ，效果有更酷。 请先看一下效果示例吧： 下面一个一个示例讲解 示例一 <button class="btn-1">按钮一</button> <style> button{ position: relative; width: 100px; height: 40px; border: 1px solid #46b0ff; background: none; cursor: pointer; overflow: hidden; } button:before, button:after{ position: absolute; content: ''; width: 100%; height: 100%; z-index: -1; transition: all .5s; } /* 按钮一 */ .btn-1:before{ top: 0; height: 0; left: 0; } .btn-1:after{ bottom: 0; height: 0; left: 0; background: rgba(70, 176, 255, 1); } .btn-1:hover:before, .btn-1:hover:after{ height: 50%; background:

效果显示 几个技能点 点击view切换可编辑状态的input，回车后，要回到文本模式 将bindtap改为catchtap，阻止与checkbox冲突 注意sort()函数的坑，是按字符ascii排序，而非数值大小，所以要传递sort()排序回调方法 代码 代码里有详情的注释，完整代码托管在git， https://gitee.com/laeser/demo-weapp ) JS文件 Page({ data: { todos: [ { title: '明天9点打电话给老张' }, { title: '打电话给老王' }, { title: '打电话' } ] }, onLoad() { // 调用模拟数据代码，需要时打开下面的注释 // this.mock() }, // 模拟长列表数据源 mock() { // 生成12行数据，看底部删除按钮是否正常 const todos = [] for (let index = 0; index < 12; index++) { todos.push({ title: index }) } // 保存数据源 this.setData({ todos: todos }) }, add(e) { // 获取文本框里的内容 const title = e.detail.value // 如果文本为空，给出toast提示 if (!title) {

HTML代码： <div class="g-container"> <div class="j"></div> <div class="j"></div> </div> CSS代码： <style> body { background: #000; overflow: hidden; } .g-container { position: relative; width: 200px; margin: 100px auto; filter: contrast(150%) brightness(110%); } .j { position: absolute; top: 0; left: 0; width: 47px; height: 218px; z-index: 1; background: #24f6f0; } .j:before { content: ""; position: absolute; width: 100px; height: 100px; border: 47px solid #24f6f0; border-top: 47px solid transparent; border-radius: 50%; top: 121px; left: -147px; transform: rotate(45deg); } .j:after { content: "";

<div style = "height:500px;width:500px;position:static;float:left;"> <div class="wrap"> <div class="red"></div> <div class="yellow"></div> <div class="pink"></div> <div class="cyna"></div> </div> <div class="limb"></div> </div> <div style = "height:500px;width:500px;position:static;float:left;"> <div class="wrap"> <div class="red"></div> <div class="yellow"></div> <div class="pink"></div> <div class="cyna"></div> </div> <div class="limb"></div> </div> <div style = "height:500px;width:500px;position:static;float:left;"> <div class="wrap"> <div class="red"></div> <div class="yellow"></div> <div

用边框把宽高撑开，其他边设置为透明色或者背景色即可，再用position定位到任何地方去 < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Title < / title > < style type = "text/css" > . box { width : 0 px ; height : 0 px ; border - right : 100 px solid transparent ; border - left : 100 px solid transparent ; border - top : 100 px solid transparent ; border - bottom : 100 px solid # 000000 ; } < / style > < / head > < body > < div class = "box" > < / div > < / body > < / html > 来源： CSDN 作者： 九层之台 始于垒土 链接： https://blog.csdn.net/dwjdj/article/details/104106399

1、html <!--向上的三角形--> <div class="border-up"> <span></span> </div> <!--向下的三角形--> <div class="border-down"> <span></span> </div> <!--向左的三角形--> <div class="border-left"> <span></span> </div> <!--向右的三角形--> <div class="border-right"> <span></span> </div> 2、css .border-up { width: 0; height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #333; position: relative; margin: 50px auto; } .border-up span { display: block; width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 28px solid

很多时候如果不是用了很多样式，很难把边框修饰得好看，看了一篇博文，觉得真的挺漂亮，也挺好看。 转载的博文地址 将这段美化的css代码 border:1px solid #96c2f1;background:#eff7ff 应用到div中， <div style="padding:8px;border:1px solid #96c2f1;background:#eff7ff"> border:1px solid #96c2f1;background:#eff7ff</div> 效果如下。 border:1px solid #96c2f1;background:#eff7ff 以下还有十个示例。 border:1px solid #9bdf70;background:#f0fbeb border:1px solid #bbe1f1;background:#eefaff border:1px solid #cceff5;background:#fafcfd border:1px solid #ffcc00;background:#fffff7 border:1px solid #cee3e9;background:#f1f7f9 border:1px solid #a9c9e2;background:#e8f5fe border:1px solid #e3e197;background:

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、使用 :not() 在菜单上应用/取消应用边框 我们通常的做法是先给每个菜单项设置边框，然后在设置最后一个菜单的边框为零 /* add border */ .nav li { border-right: 1px solid #666; } //* remove border */ .nav li:last-child { border-right: none; } 不过不要这么做，使用 :not() 伪类来达到同样的效果： .nav li:not(:last-child) { border-right: 1px solid #666; } 当然，你也可以使用 .nav li + li 或者 .nav li:first-child ~ li ，但是 :not() 更加清晰，具有可读性 .nav li + li{ border-left:1px solid #666;} /*.nav li:first-child ~ li{ border-left:1px solid #fff; }*/ 二、使用:nth-child(n)选择项目 (注：第一个子元素的下标是 1) :nth-child(3) 表示选择列表中的第三个元素 :nth-child(2n)表示列表中的偶数标签，即选择第2、第4、第6……标签 :nth

1.首先画一个div，给固定宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Trangle</title> <style> div{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <h3>三角形</h3> <div> </div> </body> </html> 2.给div加上边框顺序为上，右，下，左 div{ width: 100px; height: 100px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom: 50px solid green; border-left: 50px solid saddlebrown; } 3.去掉div的宽度和高度 div{ width: 0px; height: 0px; background-color: red; border-top:50px solid mediumpurple; border-right: 50px solid blue; border-bottom