前端样式之CSS1

写在前面
前端的CSS样式繁多,关联性又不大,让前端的小伙伴们头皮发麻,我也是其中之一,有空将用到的有趣又容易忘记的CSS样式做一个总结归纳,(其中很多是前辈的总结)方便自己以后查找用,当然如果能帮到各位一二,亦不胜荣幸

1.遮罩层.我用于做自定义弹窗,简单快速,再ajax传输也不影响原网页刷新,方法如下:

<div id="zhezhao">
	<div id="tanchuang"></div>
</div>
<style>
  #zhezhao {
    
    
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    z-index:20;
}

#tanchuang{
    
    
    position: relative;
    background: gray;
    width: 400px;
    height: 400px;
}
</style>

2. 默认样式修改.'未选择任何文件’字样自定义,代码如下,各种样式可以自己添加

<label for="myinput">
	<span id="text1" style="border: 1px solid rgb(169, 169, 169);border-radius: 5px;cursor: pointer;background-color: white">拍照或选择文件</span>
	<span id="show"></span>
	<input type="file" id="myinput">
</label>
<style>
	label{
    
    
		position: relative;
	}
	#fileinp{
    
    
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
		width: 170px;
		cursor: pointer;
	}
	#text{
    
    
		color: red;
	}
</style>
// js获取上传文件名字
<script>
	$("#myinput").change(function () {
    
    
	        $("#show").html($("#myinput").val().split("\\").slice(-1)		[0].slice(0,4)+'...');
	    })
</script>

效果图如下;显示完整路径加文件名,本人是根据需求截取文件名的部分显示


3. 文件上传,照片上传,移动端打开手机摄像

<input type="file" accept="image/*" />  //调用相机 ，图片或者相册 （两者都行）
加上了capture=camera"属性之后安卓手机就直接调用了相机，没有了图库的选项
<input type="file" accept="image/*;capture=camera"> //直接调用相机

4.div设置渐变色

<div class='mydiv'></div>
<style>
	.mydiv{
    
    
	    color: white;
		width:200px;
		height:200px;
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#033360), to(#006495));
	}
</style>

引用自前辈:

/更多类型的的input样式请查看
https://blog.csdn.net/yx_cos/article/details/82629719
///更多浏览器支持的渐变框样式,请查看
https://blog.csdn.net/TaoYuanKuangDao/article/details/89138551

人生就是在不断的失去和收获中循环
时光不仅仅给我们带来了岁月和皱纹
也让我们积累了珍贵的知识,经验,教训等无形的财富