项目常用（前程无忧）
项目常用（前程无忧）
个人公共样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| :root {
--color: #fff;
}
img {
max-width: 100%;
max-height: 100%;
}
img.title {
display: block;
margin: 0 auto;
}
img.center {
display: block;
margin: 0 auto;
}
.text_2em {
line-height: 2em;
}
.text_2em_in {
text-indent: 2em;
line-height: 2em;
}
.text_ju {
text-align: justify;
word-wrap: break-word;
}
.text_center {
text-align: center;
}
.title {
font-weight: 900;
}
.color {
color: var(--color);
}
|
滚动条样式
用png格式背景图片，切图的时候调整留白
然后修改滚动条滑块样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
.scrollbar {
width: 98%;
overflow-y: scroll;
overflow-x: hidden;
max-height: 6.5rem;
padding-right: .4rem;
box-sizing: border-box;
}
.scrollbar::-webkit-scrollbar {
width: 0.2rem;
background: url(../images/scrollbar_bg.png) no-repeat center / 150% 100%;
}
.scrollbar::-webkit-scrollbar-thumb {
border-radius: .1rem;
background: linear-gradient(0deg, #9a2aea, #c868fe);
}
|
锚点链接
1
2
3
4
5
6
7
| html {
scroll-behavior: smooth;
}
#xxx:target {
padding-top: 125px;
}
|
第三方网站跳转
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script>
document
.querySelector('第三方跳转的标签选择器')
.addEventListener('click', function (e) {
e.preventDefault();
if (
window.confirm(
'您即将离开前程无忧官方招聘网站，前往第三方页面。是否确认前往？'
)
) {
window.location.href = '';
} else {
return false;
}
});
</script>
|
页面内容使用JS动态获取
1
2
3
4
5
| <div>
<script>
document.write((new Date()).getFullYear())
</script>
</div>
|
确保内容最小满屏
使用css计算主体最小高度
1
| min-height: calc(100vh - 625px - 50px - 40px);
|
具体看实际情况
文字两端对齐
文字两端对齐 + 强制换行
1
2
| text-align: justify;
word-wrap: break-word;
|
下载命名
PC：默认文件名称改为英文或数字，然后使用download属性指定名称；结尾要带上后缀
H5：不要使用download
移动端文字
在模拟器中设置的文字大小调整时没有什么变化，但是到了手机中大小就有明显的变化了，在编写代码的时候不能依靠模拟器
文字溢出‘…’
1
2
3
4
5
6
|
white-space: nowrap; （ 默认 normal 自动换行）
overflow: hidden;
text-overflow: ellipsis;
|
1
2
3
4
5
6
7
8
9
10
|
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
|
文字内容替换
部分数据要注意中英文符号，别人给到的不一定是一样的，要么手动替换，要么js多写一种替换
1
| string = string.replace(/职位描述：/g, '<span>职位描述：</span>')
|
视频封面
在video上面加上poster属性，指定封面图片
1
2
3
4
| <video src="xxx.mp4" poster="images/video.png" controls width="100%"
height="100%" preload="preload" x5-video-player-type="h5" x5-video-player-fullscreen="true"
webkit-playsinline="true" playsinline="true" x5-video-orientation="portrait"
style="object-fit: cover;"></video>
|
微信分享
使用已经封装好的的库，图片丢失
在文件中的名称好像是固定的，并且要使用hppts开头的
图片裁剪拉伸
object-fit：用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。
| fill |
默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 |
| contain |
保持原有尺寸比例。内容被缩放。 |
| cover |
保持原有尺寸比例。但部分内容可能被剪切。 |
| none |
保留原有元素内容的长度和宽度，也就是说内容不会被重置。 |
| scale-down |
保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 |
| initial |
设置为默认值，关于initial |
| inherit |
从该元素的父元素继承属性。 关于inherit |
谷歌网页截图
打开控制台：ctrl + shift + p
输入：cfz 回车
判断是移动端还是PC端
1
2
3
4
5
6
7
| if (/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)) {
} else {
}
|
hover后加上边带有框元素偏移
默认加上边框，颜色设置透明 或者 使用盒模型
