-
Notifications
You must be signed in to change notification settings - Fork 0
/
style.css
130 lines (112 loc) · 2.32 KB
/
style.css
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>个人学术网页</title>
<style>
/* 全局样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 头部样式 */
header {
background-color: #f5f5f5;
padding: 20px;
text-align: center;
}
header h1 {
color: #333;
margin: 0;
font-size: 28px;
}
header img {
width: 150px;
height: 150px;
border-radius: 50%;
margin-top: 20px;
}
/* 导航样式 */
nav {
background-color: #333;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
margin: 0 10px;
font-size: 18px;
}
/* 段落样式 */
section {
padding: 20px;
}
section h2 {
color: #333;
font-size: 24px;
margin-top: 0;
}
section p {
line-height: 1.5;
}
/* 页脚样式 */
footer {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
font-size: 14px;
color: #666;
}
/* 响应式设计 */
@media screen and (max-width: 767px) {
/* 小屏幕设备样式 */
header h1 {
font-size: 24px;
}
header img {
width: 120px;
height: 120px;
margin-top: 10px;
}
nav a {
font-size: 16px;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 中等屏幕设备样式 */
header h1 {
font-size: 32px;
}
header img {
width: 180px;
height: 180px;
margin-top: 30px;
}
nav a {
font-size: 20px;
}
}
</style>
</head>
<body>
<header>
<h1>个人学术网页</h1>
<img src="avatar.jpg" alt="头像">
</header>
<nav>
<a href="#">首页</a>
<a href="#">关于我</a>
<a href="#">研究方向</a>
<a href="#">联系方式</a>
</nav>
<section>
<h2>欢迎访问个人学术网页</h2>
<p>这里是关于我的个人学术研究的网页。你可以了解我的研究方向和最新成果，并通过联系方式与我取得联系。</p>
</section>
<footer>
© 2023 个人学术网页. All rights reserved.
</footer>
</body>
</html>