董叔叔

作者： admin

css清除浮动


<ul id="demo1" class="nostyle demo clearfix"> 
 <li>1</li>
 <li>1</li>
 <li>1</li>
</ul>


// Css Code
/*简洁版*/
.clearfix:before, .clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
	overflow:hidden;
}
.clearfix{
    zoom:1;
}


/* 经典版 */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/* 简单粗暴版  overflow:auto 或者  overflow:hidden */
.clearfix{
  overflow:hidden; *zoom:1;
}

2015-11-11

sass入门

一，sass的安装

二，sass声明变量


$width:300px;

三，普通变量与默认变量
1,普通变量


//scss文件
$width:300px;
div{width: $width;}


//编译后的css文件
div{width: 300px;}

2,默认变量 !default;


//scss文件
$width:500px;
$width:300px !default;
div{width: $width;}


//编译后的css文件
div{width: 500px;}

四，变量的调用


//定义变量
$brand-primary:darken(#428bca,6.5%) !default;
$btn-primary-color:#fff !default;
$btn-primary-bg:$brand-primary !default;
$btn-primary-border:darken($brand-primary,5%) !default;
//按钮的样式
.btn-primary{
color             :$btn-primary-color;
background-color  :$btn-primary-bg;
border            :1px solid $btn-primary-border;
}


//编译后的css文件
.btn-primary{
color              : #FFF;
background-color   : #337ab7
border             : 1px solid #2e6da4;
}

五，局部变量和全局变量


$color:orange !default;   //这里设置全部变量
.block{
  color:$color;           //调用全部变量
}
.em{
  $color:red;             //设置局部变量
  a{ color:$color;}       //调用局部变量
}

六，嵌套

1，选择器嵌套
2，属性嵌套，例如border，padding，margin，font等中间有-的属性都可以使用属性嵌套。
3，伪类嵌套，&:before; &:after;

七，混合宏
声明混合宏：@mixin Name{}
调用混合宏：@include Name;
混合宏传参（三种）：1，传一个不带值得参数 2，传一个带值的参数 3，传多个参数

2015-11-08