1. overflow: scroll(平台兼容) 在Mac中的Chrome浏览器中,内容不超过容器时不会出现滚动条: 在Wins中的Chorme浏览器中,内容不超过容器时也会出现滚动条. 解决方法: overflow: auto…

Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和业务类.通用的CSS文件,放在如下目录中: 基本样式库 /css/core 通用UI元素样式库 /css/lib JS组件相关样式库 /css/ui 业务类的CSS是指和具体产品相关的文件,放在如下目录中: 读书 /css/book/ 电影 /css/movie/ 音乐 /css/music/ 社区…

1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: ? width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewport 的高度 (范围…

你也许已经掌握了id.class.后台选择器这些基本的css选择器.但这远远不是css的全部.下面向大家系统的介绍css中最常用的选择器,包括我们最头痛的浏览器兼容性问题.掌握了它们,才能真正领略css的巨大灵活性. 1.* * { margin: 0; padding: 0; } 星状选择符会在页面上的每一个元素上起作用.web设计者经常用它将页面中所有元素的margin和padding设置为0. *选择符也可以在子选择器中使用. #container * { border: 1px soli…

不多说,直接上代码: wxml页面: <!--收起折叠 begin--> <view style='width:100%;background:#fff;border-top:1px solid #d7d7d7;'> <view style='float:left;width:200px;height:90px;display:{{displaymore}}' bindtap='sourcelistshow'>全部课程</view> <view sty…

话说现在的手机型号越来越多,主要还是android和ios这2个巨头称霸了江湖,而他们自带的浏览器内核是webkit,那对于做移动网页开发的同事来说,一般只要做好webkit内核浏览器的展现效果就行了,看起来很简单,其实背后还有一个大坑等着你. 虽说是webkit内核,但页面的展现效果还会受到自身系统的影响,升级后的系统打了补丁,新增了新的属性,支持更多丰富炫丽的效果,那么旧的系统(未升级的)就不支持一些新的属性,开发哥哥就是没有做好低端版本兼容的话,就会产生所谓的bug的,再加上android…

1.CSS规范 - 分类方法 CSS文件的分类和引用顺序 通常,一个项目我们只引用一个CSS,但是对于较大的项目,我们需要把CSS文件进行分类. 我们按照CSS的性质和用途,将CSS文件分成“公共型样式”.“特殊型样式”.“皮肤型样式”,并以此顺序引用(按需求决定是否添加版本号). 公共型样式:包括了以下几个部分:“标签的重置和设置默认值”.“统一调用背景图和清除浮动或其他需统一处理的长样式”.“网站通用布局”.“通用模块和其扩展”.“元件和其扩展”.“功能类样式”.“皮肤类样式”. 特殊型样式…

前言 项目开发中,是避免不了使用小图标的,那么国内比较好用的图标网站当属iconfont了,下面我们将详细介绍如何使用. iconfont选择所需图标 1.iconfont官网 2.把所需要的添加进入购物车 3.添加所需图标完毕后,点击右上角的购物车图标 4.下载代码 5.下载的代码解压后 图片上圈起来的都是字体文件 6.项目中新建一个font文件夹用来放置字体文件 7.取出iconfont.css文件放入css文件夹 8.打开iconfont.css文件,配置正确的字体文件路径 // 这里要根…

关于软件开发中兼容win7注册表的解决方案   编写人:CC阿爸 2014-3-14 l  近来在开发一winform程序时,发现在xp 系统访问注册表一切正常.可偏这个时候,微软又提醒大家.Xp今年的4月份会寿终正寝了.因此必需要考虑到对win7的兼容. Win7在访问时,返回的注册表值,就是与实际看到的不一致. 经过在网上搜索部分解决方案,以下这位同学的解决方案才是正解,终于找到相关解决办法. 首先读取注册表要给用户管理员得权限.exe在Vista或Win7下不以管理员权限运行,会被UAC(…

Android学习开发中如何保持API的兼容: 1,采用良好的设计思路 在设计过程中,如果能按照下面的方式来进行设计,会让这个API生命更长久 面向用例的设计,收集用户建议,把自己模拟成用户,保证API设计的易用和合理 保证后续的需求可以通过扩展的形式完成 第一版做尽量少的内容,由于新需求可以通过扩展的形式完成,因此尽量少做事情是抑制API设计错误的一个有效方案 对外提供清晰的API和文档规范,避免用户错误的使用API,尤其是避免API(见第一节)靠后级别的API被用户知晓与误用 除此之外,下面…

webpack项目在开发环境中使用静态css文件 在webpack项目(本人使用的 vue-cli-webpack )中,需要引入 css 或 scss等样式文件时,本人目前知道的,通常有以下几种方法: 在js文件中import(假设已配好相关的loader) 如在main.js中import 'izitoast/dist/css/izitoast.min.css' 在自己写的 scss 等文件中 @import 如@import '../../assets/scss/widgets.scss'…

背景:随着手机的普及,现在移动开发很火爆,已经远远超过了pc端.在移动设备经常会发生用户发送的内容中包含emoji表情,在显示时就是乱码.一般是因为Mysql表设计时,都是用UTF8字符集的.把带有emoji的昵称字段往里面insert一下就没了,整个字段变成了空字符串.这是因为Mysql的utf8字符集是3字节的,而emoji是4字节,这样整个昵称就无法存储了. 现在介绍在PHP开发中涉及到emoji表情的三种处理方法:1)使用utf8mb4字符集如果你的mysql版本>=5.5.3,你大可直…

本文出自APICloud官方论坛, 感谢论坛版主 penghuoyan 的分享.   使用APICloud开发时,考虑到兼容问题一直使用ES5开发,时间越久感觉越落后,整理了一个兼容ES6的开发环境,供大家参考. 步骤1: 安装Node开发环境,不清楚的可以百度 步骤2: 新建APICloud项目,结构目录如下 步骤3: 在vscode中打开项目,如图: 步骤4: 在项目中安装Bable项目的npm包 1. npm init –y  生成package.json文件 2. npm install…

03-网页设计和开发中,关于字体的常识 #前言 我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰. 这篇文章,我们来讲一讲关于字体的常识.这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理.设计师不断重复沟通的. 字体真的只是"系统默认,无从解释"这么简单吗?是产品被忽悠?还是开发在敷衍?二者之间的博弈究竟谁能胜出?学会本文,你就能胜出. #字体分类 常见的字体可以分为两类:衬线体.无衬线体. 1.serif(衬线体):…

最近又搞了一波网站的兼容,由于要求ie浏览器还是要兼容到ie8,所以调起来还是各种蛋疼. 现在就post一些做兼容的总结,可能不够全面,但是可以告诉大家如何避过一些坑.主要测试了chrome,firefox,ie8.9.11,360浏览器. 一.基本的css兼容: 1.可能很多人喜欢用css hack的形式去兼容ie浏览器,但是我自己用起来感觉其实不好使 .ie7-就不考虑了,问题在哪呢,就在ie8的甑别上,你怎么让样式只对ie8起作用.上网搜你可能会得到这样的答案: .selector { c…

这篇文章挑选了15款在网站开发中很实用的 HTML5 & jQuery 插件,如果你正在寻找能优化网站,使其更具创造力和视觉冲击,那么本文正是你需要的.这些优秀的 jQuery 插件能为你的网站提供各种各样强大的功能和效果. 您可能感兴趣的相关文章 期待已久的2013年度最佳 jQuery 插件揭晓 小伙伴们都惊呆了!8个超炫的 Web 效果 10大流行的 Metro UI 风格 Bootstrap 主题 推荐35款精致的 CSS3 和 HTML5 网页模板 精选12款优秀 jQuery Aja…

我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需要用em或者是rem来替换掉px在前端开发中进行使用呢? 为什么我们需要使用相对字体大小呢? 或许我们最能直接想到的一点就是它关于CSS3的一些东西.很好理解的是它是一种字号计算方式,尤其是当你在为多种分辨率进行字号计算的时候.想想要在手机上实现字体变大或者变小的时候,你不得不要反复重新计算对象的字…

做前端最讨厌的就是 IE6,7,8,虽然被淘汰的浏览器,但是在中国用户仍然很多,不可能像国外网站一样直接就不管它了,这样会流失很多流量啊. 现在有了IE9,IE10还好些,几乎和 Chrome,Firefox 差别不大了,但是IE6,IE7,IE8还是要做单独兼容的,这里总结下兼容方法: 对于 IE6.IE7.IE8 进行 CSS 兼容方法可以看看这篇文章 http://blog.csdn.net/zhouzme/article/details/18901657 以下方法均在 IE6.IE7.I…

Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行.今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术. 初学者Web:介绍一些前端开发中的基本概念和用到的技术 A - AJAX AJAX 全称为"Asynchronous JavaScript and XML"(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.根据Ajax提出者Jesse James Garrett…

本篇博文会不断的收录我在做H5页面时遇到的问题以及解决方案,当然有的问题,我也没有遇到好的解决方案,所以如果你有解决的办法,请务必不吝赐教! H5开发中的故障       微信APP返回按钮不刷新页面       返回上一页       JSSDK 分享内容动态改变       JSSDK 跨域的分享链接 [..持续更新中..] 微信APP返回按钮不刷新页面 该问题出现在 iphone7的微信上,当一个活动存在多个页面,那么如果进入第二个页面时,再点击微信 app上的返回按钮,虽然可以返回 hi…

(一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" src="js/html5shiv.js"></script> <![endif]-->  html5shiv.js下载地址 https://github.com/aFarkas/html5shiv/releases2.ul标签内外边距问题ul标签在IE6\IE…

在实际开发上先的h5页面产品中,总会遇到各种坑,好多坑都是安卓和iPhone端兼容的问题(用电脑谷歌浏览器输入  chrome://inspect/#devices可以用手机USB调试,打开) eg: 软键盘弹出时会影响到的页面布局 如果在iframe中用到透明罩,想用fixed却失效? angular中如果用$scope控制布尔值来添加/删除类时,获取这个节点的坑 在获取用户头像等信息在canvas画图时加载的顺序 暂时遇到的问题,比较磨人一点(之后遇到会慢慢补充) 1. 对于h5页面产品,输…

近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写出规范标准的代码,符合SEO,做好用户体验. 以下是一些零度逍遥在平时工作中总结的一些前端开发中的SEO注意点,其实很多也是前端的基础知识,仅供大家参考. 1.网站布局要做到样式与页面分离,删除页面中不必要的标签和元素. 2.页面生成要尽量小,要压缩页面的大小,页面尽量使用静态或伪静态. 3.所有的…

前言 我们大前端团队内部 ?每周一练 的知识复习计划还在继续,本周主题是 <Hybird APP 混合应用专题> ,这期内容比较多,篇幅也相对较长,每个知识点内容也比较多. 之前分享的每周内容,我都整理到掘金收藏集 [?<EFT每周一练>] (https://juejin.im/collection/5cd11b0af265da0346227e24) 上啦,欢迎点赞收藏咯??. 注:本文整理资料来源网络,有些图片/段落找不到原文出处,如有侵权,联系删除. 一.什么是 Hybird…

前言 我们大前端团队内部 ?每周一练 的知识复习计划还在继续,本周主题是 <Hybird APP 混合应用专题> ,这期内容比较多,篇幅也相对较长,每个知识点内容也比较多. 之前分享的每周内容,我都整理到掘金收藏集 ?<EFT每周一练> 上啦,欢迎点赞收藏咯??. 注:本文整理资料来源网络,有些图片/段落找不到原文出处,如有侵权,联系删除. 一.什么是 Hybird App,与 Native App 及 Web App 有什么区别 参考文章: <Web App Hybrid…

这个话题有些复杂,说起来有些琐碎,因为和移动端适配相关的问题太多了. 1. 概念 1.1 设备像素 设备像素被称为物理像素,它是显示设备中一个最小的物理部件.每个像素可以根据操作系统设置自己的颜色和亮度.这些设备像素的微小距离欺骗了我们肉眼看到的图像效果. 1.2 屏幕密度(ppi) 屏幕密度是指一个设备表面上存在的像素数量,它通常以每1英寸上排列有多少像素来计算(ppi:Pixels Per Inch).苹果公司声称人类的肉眼无法区分单个像素,当一个显示器像素密度超过300ppi的时候,肉眼就…

本文摘要:主要通过实操讲解运用Webpack 5 CSS常用配置的方法步骤 前文已谈到可以通过配置 css-loader 和 style-loader,使 webpack5 具有处理 CSS 资源的能力.css-loader 首先会分析出各个 CSS文件之间的关系,把各个CSS文件合并为一大段 CSS,然后将 CSS 文件编译为 CommonJS 模块,并把该模块引入到 JS 中.紧接着 style-loader 会从 JS 中提取出刚才引入的编译后的 CSS,在页面的 header 中创建 s…

一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: import reqwest from 'reqwest'; import React from 'react'; import ReactDOM from 'react-dom'; var Header = React.createClass({ handleClick:function(){ conso…

提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OSS(https://www.aliyun.com/product/oss) 4.HTTPS(http://baike.baidu.com/view/14121.htm) 阅读目录结构 引: 一.准备工作 二.整体功能结构 三.具体实现步骤 四.关键点和问题处理 五.延伸与扩展 六.总结与思考 引:…

Android-Classical-OpenSource Android开发中 个人遇到和使用过的值得分享的资源合集 Trinea的OpenProject 强烈推荐的Android 开源项目分类汇总,star数量1.7W+ 项目说明: Android 开源项目第一篇--个性化控件(View)篇 包括ListView.ActionBar.Menu.ViewPager.Gallery.GridView.ImageView.ProgressBar.TextView.ScrollView.TimeVie…