-
& > 等使用
Paste_Image.png
<div class="search-employee">
<div>
<input type="text" placeholder="输入员工工号" 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;
}
}
}
点击在下方展示 选择 的 css
Paste_Image.png
.date-plugin {
position: absolute;
top: 55px;
left: 270px;
z-index: 10;
display: none;
}
- less 全部清除
box-sizing: content-box; 默认值，width height 不包含 pading border 与margin 的值，也就是说，当width = 100，则实际的width 还需要加上 上述三个
border-box; width = 100 ，已经包含了 pading border ，但是不包含margin
* {
box-sizing: border-box;
}
- less 的宽度
width: e("calc(90% - 14px)");
- 左右滚动条
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 // 点点点
text-overflow:clip // 没有点点,直接 裁剪
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">没有查询到任何数据</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 展示 移动的效果
@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 获取 焦点 样式
>input[type='text']:focus {
border: @themeColor 1px solid;
background-color: #ffffff;
}
- 滚动条优化
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: #F5F5F5;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 6px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-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.首行缩进
span{
text-indent: 2em;
}
17.遮罩的 父级 与 子级 的透明度的传递问题
.mask {
background-color: rgba(0, 0, 0, .5); //mask 的子级不会变透明
}
.mask {
background-color: #000;
opacity: 0.5; //mask 的子级也会变的透明
}
18.媒体查询
// 媒体查询 屏幕 大于 xxx便执行
@media only screen and (min-width: 1700px) {
.text-page {
p {
font-size: 16px !important;
// background-color:red;
}
}
}
