先看效果图 由于是截图，大小有些失真 实现分析 看到这个图，思考一下，就能明白，其实就两个难点： 左边的锯齿状是如何实现 中间的凹陷是如何实现 上述两个难点解决了，相信有css基础的都能写出这个组件。 实现锯齿效果 方法一：伪元素before和after .sawtooth { /* 相对定位，方便 ...
分类：
其他好文 时间：
2020-05-31 17:45:45
阅读次数：
59
原理 父级元素 relative，子元素 absolute，然后通过top、left、right、bottom来设置具体出现位置。 DOM结构 <div class="wrapper-dashed"> <div class="dashed"></div> </div> CSS样式 .wrapper- ...
分类：
Web程序 时间：
2020-05-31 16:15:29
阅读次数：
88
vue组件中使用 <template> <div> //创建一个dom元素用来放echats图表 <div id="xline"></div> </div> </template> script中的 <script> export default { mounted() { var chart = ...
分类：
其他好文 时间：
2020-05-31 12:45:49
阅读次数：
65
css3的渐变属性已经在各种网页设计中被广泛使用，在没有css3的渐变属性之前，要实现一些多种颜色切换的效果图，你可能别无他法，只能用一个图片来显示，虽然你知道使用图片需要网络请求，既耗带宽又耗时间，下面我将介绍用css3的渐变来改善这一问题。 linear-gradient 基本用法 想要知道线性 ...
分类：
Web程序 时间：
2020-05-30 20:18:00
阅读次数：
69
效果图 代码 <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%;" height="53vh" v-loading="dataListLoading" > this.getSpa ...
分类：
其他好文 时间：
2020-05-30 15:41:25
阅读次数：
429
【爱迪的懂】本期来学一学一个底部导航栏的基本实现~ 效果图：点击三个按钮任意一个，切换页面上文字。 步骤： 1.准备 开始前需要准备导航栏底部的图片，以及点击后变换的图片，这里共6张。放在 drawable 下 2.新建一个Activity ,修改他对应的布局文件 FrameLayout： 相当于一 ...
分类：
移动开发 时间：
2020-05-30 10:26:02
阅读次数：
85
CSS 翻转图片主要用到的技术除了3D翻转和定位 ，还用到了一个属性 backface-visibility：visable|hidden;该属性主要是用来设定元素背面是否可见。 效果图如下： 具体的步骤如下： 1、写出页面主体， <div> <img src="Images/b.jpg" alt= ...
分类：
Web程序 时间：
2020-05-30 00:55:48
阅读次数：
87
今天给大家带来的是模板项目实战，先给大家看一下效果图说明：点击图片后会跳转到对应的详情页面数据：movies=[{‘id‘:‘34532‘,‘title‘:u‘胖子行动队‘,‘thumbnail‘:u‘https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp‘,‘rating‘:u‘7.6‘,‘comme
分类：
其他好文 时间：
2020-05-27 17:04:21
阅读次数：
74
效果图： 代码： input{ display: inline-block; vertical-align: middle; } label{ vertical-align: middle; } ...
分类：
其他好文 时间：
2020-05-27 15:16:50
阅读次数：
221
效果图 一、为Product的bean类中，增加属性firstProductImage 二、在ProductDAO类中，定义setFirstProductImage(Product p,String tyle)方法，将type="type_single"集合中的第一张图片,存储在Product对象的 ...
分类：
其他好文 时间：
2020-05-27 01:26:36
阅读次数：
116
