CSS 常用代码

gistfile1.txt

.wlhf_productSeriesList .f_seriesTitle .f_sub1:before {
    /*伪类必须有点实物载体，哪怕是空格，不然伪类元素在html不显示，所以conent设置了一个空格*/
    content:" ";
    position:absolute;
    left:30px;
    /*定位直接为0，然后用translate位移100%，不用去计算高度*/
    bottom:0px;
    /*然后用translate位移100%，不用去计算高度*/
    transform: translate(0,100%);
    width:0px;
    height:0px;
    /*如果是下拉箭头，刚是上边框，border的宽度则是箭头的高度 */
    border-top:solid 8px #00c6ff;
    /*左边框同上面的同宽，设置透明 */
    border-left:solid 8px transparent;
    /*右边框同上面的同宽，设置透明 */
    border-right:solid 8px transparent; 
}

gistfile2.txt

### 文字相关
#### 多余变 ...
```
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
```
```
    white-space: nowrap;
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 95%;
    display: inline-block;
    text-align: justify;
```

#### 折行
```
    word-break: break-all;
```

#### 字体声明
```
font-face {
	font-family: 'raleway-regular';
	src:url("./fonts/Raleway-Regular.ttf");
}
```

#### 字体使用
```
    font-family: raleway-semibold;
    font-size: 20px;
    color: #333333;
    line-height: 30px;
    text-align: left;
```
 
### 图片相关
#### 图片垂直居中
```
.index-coupon .index-coupon-logo-div {
    padding: 2.5px 5px;
    width: 110px;
    height: 100px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.index-coupon .img-responsive {
    display: inline-block;
    max-width: 100px;
    max-height: 95px;
}
```

#### 背景图
```
	background-image: url(/static/image/indexbrand/lanebryant.png);
	background-repeat: no-repeat;
	background-position: center;
```

#### 渐变遮罩层
```
	background-image: -moz-linear-gradient( 90deg, #f8cb40 0%, #ffd143 100%);
	background-image: -webkit-linear-gradient( 90deg, #f8cb40 0%, #ffd143 100%);
	background-image: -ms-linear-gradient( 90deg, #f8cb40 0%, #ffd143 100%);
```  

### 格子相关
#### 超出框隐藏
```
	overflow: hidden;
	/* 要定义合适长宽 */
```

#### 阴影
```
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
```

#### 圆角
```
	border-radius: 50px;
	-moz-border-radius: 50px;
```

#### 边框
```
	border: 2px solid #404040;
	/* 虚线 */
	border: 2px dashed #404040; 

	border-color: black;
	border-style: solid dashed;
	border-width: 1px 2px 3px;
	border-top-color: red;
	border-radius: 5%;
```
```
	/* 边框排版重合技巧 */
    width: 25%;
    height: 340px;
    border: 3px dashed;
    color: #c6c7cc;
    float: left;
    margin-right: -3px;
    margin-bottom: -3px;
```

#### before
```
.index-brand-items::after {
	content: url(../image/mobile/brand_cat_arrows.png);
	position: absolute;
	width: 8px;
	height: 12px;
	top: 14px;
	right: 21px;
}
```

## 计算
```
min-height: calc(100% - 152px);
```

## 简单动画
```
.header-nav-menu-block {
    height: 0;
    overflow: hidden;
    transition: all .3s;
    -moz-transition: all .3s;
    /* Firefox 4 */
    -webkit-transition: all .3s;
    /* Safari 和 Chrome */
    -o-transition: all .3s;
    /* Opera */
}
.header-nav-menu-block-show {
    height: 88px;
}
```


## css init

```
body
{
  font-family:"open-sans"!important;
  font-size: 15px;
  line-height: 15px;
  position: relative;
  -webkit-text-size-adjust: none;
  height:100%;
  background-color:#eeeeee;
}
```

```
charset "utf-8";
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0}
fieldset,img {border:0 none}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
button {border:0 none;background-color:transparent;cursor:pointer}
body {background:#fff}
body,th,td,input,select,textarea,button {font-size:12px;line-height:1 ;font-family:"微软雅黑", "黑体","宋体";color:#666}
a {color:#666;text-decoration:none}
a:active, a:hover {text-decoration:none}
address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}
caption {display:none;}
table {width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed;}
img{vertical-align:top}


a {outline: none;}  
a:active {star:expression(this.onFocus=this.blur());}
/* 
::selection {color: #fff;background-color: #4C6E78;}    
::-moz-selection {color: #fff;background-color: #4C6E78;} 
*/


/* BEGIN Light Italic */
font-face {
	font-family: 'open-sans';
	src: url("./fonts/LightItalic/OpenSans-LightItalic.eot?v=1.1.0");
	src: url("./fonts/LightItalic/OpenSans-LightItalic.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fonts/LightItalic/OpenSans-LightItalic.woff2?v=1.1.0") format("woff2"), url("./fonts/LightItalic/OpenSans-LightItalic.woff?v=1.1.0") format("woff"), url("./fonts/LightItalic/OpenSans-LightItalic.ttf?v=1.1.0") format("truetype"), url("./fonts/LightItalic/OpenSans-LightItalic.svg?v=1.1.0#LightItalic") format("svg");
	font-weight: 300;
	font-style: italic;
}
/* END Light Italic */
/* BEGIN Regular */
font-face {
	font-family: 'open-sans';
	src: url("./fonts/Regular/OpenSans-Regular.eot?v=1.1.0");
	src: url("./fonts/Regular/OpenSans-Regular.eot?#iefix&v=1.1.0") format("embedded-opentype"), url("./fonts/Regular/OpenSans-Regular.woff2?v=1.1.0") format("woff2"), url("./fonts/Regular/OpenSans-Regular.woff?v=1.1.0") format("woff"), url("./fonts/Regular/OpenSans-Regular.ttf?v=1.1.0") format("truetype"), url("./fonts/Regular/OpenSans-Regular.svg?v=1.1.0#Regular") format("svg");
	font-weight: normal;
	font-style: normal;
}
```