- 博客(20)
- 收藏
- 关注
RSS订阅原创 使用vue版本地dataV组件库
dataV这个库主要是用来写监控大屏得，提供了很多好看得图表供选择，也有vue版本和react版本。官方文档正常按照官方文档下载库，然后导入组件，传入文档中要求的配置项就可以成功得渲染出来，下次简单写一点我的使用过程 <div class="full-screen"> <dv-border-box-11 title="污染物监管系统"...
2020-03-07 11:29:41
7983
4
原创 react开发简单记录
记录一下自己平时使用react用到的地方官方脚手架create-react-appyarn eject暴露配置文件webpack.config.js alias使用less、less module按需引入antd修改antd默认主题、less变量函数组件跟类组件的定义、props的使用// 定义函数组件export default function (props) { ...
2020-03-06 16:50:11
170
原创 使用css给div添加一些几何元素背景
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...
2020-02-29 10:33:16
434
原创 css实现圆形白底头像框
代码 <style> body { background-color: #f1f3f4; } img { margin: 30px; height: 100px; width: 100px; border-radius: 50%; padding: 3px; backgroun...
2020-02-24 09:49:15
1490
原创 padding属性的一些用法
移动端正方形（使用视口单位vw也可实现该效果）菜单图标选择器图标代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
2020-02-16 21:34:50
537
原创 使用伪元素选择器构建标题左右特殊样式
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...
2020-02-16 21:31:35
221
原创 使用resize属性控制元素可拉伸
代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</...
2020-02-14 15:24:01
408
原创 两列布局的多种方式实现
使用浮动设置两列布局<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Docum...
2020-02-14 13:08:33
405
原创 使用css变量动态换肤
结构 <div class="header">header</div> <button onclick="handleChange()">change theme</button>样式 <style> :root { /* :root伪类选择器表示文档根元素<html> */ ...
2020-02-14 12:59:36
368
原创 评论列表样式
结构 <div class="item"> <div class="photo"></div> <div class="text"> <div class="title"> <div>樱桃小丸子</div> <div>...
2020-02-14 12:07:31
1525
原创 css实现手风琴效果
结构 <div class="container"> <div class="item"></div> <div class="item item-1"></div> <div class="item"></div> <div class="item item-3">...
2020-02-14 11:51:48
115
原创 typescript的学习笔记
基本类型变量let isDone: boolean = true;let x: number = 10;const myName: string = 'li';let val: any = 10;val = true;let val1: Object = 10;val = true;// Object类型类似any，可以随意传值，但不能随意调用let obj1: objec...
2020-02-12 11:09:57
86
原创 使用react-split-pane简单记录
概述react-split-pane通俗来说就是个可以拖拽组件大小的库下载yarn add react-split-pane使用import React from 'react';import SplitPane from 'react-split-pane'import './index.css';export default () => { return ( ...
2020-02-09 21:42:30
4966
1
原创 js滚动页面时右侧锚点菜单随左侧内容高亮
需求网页左右布局，左侧内容右侧菜单，当内容滚动时右侧菜单项高亮，点击锚点菜单同样可以定位内容结构 <div class="container"> <div class="list"> <div class="item" id='1'>1</div> <div class="item" id='2'>...
2020-02-09 10:16:31
3342
1
原创 使用js写个数字时钟
实现原理通过Date对象获取当前计算机的系统时间，注册计时器每隔一秒重新获取时间即可格式化时间 function setTime() { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth() + 1; const date = now.getD...
2020-02-08 12:55:56
771
原创 styled-components的简单使用方法
安装yarn add styled-components创建样式组件import styled from 'styled-components';const Button = styled.span` padding: 5px 10px; border-radius: 5px; color: #fff; cursor: pointer; background-c...
2020-02-08 12:36:08
293
原创 使用css position:sticky实现滚动时固定头部、侧边导航固定
结构 <div class="header"> 网站 </div> <div class="sider"> <div class="item">链接1</div> <div class="item">链接2</div> <div class="item">链接3</div&g...
2020-02-08 11:34:20
1615
原创 使用css caret-color修改输入框光标颜色
结构 <input type="text">样式 input { caret-color: #f00; }效果
2020-02-07 22:02:40
255
1
原创 使用margin-left:auto实现单独排列的菜单项
结构 <div class="menu"> <div class="item">首页</div> <div class="item">公告</div> <div class="item">产品</div> <div class="item">关于</div> <d...
2020-02-07 21:45:53
157
原创 使用flex写个横向滚动
结构 <div class="wrapper"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>样式 <style type="text/css"> ...
2020-02-07 21:38:15
4592
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人