前端
关注
分享
扫一扫
文章平均质量分 88
Catherine_G
记录学习编程的点滴~
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue项目里访问第三方接口如天气接口、获取IP接口
文章目录天气接口IP1、index.html里面写script【推荐】2、用js间接写。。天气接口这里用的是这个：https://www.tianqiapi.com请求接口： getDateWeatherAir (ip) { return $http({ url: `https://www.tianqiapi.com/api/?appid=347585&app...原创 2019-10-18 18:28:24 · 7614 阅读 · 0 评论 -
【前端】文本截断、文本溢出
参考文章：CSS - 纯css实现多行文本溢出省略（兼容所有浏览器）纯 CSS 实现多行文字截断文本溢出显示省略号黑科技：CSS定制多行省略优雅的使用Js或CSS处理文本的截断与展示前端文本截断-efe文本截断文章目录一、单行文本截断二、多行文本截断1、伪类:after2、JS实现3、其他方法最后总结：一、单行文本截断width: 200px;/*设置宽度*/overflo...原创 2019-10-18 17:56:46 · 1263 阅读 · 0 评论 -
vue3.0设置浏览器icon和动态修改页面title
文章目录设置浏览器icon设置页面title方法一：router改document.title方法二：使用vue-meta插件总结：设置浏览器icon启用了pwa:参考文章：vue3.0设置浏览器icon文件结构vue.config.js中设置：注：vue.config.js是vue-cli的配置文件，可选，可参考：全局-cli-配置pwa: { iconPaths: {...原创 2019-10-12 15:54:10 · 9012 阅读 · 1 评论 -
vue中v-for循环前端存储的图片
vue中v-for循环前端存储的图片<img :src="require(`../../assets/navigation/linktype${item.posID}.svg`)" />// 路径自己定义附：单个图片引入<img src="../../assets/linktype0.svg" />参考：vue的 v-for 循环中图片加载路径问题...原创 2019-10-12 11:47:17 · 1229 阅读 · 0 评论 -
【CSS布局】-全屏布局
文章目录1、position：absolute2、flex全屏布局：1、position：absolute<!DOCTYPE html><html> <head lang="zh-CN"> <meta charset="utf-8"> <title>全屏布局position</tit...原创 2019-08-26 10:05:30 · 293 阅读 · 0 评论 -
【CSS】我理解的position
注：本文是《CSS权威指南》的学习笔记文章目录static：relative：absolute：fixed：包含块：偏移属性：总结绝对定位：absolute固定定位：fixed相对定位：relativeposition：用于定位static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。relative：元素框偏移某个距离...原创 2019-08-26 10:24:38 · 428 阅读 · 0 评论 -
【CSS】我理解的float
注： 文本是《CSS权威指南》的学习笔记文章目录定义重叠时清除浮动: clear浮动规则定义浮动float： 比如浮动图片，使周围的文字包围它<img src="b4.jpg" style="float: left;" alt="b4">浮动元素，会以某种方式将浮动元素从文档的正常流中删除，不过它还是会影响布局。一个元素浮动时，其他内容会环绕该元素。浮动元素周围的外...原创 2019-08-26 10:48:33 · 236 阅读 · 2 评论 -
ant design pro的使用
ant design pro的框架已经从v2发展到v4了，V4多了“区块”的概念，更加自动化一些。我这里使用的版本是**@2.3.1**,通过自定义的方式来新增页面，目的是实现学生信息的展示。antd pro默认提供了两种布局模板，包括BasicLayout和UserLayout。新建文件首先在src/pages新建一个文件夹，其中包含展示页面和使用的model以及样式表，如下图所示，一般页...原创 2019-08-27 20:13:20 · 959 阅读 · 0 评论 -
[前端]本地存储搜索历史-localStorage
搜索框获取焦点后展示搜索历史，搜索历史记录可以存储在前端，如下图所示：现在使用localStorage存储，可以打开开发者工具-Application-Local Storage（这里使用的是Chrome浏览器），红框里的内容就这上图中的搜索记录，可以在控制台打印一下记录，顺便验证一下它是不是string类型。控制台里面验证~好的，我们可以看到这条记录是个以逗号分隔的字符串。写由于...原创 2019-10-11 13:45:49 · 2970 阅读 · 2 评论 -
【css布局】-垂直水平居中
参考GitHub项目： https://github.com/Sweet-KK/css-layoutwiki： https://www.sweet-kk.top/css-layout/#/实例： https://www.sweet-kk.top/css-layout-demo/html/index.html垂直水平居中ヾ(◍°∇°◍)ﾉﾞ注：本文是上述GitHub项目的学习笔记文章目录1、...原创 2019-08-26 10:02:28 · 240 阅读 · 0 评论 -
【css】visibility:hidden和display:none有什么不同？
同样是控制元素不可见，visibility：hidden和display:none有什么不同呢？看下面的代码，普通展示<div style="border: 1px solid; height: 300px; width: 300px; margin-top: 20px; background: silver;"> <p>test a paragraph tes...原创 2019-08-26 09:36:43 · 202 阅读 · 0 评论 -
javascript取值的时候什么时候用value什么时候用innerHTML
对于表单控件(输入类),都可以用value属性,对于非表单控件（非输入类eg：div, span,em）,可以用innerHTML INPUT标签都有value属性,但都没有innerHTML属性,所以只能用valueSELECT标签和OPTION标签,即有value属性也有innerHTML属性,但是一个是取回值,一个是取回文本,这两个可能相同也可能不同,具体要看你想要哪个值.TEXTAREA标转载 2018-01-18 12:39:42 · 1073 阅读 · 0 评论 -
checkbox input 输入控制练习（过滤小数、非数字、超范围）
<!--此页是对CheckBox和input框的练习，任务1.实现当点击"全选"按钮时，将选中所有的复选项。提示:document.getElementsByTagName("input")获取的是所有input标签，包括复选项和按钮，所以要判断是否是复选项，如是选中。2.实现当点击"全不选"按钮时，将取消所有选中的复选项。3.在文本框中输入输入1-6数值，当点击"确定"按钮时，根据输入原创 2018-01-18 17:28:39 · 336 阅读 · 0 评论 -
npm install 出错
npm是包管理器，我们经常会用它下载项目初始的依赖，然而有些时候会遇到“npm install error”也就是出错了，该如何解决呢？ 1、首先考虑 清理缓存npm cache clean --force2、清理之后还是出错的话考虑是否为网络问题解决办法为：重新开启Git窗口重试或者用cnpm (参考此处)// 安装命令为：npm install -g cn...原创 2019-01-19 10:16:55 · 1231 阅读 · 0 评论 -
restful
RESTful前后端要分离，而前端的设备多种多样，为了方便不同的前端设备和后端进行通信，必须有一种统一的机制。目前最流行的是restful风格接口。RESTful架构是目前最流行的一种互联网软件架构。符合以下三点要求的便是RESTful架构1、每一个URI代表一种资源2、客户端和服务器之间，传递这种资源的表现层3、客户端通过四个HTTP动词对服务器端资源进行操作，实现“表现层状态...原创 2019-01-19 10:54:10 · 313 阅读 · 0 评论 -
常用Git命令
工作中的话Git很常用啦~每天早上去了从仓库里面拉下来新的代码，然后开始工作，但是常用的Git命令很少啦！来学习一下鸭下载代码打开 GIt Bashgit clone XXX.git下载分支代码git checkout -b 远程仓库分支名 origin/远程仓库分支名eg:git checkout -b v1 origin/v1提交代码 git add . //...原创 2019-01-19 11:35:22 · 150 阅读 · 0 评论 -
CSS-盒子模型
温故而知新。文章目录盒子模型是什么水平格式化垂直格式化auto第一个例子第二个例子盒子模型是什么CSS盒子模型是最重要的一个概念，话不多说，先上图。如图所示，盒子四周（上下左右）分别都有对应的外边距 margin边框 border内边距 padding中间内容部分有width和height这就是盒子模型所有的组成部分，可以想象一个包装精美的月饼来辅助理解。一般，一个元素的...原创 2019-08-19 17:57:17 · 161 阅读 · 0 评论 -
外边距margin-学习笔记
值： [ | | auto]{1,4} | inherit初始值：未定义百分数：相对于父元素的width计算 h1 {margin: 10px 20px 15px 5px} top right bottom left. 从上（top）开始围着元素顺时针旋转。单位：px in em ex等等。值复制：以下两种写法效果一样 p {margin: 0.25...原创 2019-08-19 18:02:59 · 153 阅读 · 0 评论 -
[CSS布局]-水平居中-学习笔记
W3.org官方网站： https://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins参考GitHub项目： https://github.com/Sweet-KK/css-layoutwiki： https://www.sweet-kk.top/css-layout/#/实例： https://www.sweet-...原创 2019-08-19 20:50:06 · 189 阅读 · 0 评论 -
HTML链接-锚点
可做页内跳转。参考 w3school总：也就是说，首先在需要加锚点链接的地方添加链接的name属性，然后在其他地方的链接中的href就可以指向name,用href="#name名字"，在其他页面中使用时href要写完整的url.就酱！HTML 链接 - name 属性name 属性规定锚（anchor）的名称。您可以使用 name 属性创建 HTML 页面中的书签。书签不会...原创 2018-01-18 09:51:24 · 3400 阅读 · 0 评论