web
coder_xsy
这个作者很懒,什么都没留下…
展开
-
html快速入门
1:基本结构<!doctype html><html> <head> <title>rollover</title> <script src = "rollover.js"></script> <link rel = "st原创 2018-02-28 11:22:13 · 480 阅读 · 0 评论 -
react-router主动(js控制)路由跳转
使用场景:在用户进行一系列操作之后,满足条件之后需要自动跳转到其他的路由,而不是需要用户点击跳转按键操作,最常见的场景就是在登录页面设计的是时候,用户填写信息点击登录之后,数据发送给后台验证,返回验证通过的字段之后,这时页面不需要用户再点击,自动跳转到其他页面;这个时候使用react-router提供的Link组件是不满足需求的:在网上找了一些方法:参考:https://segment...原创 2019-04-13 11:40:02 · 12673 阅读 · 0 评论 -
文本超出容器后省略号显示
在进行页面设计的时候文本一般是后台给的数据,无法确定它的长度,但是为了使文本的长度过长的时候不会影响容器大小,这个时候我们可能选择的方式是通过设置容器大小然后再设置它的overflow:hidden;但是这样就可能会显示滚动条,影响页面的美观,我们在网上看到的大多数方式都是通过使用省略号的形式,具体的css设置为:/*这里面有一个特别需要注意的地方,使用该效果的元素必须具有可计算的width...原创 2019-03-21 16:13:07 · 416 阅读 · 0 评论 -
宽度自适应布局
前端开发中宽度自适应是不可避免的问题,毕竟为了考虑到不同用户的显示终端的尺寸或者在PC端的时候用户主动改变浏览器窗口大小,所以在布局时就需要考虑到自适应宽度的问题。(如果直接冲UI提供的设计稿开始的话,不同的公司对于UI到具体代码的尺寸转换有不同的计算方式,所以这一步跳过,只考虑代码层面的自适应布局)通过的使用几个前端框架的总结:宽度自适应,底层都是使用的媒体查询,只不过不同框架或者公司会...原创 2019-03-14 17:05:27 · 7157 阅读 · 0 评论 -
create-react-app添加scss支持
之前使用了公司内部的框架进行开发,其中已经对于常用的一些配置已经搭建好了,目前没有在公司所以没法使用公司内网,所以只能通过create-react-app进行react开发,由于之前使用了scss开发样式,而且在使用scss比css更加方便,所以希望能够给脚手架工程添加scss支持,所以在网上找了一些回答:csdn:https://blog.csdn.net/qq_36245035/artic...转载 2019-02-20 15:42:53 · 1378 阅读 · 0 评论 -
react-router-dom的路径匹配 属性exact 与strict
在这里先介绍一个比较难以描述的坑在使用react-router的时候我首先就是先在react-router的官网上去看她的官方文档,然后按照上面的教程来在自己的react工程中使用react-router,但是基本应该会遇到问题,原因就是我们在使用npm安装react-router的时候基本是4.x版本,由于版本的问题有一些我们之前在其他人的项目中看见的一些属性没法使用,其实是由于官网上的教程...原创 2019-02-19 17:30:12 · 9572 阅读 · 0 评论 -
Dplayer后端
说实话,dplayer真的是一个很漂亮的播放器插件,但是这个插件需要后端支持才能正常实现弹幕功能,不幸的是这个插件的官网上面的那个后端接口已经GG了,所以无奈可能得自己搭建后台了但是网上总是有热心网友,写了dplayer弹幕后端搭建教程之外还分享了一个线上的搭建好了的后端接口https://www.moerats.com/archives/838/可以在上面博客中找到真的十分感谢佩...转载 2019-02-21 17:25:58 · 5981 阅读 · 1 评论 -
z-index无效的解决办法
今天在做移动端web页面开发的时候,由于UI方案的设计图需要部分层叠的效果,所以使用z-index,存在这种情况:使用z-index为负数实现了层叠效果,但是由于底层存在事件,但是由于z-idnex为负数,所以该块级元素处于body之下,导致事件无法触发,修改z-index为正,但是存在大小顺序之后可以触发事件,但是没有了层叠效果。查阅资料之后,发现了自己对z-index的了解存在误区。上面是在w...转载 2018-06-10 11:15:05 · 4820 阅读 · 1 评论 -
移动端大小自适应
在寻找font-boosting问题的答案时浏览到一篇关于自适应不同屏幕的方法:rem这个是移动端是很适用的,因为在移动端,我们不能在屏幕上拖拽改变浏览窗口的大小,所以在我们需要做的就是在加载的时候根据移动端的屏幕大小给屏幕中距离(width height margin padding font-size...)设置提供一个标准,解决办法就是在js的ready中根据屏幕大小设置html中的font...转载 2018-06-13 22:10:09 · 198 阅读 · 0 评论 -
font-boosting问题(移动端设置相同的font-size但是显示不对应)
在移动端页面开发中,使用一个css来设置元素中的font-size,但是对于同一个class设置,在不同元素中效果却不同,而且在调试的时候该表font-size发现也有相应,说明这个class有效果,但是在不同元素中却得到不同的效果,特别当元素中含有的文本元素数量差别较大时。在网上查找资料之后发现这个是一个叫font-boosting的问题,当文本数量太多,计算机认为在屏幕上显示这么多文本会导致用...转载 2018-06-13 21:58:55 · 1779 阅读 · 0 评论 -
JavaScript基础学习笔记(四)
JavaScript 的浏览器对象模型 (BOM Browser Object Model)1、获得浏览器窗口的尺寸对于非Explorerwidth=window.innerWidthheight=window.innerHeight对于Explorer 8 7 6 5width=document.documentElement.clientWidthheight=document.docume...原创 2018-03-05 21:24:21 · 159 阅读 · 0 评论 -
JavaScript基础学习笔记(三)
10、JavaScript 内置的对象 数字 Number 字符串 : String (不可更改字符串的内容,其中内置的函数只是会返回一个新的字符串) 时间: Date 应用:显示时钟 function showTime() { var now=new Date(); var h=now.getHours(); ...原创 2018-03-05 21:21:23 · 158 阅读 · 0 评论 -
JavaScript基础学习笔记(二)
更新一下JavaScript基础学习笔记(一)中的内容:5、函数 5.1、普通函数定义 function name(){ js代码块 } function name(x1,x2){ x1 和x2为参数 但是不用声明参数的类型 } function name(...原创 2018-03-05 17:15:36 · 128 阅读 · 0 评论 -
JavaScript基础学习笔记(一)
JavaScript 常用功能:1:写入html输出 document.write("<p>xxxx</p>");2:对事件做出反应(Javascript有特定的事件响应)3:改变html内容 例如 x.innerHTML="xxxx";4:改变html图像的大小或者改变图像的src;5:改变htmlm元素的属性即样式6:验证用户的输入(正则表达式或者是判断)1、Java...转载 2018-03-05 09:48:46 · 168 阅读 · 0 评论 -
CSS3学习笔记(一)
css1、边框1.1边框的样式:border:width style color;1.2边框四个角的半径border-top-left-radius:(top)#px/% (left)#px/%;border-top-right-radius:border-bottom-left-radius:border-bottom-right-radius:或者直接 border-radius:1.3边框阴...原创 2018-03-02 11:52:47 · 182 阅读 · 0 评论 -
CSS学习笔记(二)
11、浮动11.1使用属性float:right/left/none/inherit使用浮动属性会使该元素的内容不存在与普通流当中的位置,相对与不存在,所以不会包含在块级元素中,如果块级元素要实现包含的效果,需在内部添加一个普通流元素11.2使用clear:both/left/right/none;清除浮动清除浮动需要在块级元素周围的元素添加clear属性,指明了需要清除那一边的影响12元素尺寸h...原创 2018-03-02 11:49:08 · 119 阅读 · 0 评论 -
CSS学习笔记(一)
css声明:颜色表示 :关键词、 #111111、 rgb(50,40,30); 长度表示:px、 em、%...1、css的基本格式选择器{ 声明(属性:属性值; <如果属性值含有多个值时,用“”>)}2、选择器 2.1派生选择器 如 dt code{ color: red; } 表示dt中的code元素中的文本显示红色,其他的co...原创 2018-03-01 14:35:54 · 139 阅读 · 0 评论 -
遮罩层事件穿透&完全禁止底部内容滑动(touch/app/wx/www)
问题源自实践在touch和app端如果需要做一个嵌入的html页面,如果需要做弹窗的话一般需要使用一个遮罩层的,然后在遮罩层设计弹出窗的内容,一般弹出窗是active之后,底部的内容是需要完全静止的(数据更新除外哈),在遮罩上进行的操作不能渗透到底部去,这种情况一般体现在遮罩层滑动需要禁止底部内容滑动,这种情况我们一般的处理方法是在弹出事件中设置底部内容的over-flow:hidden,在关...原创 2019-08-18 15:24:38 · 3180 阅读 · 0 评论