-
Notifications
You must be signed in to change notification settings - Fork 16
Expand file tree
/
Copy pathindex.html
More file actions
156 lines (134 loc) · 6.06 KB
/
index.html
File metadata and controls
156 lines (134 loc) · 6.06 KB
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>Design</title>
<link rel="stylesheet" type="text/css" href="style/index.css" />
</head>
<body>
<!--The header of the index page.-->
<div id="header">
<div id="nav">
<div id="mylogo">
<img src="img/1011.png" />
</div>
<ul id="navbar">
<li><a href="index.html" class="navlink">首页</a></li>
<li><a href="blog.html" class="navlink">文章</a></li>
<li><a href="gallery.html" class="navlink">作品</a></li>
<li><a href="about.html" class="navlink">关于</a></li>
</ul>
</div>
<a href="https://github.com/" id="githublogo"><img src="img/icon-github.png" /></a>
</div>
<div id="mainsection">
<!--首页背景大图-->
<div id="indexbigimg">
<div id="formaltext">
<h3>标题1</h3>
<p>这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。这里是正文。</p>
</div>
</div>
<!--首页三列等高-->
<div id="threeequalheight">
<div id="leftsection" class="equalheight">
<div class="inner">
<img src="img/290.jpg" class="equalimg" />
<p>这里是正文，字体大小12px，行高170%。整块白色的底宽度为320px，图片大小为300*180.</p>
<p>文字距离图片下方间隔为15px，距离白色底左右两侧的内边距为30px，距离白色底块下边的内边距为25px。</p>
<p>三个白色模块之间的间隔为10px，距离上面banner图片的间隔为10px。</p>
</div>
</div>
<div id="centersection" class="equalheight">
<div class="inner">
<img src="img/293.jpg" class="equalimg" />
<p>这三个白色模块的高度需要保持一致，且自适应于文字内容高度。</p>
</div>
</div>
<div id="rightsection" class="equalheight">
<div class="inner">
<img src="img/291.jpg" class="equalimg" />
<p>月黑风高，彤云密布，寥廓霜天显得分外孤寂、冷清。昏暗的夜幕似无边无际的穹庐，使这城阙参差的大清皇城更显得地阔、天低，殿宇巍峨、气氛肃穆。</p>
<p>紫禁城正阳门前，是一马平川的御道广场，空荡荡不见一个人影。白日这里清风雅静，夜晚则禁卫森严，偌大的广场上杳无人影，如远古的旷野一般寂静。但听得两旁钟楼的更鼓在声声回荡，在广场上发出久久沉重的回响……</p>
</div>
</div>
</div>
<!--首页自我介绍-->
<div id="selfcontiner">
<img src="img/167.png" id="headpic" />
<div id="selfintruction">
<h2>Hi, I'm Fogwind.</h2>
<p>这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍，这是一段长长的自我介绍。</p>
</div>
</div>
</div>
<!--The footer of the index page.-->
<div id="footer">
<ul id="footernavbar">
<li><a href="index.html" class="navlink">首页</a></li>
<li><a href="index.html" class="navlink">文章</a></li>
<li><a href="index.html" class="navlink">作品</a></li>
<li><a href="index.html" class="navlink">关于</a></li>
</ul>
<div id="reference">
<ul class="referencenav">
<h4>学习资料</h4>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
</ul>
<ul class="referencenav">
<h4>友情链接</h4>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
</ul>
<ul class="referencenav">
<h4>学习资料</h4>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
</ul>
<ul class="referencenav">
<h4>友情链接</h4>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
</ul>
<ul class="referencenav">
<h4>学习资料</h4>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
<li><a href="#" class="referencelink">LINK</a></li>
</ul>
</div>
<div id="footermassage">
<p>版权信息</p>
<a href="https://github.com/"><img src="img/icon-github.png" /></a>
</div>
</div>
<script>
function hiddenGithub() {
var html = document.documentElement;
var githublogo = document.getElementById("githublogo");
if(html.clientWidth<1050) {
githublogo.style.display = "none";
} else {
githublogo.style.display = "block";
}
}
window.onresize=function() {hiddenGithub();};
</script>
</body>
</html>