前端学习日记-log7

本文最后更新于：3 个月前

第五天和第六天：三种简历

第一种

image_1.png

个人思路：

  1. 总体上是左右分栏，默认的流动模型（flow）不太适合，浮动模型（float）和层模型（layer）可以考虑
  2. 层模型不太适合整个右侧一栏的布局，浮动模型代码量较多
  3. 弹性布局（flex）非常适合，代码简单，单需要适配解决老版本的兼容问题，整体代码少

综上，第一种样式代码如下：

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!-- html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>三种简历</title>

		<link rel="stylesheet" type="text/css" href="css/test1.css" />
	</head>
	<body>

		<div class="pageTitleClass">
			<p>XX</p>
		</div>
		<div class="infoClass">
			<div>
				<div class="titleClass">
					basicInfo
				</div>

				<div class="contentClass">
					<span>
						<span class="keyClass">name</span>
						<span class="valueCalss">zhangsan</span>
					</span>
					<span>
						<span class="keyClass">gender</span>
						<span class="valueCalss">male</span>
					</span>
					<span>
						<span class="keyClass">position</span>
						<span class="valueCalss">xxxxxxxxxxxxx</span>
					</span>
				</div>

			</div>
			<div>
				<div class="titleClass">
					phone&email
				</div>

				<div class="contentClass">
					<span>
						<span class="keyClass">phone</span>
						<span class="valueCalss">18600000000</span>
					</span>
					<span>
						<span class="keyClass">email</span>
						<span class="valueCalss">xxxxxxxxxxxx@xxx.com</span>
					</span>
					<span>
						<span class="keyClass">homepage</span>
						<span class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxxx</span>
					</span>
				</div>
			</div>

			<div>
				<div class="titleClass">
					schools
				</div>

				<div class="contentClass">
					<p class="keyClass">Bachelor</p>
					<p class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxx</p>
					<div class="keyClass">Postgraduate</div>
					<p class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxx</p>
				</div>
			</div>

			<div>
				<div class="titleClass">
					projects
				</div>

				<div class="contentClass">
					<span>
						<span class="keyClass">project name</span>
						<span class="valueCalss">A</span>
						
					</span>
					<span>
						<span class="keyClass">project time</span>
						<span class="valueCalss">xxxx.xx - xxxx.xx</span>
					</span>
					
					<div class="keyClass">project info：</div>
					<p>sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss, sssss, ssss, sssss.</p>
				</div>
			</div>
		</div>
	</body>
</html>
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
45
46
47
48
49
50
51
52
53
54
/* css */
body {
	display: flex;
}

.pageTitleClass {
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 120px;

	background-color: lightgrey;
}
.pageTitleClass > p {
	width: 100%;
	margin-top: 50px;
	color: white;
	font-size: 30px;
	text-align: center;
}

.infoClass {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;

	margin-left: 20px;
	margin-bottom: 25px;
}

.titleClass {
	font-size: 25px;
	font-weight: bold;
	margin-top: 25px;
}

.contentClass {
	margin-top: 20px;
	font-size: 16px;
}
.keyClass {
	font-weight: bold;
}
.valueCalss {
	margin-left: 8px;
}
.contentClass > span {
	margin-right: 40px;
}
.contentClass > p {
	margin: 0 0 0 0;
}
.contentClass > div {
	margin: 10px 0 0 0;
}

第二种

image_2.png

个人思路：

  1. 总体上是默认的流动模型（flow），所以总体使用流程模型
  2. 除标题外，每行是左右分栏，所以考虑浮动模型（float）和层模型（layer）
  3. 注意到分割线等细节，浮动模型不适合，考虑每行使用层模型布局

综上，第二种样式代码如下：

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!-- html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>三种简历</title>

		<link rel="stylesheet" type="text/css" href="css/test2.css"/>
	</head>
	<body>

		<div class="pageTitleClass">
			<p>XX</p>
		</div>
		
		<div class="cellClass">
			<div class="titleClass">
				basicInfo
			</div>
			
			<div class="contentClass">
				<span>
					<span class="keyClass">name</span>
					<span class="valueCalss">zhangsan</span>
				</span>
				<span>
					<span class="keyClass">gender</span>
					<span class="valueCalss">male</span>
				</span>
				<span>
					<span class="keyClass">position</span>
					<span class="valueCalss">xxxxxxxxxxxxx</span>
				</span>
			</div>
		</div>
		
		<div class="cellClass">
			<div class="titleClass">
				phone&email
			</div>
			
			<div class="contentClass">
				<span>
					<span class="keyClass">phone</span>
					<span class="valueCalss">18600000000</span>
				</span>
				<span>
					<span class="keyClass">email</span>
					<span class="valueCalss">xxxxxxxxxxxx@xxx.com</span>
				</span>
				<span>
					<span class="keyClass">homepage</span>
					<span class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxxx</span>
				</span>
			</div>
		</div>
		
		<div class="cellClass">
			<div class="titleClass">
				schools
			</div>
			
			<div class="contentClass">
				<span>
					<span class="keyClass">Bachelor</span>
					<span class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxx</span>
				</span>
				<span>
					<span class="keyClass">Postgraduate</span>
					<span class="valueCalss">xxxxxxxxxxxxxxxxxxxxxxxx</span>
				</span>
			</div>
		</div>
	</body>
</html>

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
45
46
47
/* css */
.pageTitleClass {
	width: 100%;
	height: 60px;
	background-color: darkgray;
	line-height: 60px;
}
.pageTitleClass > p {
	margin: 0 0 0 20px;
	color: white;
	font-size: 16px;
}

.cellClass {
	margin-top: 1px;
	height: 100px;
	background: white;
	position: relative;
	background: lightgray;
}

.titleClass {
	width: 100px;
	line-height: 100px;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
}

.contentClass {
	position: absolute;
	top: 1px;
	left: 100px;
	right: 0;
	bottom: 0;
	
	padding-top: 12px;
	padding-left: 10px;
	background: white;
}

.keyClass {
	font-weight: bold;
}
.valueCalss {
	margin-left: 8px;
}

未完待续