【Web前端】
文章平均质量分 55
Anabel Chen
世上之事,只该难得,不该易得,易得之事易失去,难得之事难失去!
展开
-
【web前端】23.解决内部div的margin影响外部div的margin
有一个内部的div里面包含div..html<div id="container"> <div id="inner"></div></div>.css#container { width: 100px; height: 100px; background-color: red;}#inner {...原创 2020-04-08 13:17:45 · 4349 阅读 · 5 评论 -
【web前端】22.解决-webkit-overflow-scrolling:touch的bug
-webkit-overflow-scrolling:touch用来控制元素在移动设备上是否使用滚动回弹的效果,兼容Android和Ios的写法如下:overflow:auto;/* winphone8和android4+ */-webkit-overflow-scrolling: touch; /* ios5+ */取值auto:使用普通滚动,当手指从触摸屏上移开,滚动会立即停止...翻译 2019-11-14 13:08:06 · 2904 阅读 · 0 评论 -
【web前端】14.手机页面不允许缩放
手机页面不允许缩放要在meta标签里面添加user-scalable=no<meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">翻译 2019-01-27 20:20:43 · 1085 阅读 · 0 评论 -
【web前端】15.input输入框的一些问题
一.input输入框怎么禁止粘贴<input type="text" value="" onpaste="return false;" /> 二.IOS上input只读模式下点击有反应的解决方法 <input class="authentication-id-input" type="text" v-model="authent...翻译 2019-04-26 11:13:59 · 1020 阅读 · 0 评论 -
【web前端】16.实现点击回到页面底部/顶部
<script src="js/jquery-3.3.1.min.js"></script><script> $(document).ready(function () { $('#go_up').click(function () { console.log('go_up'); ...翻译 2019-06-13 10:12:37 · 2677 阅读 · 0 评论 -
【web前端】17.实现点击跳转锚点部分(vue)
<div class="big-data-content-bottom"> <section class="content-bottom-one" id="one"> <p class="content-bottom-one-title">平台技术框架</p> <p c...翻译 2019-06-13 10:26:34 · 2716 阅读 · 0 评论 -
【web前端】18.web网页中实现点击下载功能
JS实现html页面点击下载文件有两种方式:(1) 使用<a>标签来完成<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>(2)使用按钮进行监听 goDownload() { // 判断用户入口的平台类型 const cl...翻译 2019-06-13 10:38:35 · 3707 阅读 · 0 评论 -
【web前端】19.手机分享网页链接的描述,标题,图片的控制
(1)微信微信中可以通过微信提供的jssdk进行配置,详细文档参考微信JS-SDK说明文档(2)QQ在手机qq中可以直接配置meta标签进行配置我们在qq聊天中有时候给朋友发一个链接,我们看到的是卡片类型,在meta标签里面设置,就可以自定义卡片的文字及图片信息,如下图所示,QQ获取分享信息的规则在QQ开放平台里面里面有具体说明:腾讯移动WEB开发平台,文档说可以通过js配置,但是...翻译 2019-06-13 17:30:20 · 2253 阅读 · 1 评论 -
【web前端】20.手机端网页禁止长按图片保存图片
最近做项目遇到一个问题,就是img图片长按会从底部弹出来保存图片的弹框,因为页面上不需要这个功能,所以产品要求去掉,解决这个问题,有两种方法:1. 利用css img属性img {pointer-event:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;}2. 设置背景图片用div层的ba...原创 2019-07-15 11:10:22 · 7641 阅读 · 0 评论 -
【web前端】21.解决Android端垂直不居中的问题
对一个元素设置了line-height等于height垂直居中,但是在android浏览器上总会偏一点,这个问题可以使用flex布局,字体大小设置为偶数,如果字体大小一定要奇数的话,可以利用js判断当前是android机型还是ios机型。垂直可以flex布局: display:flex; align-items:center;/*垂直居中*/ justify-content: ...原创 2019-10-08 15:08:17 · 4078 阅读 · 0 评论 -
【web前端性能优化】13.城市三级联动
最近做项目遇到一个城市三级联动的前端问题,感觉一个城市三级联动如果引入一个jquery库,有点太重了,于是就在网上找到了原始的js写法,感觉还挺好用的就记录一下,如下图所示:pay.html<h3>确认收货地址 </h3><div class="control"> <div class="tc-btn createAddr theme...原创 2018-08-02 16:33:26 · 9569 阅读 · 0 评论 -
【web前端自动化工作环境配置】6. 版本控制工具git与githup的区别与联系以及git的基本用法
最近项目里面在用Git提交代码,刚开始的时候对这个工具也不是很了解,业余时间抽空就学习了一下。Git是一个源代码管理工具,便于大家协同开发,在一个项目中,凡是由开发人员编写的代码都是源代码,都需要被管理起来,让源代码容易被追溯,主要记录每次变更了什么,谁主导了这次的变化,由于人为的维护比较麻烦,Linux之父当年为了维护管理Linux的源代码就开发了Git这个工具,用来记录源代码的所有变更情况...原创 2017-07-11 22:05:18 · 759 阅读 · 0 评论 -
【web前端自动化工作环境配置】11. 生产环境的适配
最近项目上线了,对上线前的准备做一下总结,开发环境上所写的代码只能是在开发环境上做预览,离上线到生产环境还是有一些工作要做的,首先是生产环境的适配,在做生产环境适配的时候,要从如下几点:(1)添加favicon这是网站的一个标志,favicon和下面要说的dns-prefetch都是要放到head标签里面,所以可以在如下的代码里面写:但是我们webpack里面用了一个HtmlWe原创 2017-10-26 16:58:08 · 1079 阅读 · 0 评论 -
【web前端自动化工作环境配置】2.网页固定宽度且居中的的版式
宽度固定且居中的版式是网络中最常用的排版方式之一,先写一段代码再逐一解释。 <style type="text/css"> body,html{margin: 0;text-align: center;} #container{position: relative;margin: 0 auto;width: 700px;text-align: ...翻译 2016-03-08 17:37:53 · 1752 阅读 · 0 评论 -
【web前端自动化工作环境配置】3.CSS中的绝对定位与相对定位
层级关系为:<div ——————————— position:relative; 不是最近的祖先定位元素,不是参照物<div—————————-没有设置为定位元素,不是参照物<div———————- position:relative 参照物<div box1<div box2 ——–position:absolute; top:50px; left:12...转载 2016-04-26 15:44:23 · 294 阅读 · 0 评论 -
【web前端自动化工作环境配置】5. 解决git commit不成功,报错Please tell me who you are.的问题
今天在学习git的时候,遇到了一个问题,就是git commit不成功,认真分析了一下报错原因,原来是git没有配置的原因。找到git目录下的Git Bash运行,输入下面的两行代码运行即可: git config --global user.email "you@example.com" git config --global user.name "Your Name"原创 2017-07-11 11:53:28 · 1602 阅读 · 0 评论 -
【web前端自动化工作环境配置】4.gulp工作流
1.命令行创建npm的配置文件(a)npm init完成以后项目根目录下会出现一个package.json文件,如下图所示:2.添加一个gulp的依赖(a)npm install gulp --save-dev安装完成后,项目的根目录下会有一个node-modules的文件夹,package.json中会有gulp的依赖,如下图所示:原创 2017-07-03 22:22:56 · 388 阅读 · 0 评论 -
【web前端自动化工作环境配置】7. 解决安装chrome batarang调试工具中遇到的问题
AngularJS Batarang是AngularJS在谷歌浏览器上的一个调试工具,因为国内目前无法访问谷歌浏览器应用商店,所以Batarang只能离线安装。不过在安装这个插件的过程中遇到了一些麻烦。首先这个工具可以通过两种方式安装,一种是通过.crx文件安装,另外一种是从Batarang的官方github上面下载,地址 https://github.com/angular/batarang/r原创 2017-07-14 11:38:51 · 1156 阅读 · 0 评论 -
【web前端自动化工作环境配置】8. 依赖管理工具bower的基本用法
Bower是前端自动化的一个包管理工具,和npm差不多,都是对项目所依赖的包进行管理,比如jQuery,bootstrap等,下面就来简述一下bower的基本用法:(1)安装bowernpm install -g bower //全局安装bowernpm install bower //具体工程项目安装(2)查看bower是否安装成功,出现版本号则说明安装成功bower -v原创 2017-07-14 13:33:19 · 418 阅读 · 0 评论 -
【web前端性能优化】12.css sprite(图片精灵)-雪碧图实现原理
CSS雪碧 即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。举个应用的实例:这是淘宝网的分类导航实例,每个目录的前面都会有一个图标,实现这个图标的方法有两种,一种是直接使用image标签,对每个需要图标的地方都设置一个image标签,这种方法的缺点是需要很多的请求来获取图片,因...翻译 2017-10-31 10:12:20 · 3938 阅读 · 0 评论 -
【web前端自动化工作环境配置】9. Git SSH key生成步骤及码云配置方法
Git是分布式的代码托管工具,远程的代码管理是基于SSH的,所以要使用远程的git则需要SSH的配置。码云的SSH配置如下:一、设置git的user name和email用户名和邮箱地址是本地客户端的一个变量,不随git库而改变,每次commit都会用用户名和邮箱记录,github的contribution统计都是按邮箱来统计的。$ git config --global user....翻译 2017-07-17 19:05:22 · 2887 阅读 · 0 评论 -
【web前端自动化工作环境配置】10. RequireJS总结
RequireJS已经流行很久了,我们在项目中也曾经使用过它,现在有空就做一下总结:1、声明不同js之间的依赖2、可以按需,并行,延时载入js库3、可以让我们的代码以模块化的方式组织初看起来并不复杂一、在html中引入require.js在html中,添加这样的标签 通常使用requirejs的话,我们只需要导入requirejs即可,不需要显式导入其他的js库,翻译 2017-10-26 14:12:08 · 547 阅读 · 0 评论 -
【web前端自动化工作环境配置】1.网页屏幕自适应问题
最近一段时间学做网页,遇到了网页屏幕适配的问题,做的网页不能随着屏幕的缩小而缩小,浏览器缩小,网页就会显示不全,为了解决这个问题,自己也琢磨了几天,也算有了结果,自己也做了如下总结: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl原创 2016-03-08 14:03:49 · 1094 阅读 · 0 评论