-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (147 loc) · 6.76 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="shortcut icon" type="image/x-icon" href="img/bitbug_favicon.ico">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/lib/normalize.css">
<link rel="stylesheet" href="css/commom/global.css">
<link rel="stylesheet" href="css/component/nav.css">
<link rel="stylesheet" href="css/page/index.css">
<title>myblog</title>
</head>
<body style="background-color: rgba(255, 255, 255, 0.1);">
<!-- 导航栏 -->
<div class="nav" id="nav">
<div class="container">
<div class="logo fl">
<img src="img/logo.png" alt="">
</div>
<div class="navbar">
<a href="index.html" class="navlink home">
<i class="fa fa-home"></i>Home</a>
<a href="" class="navlink library">
<i class="fa fa-book"></i>Library</a>
<a href="view/page/movie.html" class="navlink movie">
<i class="fa fa-tv"></i>TV</a>
<a href="view/page/game.html" class="navlink game">
<i class="fa fa-gamepad"></i>Games</a>
<a href="view/page/music.html" class="navlink music">
<i class="fa fa-music"></i>Music</a>
<a href="" class="navlink aboutme" id="aboutme">
<i class="fa fa-user-circle"></i>About me</a>
</div>
<div class="aboutme-content" id="aboutme_content" hidden>
<button id="aboutme_close" class="close-side">Collapse
<i class="fa fa-chevron-circle-right"></i>
</button>
<div class="me-pic">
<img src="img/avatar.jpg">
</div>
<div class="person-info">
<p>
<i class="fa fa-user-circle-o"></i>wuyouhua</p>
<p>
<i class="fa fa-envelope-o"></i>[email protected]</p>
<p>
<i class="fa fa-phone"></i>12345678901</p>
<p>
<i class="fa fa-address-book-o"></i>beijing</p>
<p>
<i class="fa fa-qq"></i>1234567</p>
</div>
<div class="qrcode">
<img src="img/QRcode.jpg">
</div>
<p class="motto">The world is hard,strruggle is the only way out.</p>
</div>
</div>
</div>
<!-- 主页内容一 -->
<div class="area1">
<div class="container">
<div class="content">
<div class="desc">
<p class="self-intro">Hey there, My name is Wu YouHua and I'm a Interactive Designer and Web Developer.</p>
</div>
<div class="desc-pic">
<img src="img/avatar.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- 主页内容二 -->
<div class="area2">
<div class="container">
<div class="library">
<div>
<a href="view/page/library.html" class="liblink">Library
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="shelf">
<div class="booklist book1">
<div class="book-pic">
<img src="img/book/shihuang.jpg" alt="">
</div>
<p class="book-desc">西方人眼中的恺撒，东方人眼中的千古一帝。</p>
</div>
<div class="booklist book2">
<div class="book-pic">
<img src="img/book/bojue.jpg" alt="">
</div>
<p class="book-desc">为了复仇，但也不忘报恩，对所做的事情格外执着。</p>
</div>
<div class="booklist book3">
<div class="book-pic">
<img src="img/book/biancheng.jpg" alt="">
</div>
<p class="book-desc">一首哀婉凄美的田园牧歌，美得让人神往，脆弱得令人心疼。</p>
</div>
<div class="booklist book4">
<div class="book-pic">
<img src="img/book/jianai.jpg" alt="">
</div>
<p class="book-desc">虽然是一个小人物，只要艰苦奋斗，也可能冲破阻碍达到目的。</p>
</div>
</div>
</div>
</div>
</div>
<!-- 主页内容三 -->
<div class="area3">
<div class="container">
<div class="tv">
<div>
<a href="view/page/movie.html" class="tvlink">TV
<i class="fa fa-arrow-right"></i>
</a>
</div>
<div class="tvbox">
<div class="tvshow show1">
<div class="show-pic">
<img src="img/tv/dragon.jpg" alt="">
</div>
<p>《龙珠》根据日本著名漫画家鸟山明的同名漫画改编，到目前共有4部TV动画(龙珠、龙珠GT、龙珠Z、龙珠超)，剧场版电影:复活的弗利萨。漫画讲述了主人公孙悟空的一系列成长经历。</p>
</div>
<div class="tvshow show2">
<div class="show-pic">
<img src="img/tv/avenger.jpg" alt="">
</div>
<p>该片讲述复仇者联盟和他们的超级英雄盟友们必须愿意牺牲一切，才能在灭霸毁灭宇宙之前将其击败。</p>
</div>
<div class="tvshow show3">
<div class="show-pic">
<img src="img/tv/langya.jpg" alt="">
</div>
<p>《琅琊榜》根据海宴同名网络小说改编，以平反冤案、扶持明君、振兴山河为主线，讲述了“麒麟才子”梅长苏才冠绝伦、以病弱之躯拨开重重迷雾、智博奸佞，为昭雪多年冤案、扶持新君所进行的一系列斗争。</p>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="js/main.js"></script>
</html>