前端
RDSunday
计算机科学与技术专业
展开
-
数据接口
别人写好的数据接口,可以直接调用,自用学习测试接口地址天气接口http://wthrcdn.etouch.cn/weather mini?city=城市名称音乐接口搜索htp://igapi.ig.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=歌曲标题音乐信息接口htp:/igap.ig.baidu.com/v1/restserver/ting?method=baidu.ting.so.原创 2020-10-30 11:24:55 · 238 阅读 · 0 评论 -
前端文件目录命名规范
文章目录项目文件规范JS文件命名规范css命名规范HTMl命名规范每个人都应当结合W3标准形成一套自己的代码标准项目文件规范项目中的 CSS 文件、HTML 文件、JS 文件、其他引入文件、以及静态资源(图片、音频、视频等)都应当建立单独的文件夹存放。JS文件命名规范变量名注意以下几点:语义化遵循驼峰命名法避免保留关键字css命名规范** CSS样式须注意以下几点:**少用内联样式写好浏览器兼容样式名命名语义化、小写、使用‘-’或者‘_’作为连接符HTMl命原创 2020-08-31 11:00:49 · 1916 阅读 · 0 评论 -
前端常用命名单词列表
文章目录自用备忘自用备忘wrapper 页面外围控制整体布局宽度container或#content 容器,用于最外层layout 布局head, #header 页头部分foot, #footer 页脚部分nav 主导航subnav 二级导航menu 菜单submenu 子菜单sideBar 侧栏sidebar_a, #sidebar_b 左边栏或右边栏main 页面主体tag 标签msg /mes原创 2020-08-31 10:53:38 · 1251 阅读 · 0 评论 -
H5开发页面输入框被软键盘弹出时顶起解决
文章目录问题描述方法1.方法2问题描述当我在输入框中输入数据时,自带的键盘会把输入框挤出原来的位置方法1.设置html和body高度,之后将按钮相对于body定位 (这里的body需要设置高度为100%):html,body{ position:relative; height:100%; min-height:100%;}button{ position:absolute; bottom:0;}方法2...原创 2020-08-22 08:49:47 · 3182 阅读 · 0 评论 -
关于H5开发
文章目录H5开发概念H5开发概念什么是H5开发,H5开发的应用场景H5开发=移动端页面开发具有移动端自适应能力,简单来说就是H5页面会根据不同的手机屏幕尺寸进行适配,以达到不同屏幕的最佳显示效果。应用场景答题测试、投票、用户调研等好友生日祝福,节日祝福,宴会邀约等各种活动发布。通过微信及微信朋友圈发布移动营销宣传,包括商家优惠券,商家最新活动宣传等就是开发这样的...原创 2020-08-21 17:03:14 · 505 阅读 · 0 评论 -
前端常用的reset.css样式
文章目录css文件scss文件css文件/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */ html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cit原创 2020-08-03 10:37:21 · 1610 阅读 · 0 评论 -
Chrome DevTools中css的调试
文章目录查看本地更改查看本地更改如果同一个文件改变的多的话,不知道到底哪个元素属性改变了可以用这个方法1. 点击右边的文件,转到sources工具栏2. 在黄色背景上右键3.选择本地更改粉色背景的线表示移除,绿色背景的线表示添加。参考Chrome Devtools 高级调试指南(新)...原创 2020-08-03 10:18:46 · 336 阅读 · 0 评论 -
谷歌浏览器devtools调试javascript代码方法
文章目录Chrome渲染分析之Rendering工具使用Chrome设置断点的各种姿势, js断点调试心得, Chrome DevTools 中调试 JavaScript 入门在 Chrome DevTools 中调试 JavaScript 入门原创 2020-07-31 21:03:10 · 361 阅读 · 0 评论 -
前端常用框架UI组件
文章目录移动端UI组件pc后台UI框架pc端开发PC和移动端常用轮播或滑动组件mescroll上拉刷新,下拉加载框架移动端UI组件mint-uivantpc后台UI框架elementbootstrapeasyUILuLu UI框架EasyUI是一个UI框架,所以它的功能就是用于处理页面的展示效果的。通常用于完成后台管理系统的页面排版。pc端开发elementUI + vue.jsPC和移动端常用轮播或滑动组件1.SuperSlide(PC)/Tou原创 2020-07-30 17:22:01 · 1567 阅读 · 0 评论 -
css中的 +,~, >
文章目录css中的选择器~(波浪号)+(加号)\>(大于号)css中的选择器~(波浪号)p~ul选择器 p之后出现的所有ul。两种元素必须拥有相同的父元素,但是 ul不必直接紧随 p。P~ul { background-color: pink; }<p>快乐生活</p> <ul> <li>生活</li> <li>生活</li> &原创 2020-07-30 11:23:52 · 10343 阅读 · 2 评论 -
css使用clac()垂直居中
文章目录一个项目中老出现clac()不知道怎么用其中一个用法是垂直居中后面的20px是你要居中盒子的高度和宽度//实现水平垂直居中 position: absolute; top: calc(50% - 20px); left: calc(50% - 20px);...原创 2020-07-29 17:54:37 · 598 阅读 · 1 评论 -
css--nth-child选择器
文章目录nth-child 的定义是: 选择器匹配父元素中的第 n 个子元素,元素类型没有限制。n 可以是一个数字,一个关键字,或者一个公式。这里首先知道,前面是一个选择器,如果选择到一个节点,然后会去找他的父级容器。然后再找到这个父级元素的指定元素。<body><!--<h1>这是一个标题</h1>--><p>这是第一个段落。</p><p>这是第二个段落。</p><p>这是第三原创 2020-07-29 11:25:28 · 209 阅读 · 0 评论 -
Webkit内核的浏览器
文章目录Webkit是一个开源的浏览器引擎,与之相对应的引擎有Gecko(Mozilla Firefox 等使用)和Trident(IE 使用)。Google Chrome 谷歌浏览器Safari浏览器搜狗高速浏览器遨游浏览器3QQ浏览器360极速浏览器世界之窗浏览器阿里云浏览器WebKit是一个开源的项目。...原创 2020-07-29 08:34:31 · 923 阅读 · 0 评论 -
媒体查询,常用设备尺寸
pc端全屏@media screen and (min-width:1200px){ #shishi { height: 200px; width: 200px; background: #000; } }手机端/*phone<768 小屏,字体黑色,背景蓝色*/ @media s原创 2020-07-28 20:52:16 · 795 阅读 · 0 评论 -
css3-calc()方法
文章目录calc()语法calc()的运算规则浏览器的兼容性应用解决盒子撑破calc()用于自适应布局calc()语法calc()语法非常简单,就像我们小时候学加 (+)、减(-)、乘(*)、除(/)一样,使用数学表达式来表示:.elm { width: calc(expression);}其中"expression"是一个表达式,用来计算长度的表达式。calc()的运算规则calc()使用通用的数学运算规则,但是也提供更智能的功能:使用“+”、“-”、“*” 和 “/”四原创 2020-07-28 17:07:24 · 110 阅读 · 0 评论 -
git push遇到错误: [rejected]master -> master (non-fast-forward)的解决方法
向远程仓库推送时遇到! [rejected] master -> master (non-fast-forward)”可能的原因:要推送的文件里与远程仓库里的文件有冲突,就是有相同文件名的文件;解决方法:git pull origin master --allow-unrelated-histories //把远程仓库和本地同步,消除差异git add .git commit -m '***'git push origin master...原创 2020-07-28 10:13:43 · 362 阅读 · 0 评论 -
flexible.js-移动端H5页面适配应用
文章目录flexible.js仓库vscode插件 px转rem插件 cssrem步骤1. 下载flexible.js步骤2.页面引入步骤3.把视觉稿中的px转换成rem前端页面适配有两大方向:一是布局适配,可以使PC、手机、平板共用一份代码,实现方法有css 媒体查询、css 弹性盒子布局、 css grid布局等。二是高清适配,面对的是移动开发中设备不同分辨率和不同尺寸,最大限度还原设计稿效果。flexible.js是高清适配的一种方法,它通过javascript根据不同设备的dpr值和设备宽度原创 2020-07-25 17:02:39 · 542 阅读 · 0 评论 -
css常用的水平居中
文章目录css常用的水平居中1. `margin: 0 auto;`法(居中元素为块级元素)2. 居中元素为行内元素(`text-align:center` )3. 块级元素宽度不确定,(`display:inline-block 改变模型`)4. 利用定位实现水平居中(已知宽度)5. 利用`absolute`定位,`translate` 实现水平居中(未知宽度)6. flex 布局实现css常用的水平居中1. margin: 0 auto;法(居中元素为块级元素)没有设置宽度的话,会独占一行2原创 2020-07-22 18:04:02 · 252 阅读 · 0 评论 -
css常用的垂直居中
文章目录css常用的垂直居中1.父相子绝--给定子盒子的尺寸(`margin`)2.父相子绝--可以不给定子盒子的尺寸(`transform` )3.父相子绝--(`margin: auto`)4. 父元素使用(`padding`)5. 父盒子使用flex布局6.单行文本居中7. 图片居中8. 对容器里的文字进行垂直居中css常用的垂直居中这里是引用1.父相子绝–给定子盒子的尺寸(margin)父盒子相对定位,子盒子绝对定位使用前提必须提前知道被居中块级元素的尺寸,否则无法准确实现垂直居中原创 2020-07-22 17:32:47 · 98 阅读 · 0 评论 -
前端css在线生成工具
应用场景例如 我想用一个带阴影的盒子,直接在网站输入对应的参数就可以生成直接复制就可以使用https://css3generator.com/在线测试html+css+js网站https://codepen.io/在线按钮生成网站https://css-tricks.com/examples/ButtonMaker/#背景渐变工具网站https://www.colorzilla.com/gradient-editor/边框阴影盒子阴影https://www.cssmatic.com.原创 2020-07-22 16:17:46 · 1398 阅读 · 0 评论 -
GET 和 POST 方法的区别
文章目录1、发送的数据数量2、安全性3、加入书签中4、编码5、可变大小6、缓存7、主要作用1、发送的数据数量在 GET 中,只能发送有限数量的数据,因为数据是在 URL 中发送的。在 POST 中,可以发送大量的数据,因为数据是在正文主体中发送的。2、安全性GET 方法发送的数据不受保护,因为数据在 URL 栏中公开,这增加了漏洞和黑客攻击的风险。POST 方法发送的数据是安全的,因为数据未在 URL 栏中公开,还可以在其中使用多种编码技术,这使其具有弹性。3、加入书签中GET 查询的结果可原创 2020-07-17 10:40:31 · 146 阅读 · 0 评论 -
阿里图标使用方法
文章目录1 Font class方法2 在线的方式1 Font class方法下载到本地导入到项目目录中2.html中引用<link rel="stylesheet" type="text/css" href="./iconfont.css"/>标签中引用 <span class="iconfont icon-xxx"></span>2 在线的方式获取在线链接html中引用 <link rel="stylesheet" ty原创 2020-07-16 11:09:35 · 878 阅读 · 0 评论 -
HTTP协议-前端2
文章目录HTTP工作原理GET和POST请求HTTP 的三次握手TCP的几个状态 (SYN, FIN, ACK, PSH, RST, URG)TCP四次挥手TCP为什么建立链接是三次,关闭链接是四次呢?接着上篇的写,上篇的地址在这HTTP协议-前端HTTP工作原理例如:在浏览器地址栏键入URL,按下回车之后会经历以下流程:1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;2、解析出 IP 地址后,根据该 IP 地址和默认端口 80,和服务器建立 TCP 连接;3、浏原创 2020-06-12 21:02:16 · 132 阅读 · 0 评论 -
HTTP协议-前端
文章目录主要特点URL请求-响应模型跨域HTTP 缓存Cache-Control头域HTTP 缓存 ETAG 和 Last-Modified 资源验证HTTPSHTTP之响应消息ResponseHTTP之状态码HTTP请求方法GET和POST请求的区别大三上学期学过计算机网络,只记得三次握手,四次握手…概念都忘完了,在复习一遍吧为找工作打好基础。HTTP是一个基于TCP/IP通信协议来传递数据(HTML 文件, 图片文件, 查询结果等)。主要特点1、简单快速:客户向服务器请求服务时,只需传送请求原创 2020-06-12 11:18:26 · 274 阅读 · 0 评论 -
CSS - 定位属性position使用详解(static、relative、fixed、absolute)
一、position 属性介绍(1)position 属性自 CSS2 起就有了,该属性规定元素的定位类型。所有主流浏览器都支持 position 属性。(2)position 的可选值有四个:static、relative、absolute、fixed。下面分别进行介绍。(其实还有个 inherit,不过这个是 IE 特有的,这里就不做讨论)二、position: static(默认值)1,基本介绍(1)static 是默认值。表示没有定位,或者说不算具有定位属性。(2)如果元素 po.转载 2020-05-14 09:18:24 · 325 阅读 · 0 评论 -
MongoDB安装详细教程(2020最新版)
最新版你可以get怎么启动怎么配置指定路径数据库以及端口成功判断发现如果你百度的话有各种安装教程但是不太对,出篇教程吧不管你把MongoDB安装在D盘还是C盘都需要在C盘新建data文件夹,除非自己配置路径自己配置指定路径和端口mongod --dbpath "D:\MongoDB\data\db" --port 123在这已经默认你安装好了,接下来要做三件事在C盘...原创 2020-04-26 15:48:54 · 5227 阅读 · 0 评论 -
npm配置淘宝镜像的两种方法
文章目录cnpm命令npm命令NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。由于新版的nodejs已经集成了npm,所以之前npm也一并安...原创 2020-04-24 16:24:59 · 5754 阅读 · 0 评论 -
深拷贝 &浅拷贝
本文主要讲一下 js的基本数据类型以及一些堆和栈的知识和什么是深拷贝、什么是浅拷贝、深拷贝与浅拷贝的区别,以及怎么进行深拷贝和怎么进行浅拷贝。本文思维导图如下:本文思维导图堆和栈的区别其实深拷贝和浅拷贝的主要区别就是其在内存中的存储类型不同。 堆和栈都是内存中划分出来用来存储的区域。栈(stack)为自动分配的内存空间,它由系统自动释放;而堆(heap)则是动态分配的内存,大...原创 2020-04-22 10:10:58 · 113 阅读 · 0 评论 -
多列等高布局
多列等高布局1、使用负margin-bottom和正padding-bottom对冲实现html<ul class="Article"> <li class="js-article-item"> <p> 一家将客户利益置于首位的经纪商, 为客户提供专业的交易工具一家将客户利益置于首位的经纪商, ...原创 2020-04-03 16:49:15 · 128 阅读 · 0 评论 -
双飞翼布局
双飞翼布局双飞翼布局和圣杯布局很类似,不过是在middle的div里又插入一个div,通过调整内部div的margin值,实现中间栏自适应,内容写到内部div中。这样可以先做好主体部分,然后再将附属部分放到合适的位置!双飞翼布局增加了一个div,widht=100%,height=100%div用margin 0 rightWidth 0 leftWidth,来实现自适应没有用到p...原创 2020-04-03 15:15:55 · 93 阅读 · 0 评论 -
html&css圣杯布局
html&css圣杯布局圣杯布局其实和双飞翼布局是一回事。它们实现的都是三栏布局,两边的盒子宽度固定,中间盒子自适应,也就是我们常说的固比固布局。它们实现的效果是一样的,差别在于其实现的思想。左右侧的盒子固定,中间盒子自适应,而且中间盒子的内容完全不受影响看图方法父元素的的三栏务必先写中间盒子,因为中间盒子是要被优先渲染嘛~并且设置其自适应,也就是width:100%。...原创 2020-04-02 17:03:17 · 217 阅读 · 0 评论 -
Uncaught TypeError: Cannot set property 'onclick' of null
问题Uncaught TypeError: Cannot set property ‘onclick’ of null由于js文件放到head标签内浏览器先加载完按钮节点才执行JS,当浏览器自顶向下解析时,找不到onclick绑定的按钮节点了解决方法1.把script标签放在底部解决方法2.把JS内容用window.οnlοad=function(){ }包裹起来<!DO...原创 2020-03-15 08:20:15 · 251 阅读 · 0 评论 -
ERROR in ./src/main.js Module not found: Error: Can't resolve 'vue' in 'C:\Users\土豆\Desktop\vueConfi
问题描述,缺少vue模块ERROR in ./src/main.jsModule not found: Error: Can’t resolve ‘vue’ in ‘C:\Users\土豆\Desktop\vueConfig3\src’@ ./src/main.js 1:0-21 7:0-3 19:4-7i 「wdm」: Failed to compile.解决cnpm i vue...原创 2020-03-04 10:58:29 · 10687 阅读 · 0 评论 -
webpack开发vue起步
webpack 开发vue项目起步新建项目并且初始化init -y安装webpack,webpack-cli cnpm i webpack webpack-cli -D新建图中箭头文件[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V4bnsC1l-1583281786721)(C:\Users\土豆\AppData\Roaming\Typora\typ...原创 2020-03-04 08:39:56 · 98 阅读 · 0 评论 -
webpack打包起步
webpack打包起步新建项目webpack-studyvscode打开在终端输入npm init -y,会出现package.json文件安装webpack命令cnpm install --save-dev webpack会自动生成node_modules文件夹安装webpack-cli命令cnpm i webpack-cli -D安装cnpm install --save-de...原创 2020-03-03 11:28:34 · 146 阅读 · 0 评论 -
ERROR in Entry module not found: Error: Can't resolve './src' in 'C:\Users\土豆\Desktop\webpack-study'
问题:ERROR in Entry module not found: Error: Can’t resolve ‘./src’ in ‘C:\Users\土豆\Desktop\webpack-study’如图解决var path = require('path');module.exports = { entry: path.join(__dirname, './src...原创 2020-03-02 08:18:22 · 7821 阅读 · 1 评论 -
码云上传项目详细教程
码云上传项目详细教程已经下载安装好git bash一.已经配置公钥和用户名邮箱前提下 1,git init 2, git remote add origin "你的项目地址(刚才在码云上创建的)" 3, git pull origin master 4, git add . 5, git commit -m "第一次提交" 6, git push origin master ...原创 2020-02-08 11:26:26 · 581 阅读 · 0 评论 -
Html里的相对路径和绝对路径
Html里的相对路径和绝对路径有时候link里的href路径分不清是相对路径还是绝对路径,不知道路径怎么写,现在总结一下第一种情况info.html路径是:c:\Inetpub\wwwroot\sites\blabla\info.htmlindex.html路径是:c:\Inetpub\wwwroot\sites\blabla\index.html在info.html加入ind...原创 2020-01-06 14:23:33 · 294 阅读 · 0 评论 -
块标签,行内标签,行内块标签的总结
块标签,行内标签,行内块标签的总结自用备忘块标签:div p h1-h6 hr ul ol li dl dd dt form ①支持宽高,自上而下排列 ②不受空格影响 ③一般用于其他标签的容器 ④默认宽度为100%(独占一行)。行内标签:span i a b strong em sub sup u label br ...原创 2019-12-09 15:54:31 · 174 阅读 · 0 评论 -
JavaScript命名规范
备忘原创 2019-11-24 17:03:09 · 118 阅读 · 0 评论