HTML5_CSS3实战代码
wen 2021/7/9 HTML5_CSS3
# 1. filter 滤镜
/* 修改所有图片的颜色为黑白 (100% 灰度) */
img {
/* Chrome, Safari, Opera */
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* 语法 */
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 2. html 标签添加特殊标识
// html 标签添加特殊标识
setHtmlLang (lang) {
let lang = 'zh-CN';
document.getElementsByTagName('html')[0].setAttribute('lang', lang);
}
// css
html[lang='zh-CN'] {
padding: 8px;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 3. 改变当前导航头的标题
changeDocumentTitle () {
const title = this.$route.meta.title;
if (title) {
document.title = this.$t(title);
}
}
1
2
3
4
5
6
2
3
4
5
6
# 4. margin
/* 居中 */
margin: 0 auto;
/* 位于底部 */
margin-top: auto;
1
2
3
4
2
3
4
# 5. IE 兼容
<!-- 输入 cc:ie ，用于解决部分 IE 相关问题 -->
<!--[if IE]>
<script></script>
<![endif]-->
1
2
3
4
2
3
4
# 6. 选择器
/* 目标选择器，一般是作为锚点，当定位到该标签后，该标签会发生变化 */
div:target {}
/* 设置被选中的内容，发生改变，一般用于鼠标选中文字 */
div::selection {
background-color: yellow;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 7. 单行／多行文本溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 8. 文本换行
/* 不换行 */
white-space: nowrap;
/* 起一个新行来放置长单词 */
word-break: break-word;
/* 不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了 */
word-break: break-all;
/* 浏览器在适当的位置自动插入连字符换行 */
hyphens: auto;
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 9. aspect-ratio 与 object-fit 搭配的妙用
// aspect-ratio：为容器规定了一个期待的纵横比。
// object-fit：控制图片在容器中的显示形态，分别有：contain--完全展开并保持原始比例，fill--完全展开被拉伸铺满容器，cover--铺满容器并保持原始比例但被裁剪。
// 最完美的结合就是使用 aspect-ratio 设定需求的宽度和高度比，再通过设定 object-fit 值为 cover 使图片保持原来的形态，且使每个图片都保持相同的宽高。
1
2
3
4
2
3
4
# 10. 设置 placeholder 的字体样式
/* Chrome */
input::-webkit-input-placeholder {
color: rgba(0,0,0,0.45);
}
/* Mozilla Firefox 19+ */
input::-moz-placeholder {
color: rgba(0,0,0,0.45);
}
/* Internet Explorer 10+ */
input:-ms-input-placeholder {
color: rgba(0,0,0,0.45);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 11. file accept
<!-- 自定义上传文件的后缀名：.customize -->
<input
ref="inputFile"
accept=".customize"
type="file"
style="display: none"
@change="getFile"
/>
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 12. @media only screen
/* 当屏幕尺寸 小于 1200px 时 */
@media only screen and (max-width: 1200px) {}
/* 当屏幕尺寸 大于 768px 时 */
@media only screen and (min-width: 768px) {}
/* 当屏幕尺寸 大于 768px，小于 1200px 时 */
@media only screen and (min-width: 768px) and (max-width: 1200px) {}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 13. 属性选择器
| 选择器 | 描述 |
|---|---|
| [attr] | 用于选取带有指定属性的元素 |
| [attr=value] | 用于选取带有指定属性和值的元素 |
| [attr~=value] | 用于选取属性值中包含指定词汇的元素 |
| [attr|=value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attr^=value] | 匹配属性值以指定值开头的每个元素。 |
| [attr$=value] | 匹配属性值以指定值结尾的每个元素。 |
| [attr*=value] | 匹配属性值中包含指定值的每个元素。 |
input[type="text"] {}
input[type="password"] {}
[class^="icon-"] {}
1
2
3
2
3
# 14. text-align-last
/* 一段文本中最后一行在被强制换行之前的对齐规则 */
text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
/* justify：最后一行文字的开头与内容盒子的左侧对齐，末尾与右侧对齐 */
text-align-last: justify;
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 15. 文字间距
p {
/* 单词抬头距离 */
text-indent: 10px;
/* 字间距 */
letter-spacing: 10px;
}
1
2
3
4
5
6
2
3
4
5
6
# 16. 网页标题栏添加图标
<head>
<link rel="shortcut icon" href="favicon.ico" />
</head>
1
2
3
2
3
# 17. 滚动条样式修改
/* 滚动条整体样式，高宽分别对应横竖滚动条的尺寸 */
&::-webkit-scrollbar {
width: 4px;
height: 4px;
}
/* 滚动条里面小方块 */
&::-webkit-scrollbar-thumb {
border-radius: 5px;
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
}
/* 滚动条里面轨道 */
&::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0;
background: rgba(0,0,0,0.1);
}
/* 滚动条背景颜色变化 */
::-webkit-scrollbar-thumb:hover {
background-color: #707070;
}
/* 右下角小白块透明处理 */
::-webkit-scrollbar-corner {
background-color: transparent;
}
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
