-
& > 等使用
Paste_Image.png
<div class="search-employee">
<div>
<input type="text" placeholder="輸入員工工號(hào)" ng-model="keyword"/>
</div>
<div ng-click="search();">搜索</div>
<div class="clear"></div>
</div>
.search-employee {
float: left;
margin: 0 15px;
> div {
&:first-child {
float: left;
input {
width: 150px;
height: 40px;
margin: 0;
padding: 9px 15px;
border-right: none;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
&:nth-child(2) {
float: left;
width: 50px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #f96484;
color: #fff;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
}
}
}
點(diǎn)擊在下方展示 選擇 的 css
Paste_Image.png
.date-plugin {
position: absolute;
top: 55px;
left: 270px;
z-index: 10;
display: none;
}
- less 全部清除
box-sizing: content-box; 默認(rèn)值，width height 不包含 pading border 與margin 的值获洲，也就是說样屠，當(dāng)width = 100炫加，則實(shí)際的width 還需要加上 上述三個(gè)
border-box; width = 100 ，已經(jīng)包含了 pading border ，但是不包含margin
* {
box-sizing: border-box;
}
- less 的寬度
width: e("calc(90% - 14px)");
- 左右滾動(dòng)條
http://www.w3school.com.cn/tiy/t.asp?f=css3_overflow-xy
overflow-x:scroll; //hidden
- 段落中文本不換行
white-space: nowrap
- 溢出部分 的處理
http://www.w3school.com.cn/tiy/t.asp?f=css3_text-overflow
overflow:ellipsis // 點(diǎn)點(diǎn)點(diǎn)
text-overflow:clip // 沒有點(diǎn)點(diǎn),直接 裁剪
overflow-y:scroll;
6
height: calc(~"100%" - @paddingHeight * 2);
- css 元素前面 與 后面 加上 固定的 東西
&:before {
width: 0px;
height: 0px;
position: absolute;
content: "";
border: 12px solid #FFFFFF;
border-bottom-color: transparent;
border-top-color: transparent;
border-right-color: transparent;
left: 0;
top: e("calc(50% - 12px)");
}
8 . td colspan
http://www.w3school.com.cn/tags/att_td_colspan.asp
<td colspan="13" class="noData even">沒有查詢到任何數(shù)據(jù)</td>
9 . input 禁止使用
<input type="text" ng-disabled="customerNameDisabled" ng-class="{true:'base-input-style disabled', false:'base-input-style enabled'}[customerNameDisabled]" ng-model="customerName" placeholder="客戶姓名">
- ng-src
<img src="http://static.bokao2o.com/images/s3backend/checkbox_unchecked.png" ng-src="{{selfSrc}}" />
11 .控制 input 輸入 源頭的處理
<input type="text" ng-model="pay.payMoney" onkeypress="onlyNumber(this.value)" />
- view 展示 移動(dòng)的效果
@keyframes popup {
0% {top:100%; opacity: 0;}
100% {top:-70px; opacity: 1;}
}
@keyframes close_popup {
0% {top:-70px; opacity: 1;}
100% {top:100%; opacity: 0;}
}
>.billModal.ng-hide {
animation: close_popup 0.2s;
-webkit-animation: close_popup 0.2s;
}
13.input 獲取 焦點(diǎn) 樣式
>input[type='text']:focus {
border: @themeColor 1px solid;
background-color: #ffffff;
}
- 滾動(dòng)條優(yōu)化
/*定義滾動(dòng)條高寬及背景 高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定義滾動(dòng)條軌道 內(nèi)陰影+圓角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 6px;
background-color: #F5F5F5;
}
/*定義滑塊 內(nèi)陰影+圓角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #999;
}
15.圖片鋪滿
body {
height: 100%;
background: url(../login/img/index_bg.jpg) no-repeat center 0;
background-size: cover;
}
16.首行縮進(jìn)
span{
text-indent: 2em;
}
17.遮罩的 父級(jí) 與 子級(jí) 的透明度的傳遞問題
.mask {
background-color: rgba(0, 0, 0, .5); //mask 的子級(jí)不會(huì)變透明
}
.mask {
background-color: #000;
opacity: 0.5; //mask 的子級(jí)也會(huì)變的透明
}
18.媒體查詢
// 媒體查詢 屏幕 大于 xxx便執(zhí)行
@media only screen and (min-width: 1700px) {
.text-page {
p {
font-size: 16px !important;
// background-color:red;
}
}
}
