这里记录一些css的实用小技巧
一、
自定义grey颜色渐变,附带常用颜色:
.w3-theme-l5 {color:#000 !important; background-color:#f9f9f9 !important}
.w3-theme-l4 {color:#000 !important; background-color:#ececec !important}
.w3-theme-l3 {color:#000 !important; background-color:#d8d8d8 !important}
.w3-theme-l2 {color:#000 !important; background-color:#c5c5c5 !important}
.w3-theme-l1 {color:#000 !important; background-color:#b1b1b1 !important}
.w3-theme-d1 {color:#fff !important; background-color:#8e8e8e !important}
.w3-theme-d2 {color:#fff !important; background-color:#7e7e7e !important}
.w3-theme-d3 {color:#fff !important; background-color:#6f6f6f !important}
.w3-theme-d4 {color:#fff !important; background-color:#5f5f5f !important}
.w3-theme-d5 {color:#fff !important; background-color:#4f4f4f !important}
.w3-theme-light {color:#000 !important; background-color:#f9f9f9 !important}
.w3-theme-dark {color:#fff !important; background-color:#4f4f4f !important}
.w3-theme-action {color:#fff !important; background-color:#4f4f4f !important}
.w3-theme {color:#fff !important; background-color:#9e9e9e !important}
.w3-text-theme {color:#9e9e9e !important}
.w3-theme-border {border-color:#9e9e9e !important}
.w3-hover-theme:hover {color:#fff !important; background-color:#9e9e9e !important}
.w3-theme-gradient-grey {
color: #000 !important;
background:-webkit-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
color: #000 !important;
background:-moz-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
color: #000 !important;
background:-o-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
color: #000 !important;
background:-ms-linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
.w3-theme-gradient-grey {
color: #000 !important;
background: linear-gradient(top,#DADADA 10%,#f1f1f1 90%)}
效果如下:
二、
给浏览器的页头加上自定义的icon,如下:
<head>
<link rel="icon" href="${pageContext.request.contextPath}/static/images/frontstage/gcc.png" type="image/x-icon">
</head>
效果如下:
三、本地预览头像
笔者这里删减去布局代码,
html如下:
<table class="w3-table w3-text-dark-grey" style="font-size: 13px;">
<tr>
<td style="text-align: right;vertical-align: middle;width: 18%">预览头像</td>
<td>
<span style="display: block;width: 50px;">
<img style="width: 100%;height: 50px" id="currentImg" />
</span>
</td>
</tr>
</table>
<input style="display: inline" id="realChoiceImg" name="file" type="file" accept="image/jpeg,image/png,image/jpg"/><br>
这里的html代码也有一个使用技巧,这里规定了正方形图片,将span标签设置为块状,规定宽度(span不能设置高度),然后被包裹的img设置高度为span的宽度,即正方形;若只设置width为100%则宽度按原图,比例缩放。
js 如下:
$("#realChoiceImg").on('change',function(){
var filePath = $(this).val(), //获取到input的value,里面是文件的路径
fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
src = window.URL.createObjectURL(this.files[0]); //转成可以在本地预览的格式
// 检查是否是图片
if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
// alert('上传错误,文件格式必须为:png/jpg/jpeg');
return;
}
$('#currentImg').attr('src',src);
这里的主要记录src的获取方式,不用深究,需要使用时拷贝即可。
笔者作品效果如下:
四、返回顶部
这里记录一个有滑动效果的返回顶部方式
如下:
<a style="text-decoration: none" href="javascript:void(0)" οnclick="toTop()">
↑ 回到顶部
</a>
function toTop(){
$('html, body').animate({ scrollTop: 0 }, 'fast');//带动画
}
这里再补充说明下<a>标签调用js方法的方式:
主要就是如上方式 javascript:void(0),让a标签的链接执行空方法,或者javascript:; 留空,作用和前者一样。
五、html传递的this对象
<input id="title" type="text" value="" οnclick="javascript:test(this);"/>
function test(obj){
alert(obj); //[object HTMLInputElement]
alert(obj.id); //myinput
alert(obj.value); //javascript中onclick中的this
}
作用就和jquery$(#title)一样,是获取节点对象。