山维空间

分类： 前端

以html+css为主的网页技术

  • 使用Ant编译Web应用

    开发只是万里长征走完前半截，测试部署也是很重要的环节。

    尤其是，前端面临着两个很大的问题：

    1. 前端代码是开放的，用户随时可以直接读代码
    2. 代码下载到用户电脑上运行，需要占用带宽

    所以如果我们可以先压缩、混淆代码，再部署给用户使用，就可以大大改善这种情况。这个时候，ant是不二的选择（因为我只会ant……）。

    关于Ant

    下载：http://ant.apache.org/bindownload.cgi

    手册：http://ant.apache.org/manual/index.html

    （更多…）

  • CSS3 学习笔记

    CSS3 学习笔记

    选择器

    子节点（不包含孙节点）

    E > F {
  // styles
}

    第n个子节点

    E > F:nth-child(2) {
  // 第二个F节点
}
E > F:nth-child(2n) {
  // 所有偶数节点
}
E > F:nth-child(2n + 1) {
  // 所有偶数节点后面那个节点
}
:nth-child(-n + 3) {
  // 前3个节点
}

    紧邻的节点（从第二个往后开始生效）

    E + F

    多列文本

    .column3 {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 15px;
  -webkit-column-gap:15px;
  column-gap: 15px;
}

    还有一些column-xxx的方法，基本上可以望文生义。

    渐变

    线性渐变

    .selector{
  background:-moz-linear-gradient(left, white, black); //firefox
  background:-webkit-linear-gradient(left, white, black); //webkit
  background:linear-gradient(to right, white, black); // standard
}

    放射渐变

    background:radial-gradient( [ <options> || <angle>,]? [ <shape> || <size>,]? <stop>, <stop>;[, <stop>]*)

.selector{
  background:-moz-radial-gradient(10% 30%, white, black); //firefox
  background:-webkit-radial-gradient(10% 30%, white, black); //webkit
}

    清除浮动

    .clr {
  zoom:1;
}
.clr:after {
  clear:both;
  visibility: hidden;
  display: block;
  height: 0;
  line-height: 0;
  content: "";
}

    如果在chrome下，只要简单的：

    .clr {
  overflow:hidden;
}

  • Google新产品风格滚动条的实现方法

    Google全线产品改版后，褒贬不一。不过它们滚动条看起来很漂亮，简单好看，有点Ubuntu的感觉。

    不过实现起来并不复杂，研究之后，发现是这样定义CSS的：

    ::-webkit-scrollbar{
  width:6px;
}
::-webkit-scrollbar-track-piece{
  background:none;
}
::-webkit-scrollbar-thumb {
  background:#DCD9DE;
  border-radius:6px;
}
::-webkit-scrollbar-thumb:hover {
  background:#EAE6EA;
}

    当然，看到”-webkit“，自然只有webkit内核的浏览器比如Chrome才生效（我没有测试Safari）。具体支持哪些样式暂时还不确定，Google搜索“-webkit-scrollbar”竟然没有结果。已知background、border这些都没问题，:hover这样的伪类也支持，margin、padding似乎没有作用。以后再慢慢研究吧。