• 1. 青い夜の記憶 - 须藤ひとみ
  • 2. 念夏 - 马天宇
  • 3. 偏爱 - 张芸京
  • 4. エンド・タイトル-东京爱情故事
  • 5. 夜色 - 玉置浩二
  • 6. オセンチな歩美 - 大野克夫
  • 7. The_Godfather_Waltz/Speak_Softly_Medley - Jack_Jezzro
  • 8. 猫になりたい - スピッツ
  • 9. Love_Theme_from_Cinema_Paradiso - Jeff_Steinberg
  • 10. 時には昔の話を - 加藤登紀子
person

收集一些常用的css样式、布局和技巧。备忘之用。

布局

固定底栏

保证footer待在底部。


See the Pen
VgGrQp
by xxyangyoulin (@mnnyang)
on CodePen.


hidden导致absolute超出部分出现滚动条

overflow-x:hidden会导致position:absolute的子元素无法超出overflow的父元素,将会撑大父元素,如果父元素设置了固定高度就会出现垂直滚动条。坑!

CSS变量

css修改整体颜色尺寸等更加灵活了,比如可以据此来更换网站主题。

body{
    --primary-color: #767676;
}

SASS

毫无疑问,这样写CSS非常方便,工作量骤降。
https://www.sass.hk/guide/

安装

先安装ruby,拥有ruby环境之后,

sudo gem install sass

如果无法使用,间隙性失败,考虑替换软件源。

编译

//单文件转换命令
sass input.scss output.css

//单文件监听命令
sass --watch input.scss:output.css

//如果你有很多的sass文件的目录,你也可以告诉sass监听整个目录:
sass --watch app/sass:public/stylesheets

nested 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style nested

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px; }
  .box-title {
    height: 30px;
    line-height: 30px; }

expanded 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style expanded

/*编译过后样式*/
.box {
  width: 300px;
  height: 400px;
}
.box-title {
  height: 30px;
  line-height: 30px;
}

compact 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compact

/*编译过后样式*/
.box { width: 300px; height: 400px; }
.box-title { height: 30px; line-height: 30px; }

compressed 编译排版格式

/*命令行内容*/
sass style.scss:style.css --style compressed

/*编译过后样式*/
.box{width:300px;height:400px}.box-title{height:30px;line-height:30px}

语法

变量

$highlight-color: #F90;

嵌套

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE }
}

群组选择器的嵌套

nav, aside {
  a {color: blue}
}

编译后:

nav a, aside a {color: blue}

> + ~

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}
article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

&

article a {
  color: blue;
  &:hover { color: red }
}

编译后:

article a { color: blue }
article a:hover { color: red }

在为父级选择器添加:hover等伪类时,这种方式非常有用。

同时父选择器标识符还有另外一种用法,你可以在父选择器之前添加选择器。举例来说,当用户在使用IE浏览器时,你会通过JavaScript<body>标签上添加一个ie的类名,为这种情况编写特殊的样式如下:

#content aside {
  color: red;
  body.ie & { color: green }
}

编译后:

#content aside {color: red};
body.ie #content aside { color: green }

属性嵌套

nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

编译后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入SASS文件

多文件编写并合并

被导入的文件,sass局部文件的文件名以下划线开头。这样,sass就不会在编译时单独编译这个文件输出css。你想导入themes/_night-sky.scss这个局部文件里的变量,你只需在样式表中写@import "themes/night-sky";

默认变量值

假如你写了一个可被他人通过@import导入的sass库文件,你可能希望导入者可以定制修改sass库文件中的某些值。使用sass!default标签可以实现这个目的。

在上例中,如果用户在导入你的sass局部文件之前声明了一个$fancybox-width变量,那么你的局部文件中对$fancybox-width赋值400px的操作就无效。如果用户没有做这样的声明,则$fancybox-width将默认为400px

嵌套导入

.blue-theme {@import "blue-theme"}
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

静默注释

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

混合器 @mixin

通过sass的混合器实现大段样式的重用。

定义

@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

使用

notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

编译后

.notice {
  background-color: green;
  border: 2px solid #00aa00;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器的css规则

定义

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

使用

ul.plain {
  color: #444;
  @include no-bullets;
}

编译后

ul.plain {
  color: #444;
  list-style: none;
}
ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

混合器传参

定义

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

使用

a {
  @include link-colors(blue, red, green);
}

语法$name: value的形式指定每个参数的值。

a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

编译后

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

混合器默认值

参数默认值使用$name: default-value的声明形式。

定义

@mixin link-colors($normal,$hover: $normal,$visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

如果像下边这样调用:@include link-colors(red) $hover$visited也会被自动赋值为red

选择器继承来精简CSS

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.seriousError将会继承样式表中任何位置处为.error定义的所有样式。以class="seriousError" 修饰的html元素最终的展示效果就好像是class="seriousError error"

.seriousError不仅会继承.error自身的所有样式,任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承,如下代码:

//.seriousError从.error继承样式
.error a{  //应用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //应用到hl.seriousError
  font-size: 1.2rem;
}

如上所示,在class="seriousError"html元素内的超链接也会变成红色和粗体。

Compass

bg2012112902.png

安装

sudo gem install compass

初始化项目

compass create myproject

编译

compass compile
compass compile --output-style compressed #并且压缩
compass compile --force #跟进变动

# config.rb中指定编译模式
output_style = :expanded、:nested、:compact和:compressed

# 自动编译 scss变化,就自动编译
compass watch

bower

是一个客户端技术的软件包管理器,它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

bower.io

安装

npm install -g bower

起步

bower init

将会在目录下生成一个bower.json文件,该文件是一个bower项目配置文件。

安装包

bower install jquery --save
bower install githubusername/githubpackage
bower install xxx.git
bower install [url]

—save将会把jquery的依赖配置保存到bower.json文件。

包查找

bower search bootstrap

包信息

bower info jquery

查询可用的jquery的版本及其他信息。

包更新

bower update jquery

删除包

bower uninstall jquery

将会一并删除依赖,如果该依赖已经没有被依赖的时候。

.bowerrc文件

{

"directory": "app/vendor"

}

指定包的下载目录。

requirejs

https://requirejs.org

参考博客:https://blog.csdn.net/bluesky1215/article/details/71079667

引入

<script src="app/lib/requirejs-master/require.js" data-main="main" defer async="async" ></script>

起步

require.config({
      //baseUrl: "js/lib",
    paths: {

      "jquery": "jquery.min",
          //"jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],   /// 这样配置后,当百度的jquery没有加载成功后,会加载本地js目录下的
      "underscore": "underscore.min",
      "backbone": "backbone.min"
    },
        shim: {
            'jquery.scroll': {
             deps: ['jquery'],
             exports: 'jQuery.fn.scroll'
    },
       /* 多个属性暴露
       shim:{
        // hello:{exports: 'hello2'}
        hello:{
            init:function () {
                return {
                    hello2:hello2,
                    hello3:hello3,
                }
            }
        }
    }
       */
});

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
});

定义模块

define(['jquery'], function ($) {
    var add = function (x, y) {
        return x + y;
    };

    var test = function () {
        console.log($('#test').text())
    };

    return {
        add: add,
        test: test,
    };
});

插件

domready插件,可以让回调函数在页面DOM结构加载完成后再运行。

require(['domready!'], function (doc){
    // called once the DOM is ready
});

新评论