0

前端基础:自适应布局之rem布局基础

开启一个移动端项目的基础,首先是想好如何在代码中实现移动端适配。之前没有经验,第一个项目里简单粗暴地采用px写死的方法,觉得不好,本项目采用的是像一位优秀同事习得的rem布局方法,它可以自适应不同屏幕尺寸的设备,简单好用。这里我们要用到两种单位:1.vw: viewport width,相对于视口的宽度;1vw为视口宽度的1%,100vw为设备的宽度;2.rem: 相对于根元素html的字体大小的单位;比如2rem=2倍的根字体大小。rem布局非常简单,其基本原理就是根据屏幕不同的分辨率,动态修改根字体的大小,让所有的用rem单位的元素跟着屏幕尺寸一起缩放,从而达到自适应的效果。拿我的项目来举...

阅读全文>>

0

软件更新丨Spring Boot 2.1.8 发布

Spring Boot 2.1.8 发布了,更新内容如下: New Features添加了 Issuer Validation 的其他资源服务器配置 #17952在依赖关系管理中公开依赖管理插件版本 #17842Bug Fixes使用未命名为 flywayInitializer 的自定义 FlywayMigrationInitializer bean 的 NoSuchBeanDefinitionException #18105使用未命名为 flyway 的自定义 Flyway bean 的 NoSuchBeanDefinitionException #18102使用 Netty 时,无效的内容...

阅读全文>>

0

PHP聊天uckChat 1.0.7

DuckChat是一款安全的私有聊天软件,基于PHP环境,可运行在Docker、Linux、Windows、MacOS等各种平台上,它帮助我们简化企业办公、客服系统、互联网创业,提供了完善的IM相关功能,并提供Android/iOS/Web多客户端。目前支持的功能列表———————————-支持语音、文字、图片类型的消息支持个人、群组聊天支持好友关系管理、通讯录支持站点管理、多站点同时连接支持多种数据库,应对不同用户量级新版本即将支持———————————-文件传输视频消息群组禁言和豁免发言人阅后即焚

阅读全文>>

0

详解如何实现前端ajax的jsonp,看完这篇这个知识点就可以翻页了

前言上一篇文章我们主要聊了一下如何实现一个ajax,但是由于文章篇幅有限并没有聊到JSONP,它也是ajax重要的组成部分,所以这篇文章我们一起来看看如何实现一个JSONP。为什么需要JSONP?因为浏览器同源策略的存在,在跨域时,XMLHttpRequest对象发起的请求是不被浏览器允许的,浏览器的控制台会出现一堆错误信息!那么什么是跨域呢?当页面请求一个接口,此时页面的地址和接口的协议、域名和端口都相同时就叫做同源,其他情况都是跨域。那么JSONP的作用就是即使在跨域的情况下,ajax依然能正常发送和接受请求!JSONP的原理想一想,咱们维护的网站页面引入的外链js都是同源的吗?显然不全是...

阅读全文>>

0

网站登陆页面设计灵感

网页的登录注册页所包含的信息非常有限,但通过使用图片、插画等内容,针对信息巧妙地产生视觉引导,就能让原本单调的页面更加丰富和统一。一起来欣赏下面这组网页登录页面设计。通过上面的这组页面设计,希望能够给大家带其灵感,当然国外的页面设计不一定完全适合我们,但值得借鉴的地方还是有很多!

阅读全文>>

0

好用到爆炸的配色网站!让你秒变配色高手

作为一名专业的设计师,只分享一个爆炸的配色网站!我所有的配色方案上面都有!这个网站全涵盖了!绝对神器!不仅仅有色板、渐变、流体渐变提供下载、还有传图配色,这个网站还要很多无版权图库。做设计需要的各方面东西全都有!搜图导航:91sotu.com利用它你可以做出这样的页面:这样的而且这个网站的配色功能是全免费的:1、配色板配色板板有10000+种喜欢的色板可以收藏以及直接复制颜色如果看见喜欢的可以点击进入详情,有相同色的推荐。能人你非常快的找到自己需要的色彩风格。2、渐变色这个网站有7000多种优质渐变方案提供下载。全部是高清大图,并且可以复制渐变代码。下载这渐变做出来的界面是这样的大家可以自己去...

阅读全文>>

0

关于10月22日发布的78版本Chrome关闭鼠标悬停显示网页title功能

关于10月22日发布的78版本Chrome引入了新的功能,比如鼠标悬停标签上时,会显示网页的title,而且显示面积还很大,比较显眼,我个人还是不习惯这种功能,感觉多余的窗口占用了网页显示,这里提供一种关闭这个功能方法。这个就是谷歌发布的新的版本所带来的标题展示以下为解决方法:chrome://flags/#tab-hover-cards第一步复制代码内容:chrome://flags/#tab-hover-cards第二步:复制的代码粘贴到地址栏处。第三步:选择Tab Hover Cards 给后面的选择项改为disabled第四步:完成点击下方的Relaunch 重启浏览器

阅读全文>>

0

前端图片上传那些事儿

前言本文讲的图片上传,主要是针对上传头像的。大家都知道,上传头像一般都会分成以下 4 个步骤:选择图片 -> 预览图片 -> 裁剪图片 -> 上传图片接下来,就详细的介绍每个步骤具体实现。一、选择图片选择图片有什么好讲的呢?不就一个 input[type=file] ,然后点击就可以了吗?确实是这样的,但是,我们想要做得更加的友好一些,比如需要过滤掉非图片文件, 或只允许从摄像头拍照获取图片等,还是需要进行一些简单配置的。下面就先来看看最简单的选择图片:这时候,点击这个 input , 在 iOS 手机的显示如下:其中的 “浏览” 选项,可以查看到非图片类型的文件,这并不是我...

阅读全文>>

0

一组开源免费的Web动画图标,荐给需要的设计师和程序员

介绍 titanic是在Github上开源的一组免费的动画图标,可以将其简单的运用到网页中,而且代码及其简单,但是动画效果却很不错,动画图标和静态图标的不同之处在于它可以让你的网页更加富有活力,让产品更加具备视觉吸引力,一起来看看! 开源首页 https://github.com/icons8/titanic 如何安装使用? 安装使用及其简单,可以通过CDN或npm安装它: npm install titanic-icons --save 将代码引入你网页的he...

阅读全文>>

0

案例讲解 | 移动端的长表单应该如何设计?

基于业务需求(常见于B端产品),有时候用户在操作过程中,不可避免的需要填写很多表单。针对于移动端长表单,我们应该如何去正确的设计呢?本文大纲:1.三种主方案2.主方案1的设计讨论3.主方案2的设计讨论4.主方案3的设计讨论5.总结1.三种主方案针对长表单的设计,按照设计思路的不同,可以分为三种主方案,如下所示:PS:图中的举例的关键字段仅仅为举例需要。主方案1:我们常见的设计形式,一个界面将所有表单信息展示出来。主方案2:将不同的分组表单放在不同的下一级界面,用户填写之后返回。主方案3:分步操作,一个界面完成一组表单内容,点击下一步进入下一组表单。2.主方案1的设计讨论主方案1的设计优缺点优点...

阅读全文>>