应该会有人觉得百度（google）有的东西为什么我会写出来？有我还写啥啊～手上有一个项目，是用cordova+vue的，这个不是重点，由于ios的app上架比较困难，所以优先上架android。因为习惯了在ios上透明状态栏的样式，在android上也想拥有。得赖于ios的css中safe-area-inset-*的属性，可以在cordova的ios端结合c …
css
好像这个标题看上去很容易的样子，但是并不是这样的。实现效果如图。右侧菜单的起始位置确定，但是宽度不确定，左侧菜单的必须靠这右侧菜单距离3像素。因为左右菜单宽度不确定，导致的一个问题是，无法计算左侧菜单的左侧偏移量或者是相对右侧菜单的右侧便宜了。修改了html结构多次无果以后，准备放弃css的方法采用js。突然想起为什么要去计算left或者是right呢？！单 …
一个项目如果使用一份css那么会导致css文件很大，网络上提供了不少的css压缩工具，但是都有一个问题，每次修改每次都需要手动执行压缩的过程。如何监听程序猿修改css，并自动压缩呢。这里用到的是gulp。nodejs的npm命令下载gulp，记得，项目和全局都需要gulp。接着编写脚本。这里直接放代码。var gulp = re …
OK!接下来我们分别说这些元素的意义。首先，什么是块级元素？在html中 <div>,<p>,<h1>,<form>,<ul>,<li>就是块级元素。（ul标签和li标签还记得是什么意思吧？）设置 display:block 就是将 …
base.css对于网页是很重要的，因为浏览器对每个标签的显示是不同的，必须通过resetcss进行统一样式的处理。除了统一样式，base.css网页风格也有统一的作用，甚至减少不必要且冗余的重复代码下面分享一个我用过的base.cssbody, html {font: 14px1.5 "Microsoft& …
在H5下，很多时候需要对某些DIV进行高度或者宽度的设置。这些高度是相对屏幕的。如果div宽度相对屏幕宽度或者div高度相对屏幕高度的百分比。这些都很好解决但是如果div宽度相对屏幕高度或者div高度相对屏幕宽度要怎么解决1、JS：最简单的方法，但是弊端也很明显，存在重绘的问题。2、vw&vhCSS3中引入这2个单位。vw-------相对屏幕宽度v …
在一个项目中，我为了一个特效，在一个链接前面加入一个半透明遮罩。为此，链接被遮罩挡住，导致无法成功点击到链接。那么有什么办法可以实现事件穿透呢。这里要说到CSS3，CSS3引入不少属性，也有不少属性是包含了JS的集合，比如常见的attr这个。对于以上事件，这样介绍一个CSS3的属性pointer-events常见的pointer-events的值有auto| …
#字体：使用优质字体，能让阅读给为舒适，这个是最简单直接的却又是重要的体验之一。但字体不超过 3 种否则会显得杂乱。body 的字体大小为 最小 16px。标题要大、粗，20 至 30 像素，让它看起来“重”一些。#配色：一般设计理论上使用互补色或者三色组，不超过 3 种颜色。不要使用纯黑色、浅灰色现在的趋势是：去除颜色。当然得有主题色，显示突出，突显内容， …
id的用途 1） id是HTML元素的Identity，主要是在客户端脚本里用。 2） label与form控件的关联，如 <label for="MyInput">My Input<label><i …
基于CSS3实现瀑布流，使用CSS3的CSS 多栏(Multi-column)。 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。我们只是实现了多栏的布局。CSS 多栏(Multi-column) : <html& …
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），你可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。CSS3 定义了两种类型的渐变（gradients）：线性渐 …