自己总结的几个零碎样式处理，碰到一个就加一点
空白符
white-space: pre-line;
元素内文本平均分布
text-align: justify;
text-align-last: justify;
去除点击背景色
body {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
伪类元素边框做小箭头
.weui_cells_access .weui_cell_ft:after {
content: " ";
display: inline-block;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
height: 6px;
width: 6px;
border-width: 2px 2px 0 0;
border-color: #c8c8cd;
border-style: solid;
position: relative;
top: -2px;
top: -1px;
margin-left: .3em;
}
超出部分隐藏 鼠标移入显示
.tasklink{
width:160px;
display:block;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.tasklink:hover{
overflow:inherit
}
超出强制换行 以字母为基准
.tasklink{
word-break: break-all;
width:200px;
}
滚动条样式
.p_box::-webkit-scrollbar { width: 5px; height:5px; background-color: #5D89EF; }
.p_box::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); border-radius: 3px; background-color: #F0F0F1; }
.p_box::-webkit-scrollbar-thumb { /*width: 10px;*/ height: 20px; border-radius: 3px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #5D89EF; }
文字中间加横线
text-decoration: underline
可编辑div或者input placeholder不能显示
要注意value不能有空格
div标签对内部不能有空格
字边距
letter-spacing: 26px;
边框
border: 4px double red;双线
border: 4px dashed red;虚线
表格边距清除
border-collapse:collapse;
表格合并
colspan="11"横向合并
rowspan="2" 纵向合并
文字竖行排列
display: inline-block;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
IE8支持背景色透明
input{
background:transparent; // IE要清楚默认的背景色
/*
startColorstr,endColorstr最前面的两位是透明
*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F990000,endColorstr=#7F990000);
zoom: 1;
}
获取鼠标相对于浏览器的位置 去除页面滚动的影响
e = e || event;
var x = e.clientX+$(window).scrollLeft();
var y = e.clientY+$(window).scrollTop();
获取页面元素相对于浏览器的位置 去除页面滚动的影响
var Y = $(e.target).offset().top;
var X = $('.box').offset().left;
去除select 小箭头
select{
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
}
长度单位
vm vh vmin vmax rem em
input
@*$('[name="search"]:checked').val()*@
通用样式
*{
margin:0;
padding:0;
list-style:none;
}
input{
outline:none;
}
img{border:none;}
html,body{height:100%;font-family:微软雅黑;overflow:auto;}
body {font-size: 16px; line-height: 1.5; font-family:'Microsoft Yahei','simsun','arial','tahoma'; color: #222; }
table { border-collapse:collapse; border-spacing:0; }
h1, h2, h3, h4, h5, h6, th { font-size: 100%; font-weight: normal; }
button,input,select,textarea{font-size:100%;}
a { text-decoration: none; -webkit-tap-highlight-color:rgba(0,0,0,0);color:#111;}
a:hover{text-decoration:none;}
.clear{clear: both;}
.fl{ float: left; }
.fr{float: right;}
.tc{text-align:center;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.h100{height:100%;}
.h20{height:20px;}
.h45{height:45px;}
.h60{height:60px;}
.w100{width:100%;}
.pon { cursor:pointer;}
.hidden { display:none; }
.block { display:block; }
.FB { font-weight:bold; }
.mau{margin:0 auto;}
.dil{display:inline-block;}
.db{display:block;}
p{margin:0;}
.cf{color:#fff;}
下拉框模拟
需要做一个类似select的下拉 但是样式有改变 option的hover样式谷歌浏览器不能更改，所以自定义
后期由于需要在页面任意地方点击能够关闭弹框，所以添加了遮罩层
下拉框模拟 select中option的背景色改变
.this_select_style{
display:inline-block;
position:relative;
}
.this_select_style input{
width:260px;
/*padding: 5px 50px 5px 20px;*/
padding-left:5px;
height: 35px;
border: 1px solid #d8d8d8;
box-sizing: border-box;
border-radius: 5px;
color: #999;
background: url(../images/Mall_select.png) no-repeat 87% 54%;
}
.this_select_style ul{
width:260px;
border: 1px solid #d8d8d8;
border-top:none;
border-radius: 0 0 5px 5px;
color: #999;
padding:0;
position:absolute;
top:19px;
background-color:#fff;
z-index:9999;
display:none;
box-sizing: border-box;
}
.this_select_style .show_ul{
border-radius:5px 5px 0 0;
border-bottom:none;
background:none;
}
.this_select_style ul li{
width:100%;
padding: 5px 50px 5px 20px;
cursor:pointer;
box-sizing: border-box;
}
.this_select_style ul li:hover{
color:#fff;
background-color:#1bbc9b;
}
#mask{
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.2);//为了测试，真实可以去掉背景色
position: fixed;
left: 0;
top:0;
z-index: 999;
display: none;
}
<div id="mask"></div>
<div class="this_select_style">
<input type="text" readonly="true" class="selectmenu" style="background-color: #fff;" data-value="-1" value="等待发货收货"/>
<ul>
<li data-value="0">全部</li>
<li data-value="1">待审核</li>
<li data-value="1">已拒绝</li>
<li data-value="1">等待发货收货</li>
<li data-value="1">订单取消</li>
<li data-value="1">交易结束</li>
</ul>
</div>
//下拉框
$('body').on('click', '.this_select_style .selectmenu', function () {
$this = $(this);
$this.toggleClass("show_ul");
$this.next().toggle();
$('#mask').toggle();
})
$('body').on('click', '.this_select_style ul li', function () {
$this = $(this);
var thisInput = $this.parent().siblings("input");
thisInput.attr("data-value", $this.attr("data-value")).val($this.text()).toggleClass("show_ul");
$this.parent().toggle();
$('#mask').toggle();
})
$('body').on('click','#mask',function(){
$(this).toggle();
$('.this_select_style .selectmenu').removeClass("show_ul");
$('.this_select_style ul').hide();
})
我叫洱月，我愿意陪你到洱海风花雪月，你，看到我了吗？
