css高级
灵感胜于汗水 Lv5

样式初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 样式初始化 */
* {
/* 清除默认的外边框和内边框 */
margin: 0;
padding: 0;
/* 统一盒子模型 */
box-sizing: border-box;
}

/* 和字体相关的样式写在body中,因为默认会被继承 */
body {
font-family: 'Lato', sans-serif;
font-weight: 400;
font-size: 16px;
/* 当前字体尺寸的1.7倍 */
line-height: 1.7;
color: #777;

padding: 30px;
}

背景图/裁剪区域

html文件中导入样式文件,并准备一个容器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!-- Lato字体 -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" />
<!-- 基础样式 -->
<link rel="stylesheet" href="style/style.css" />
<!-- 页面图标 -->
<link rel="shortcut icon" href="img/favicon.ico" />

<title>Document</title>
</head>
<body>
<header class="header">header content...</header>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.header {
height: 95vh;
/* 可指定多个背景图 */
/* linear-gradient函数用于创建一个颜色线性渐变的图片*/
/* url指定图片路径 */
background-image: linear-gradient(
to right bottom,
rgba(126, 213, 111, 0.8),
rgba(40, 180, 131, 0.8)
),
url(../img/background.png);
/* 保持图像的纵横比并完全覆盖背景区域 */
background-size: cover;
/* 窗口缩放时图片顶部保持不动 */
background-position: top;

/* clip-path:指定元素的可视区域 */
/* polygon函数用于创建一个多边形,从右上角开始顺时针指定顶点 */
clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
  • 本文标题:css高级
  • 本文作者:灵感胜于汗水
  • 创建时间:2022-07-27 23:29:30
  • 本文链接:https://cjhsyc.github.io/2022/07/27/css高级/
  • 版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!