There are
many CSS styles written on the front end, and the relevance is not great, which makes the front-end friends scalp numb. I am also one of them. I will make a summary of the interesting and easy-to-forget CSS styles I use when I have time. Many of them are the summary of the seniors) It is convenient for you to find and use in the future. Of course, if you can help you one or two, it would be an honor
1. Mask layer . I used to make custom pop-up windows. It is simple and fast. Ajax transmission does not affect the refresh of the original web page. The method is as follows:
<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. Modify the default style . Customize the words'No file selected', the code is as follows, various styles can be added by yourself
<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>
The renderings are as follows; the full path plus the file name is displayed, and I am showing the part of the file name that I intercepted according to my needs
. 3. File upload, photo upload, and mobile phone camera
<input type="file" accept="image/*" /> //调用相机 ，图片或者相册 （两者都行）
加上了capture=camera"属性之后安卓手机就直接调用了相机，没有了图库的选项
<input type="file" accept="image/*;capture=camera"> //直接调用相机
4.div set gradient color
<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>
Quoting from predecessors:
/For more types of input styles, please check
https://blog.csdn.net/yx_cos/article/details/82629719
///For more gradient box styles supported by browsers, please check
https://blog.csdn. net/TaoYuanKuangDao/article/details/89138551
Life is a cycle of constant loss and gain.
Time not only brings us years and wrinkles,
but also allows us to accumulate precious knowledge, experience, lessons and other intangible wealth.