-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
157 lines (137 loc) · 4.41 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
151
152
153
154
155
156
157
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blog of Royce</title>
<link rel="stylesheet" type="text/css" href="css/reste.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<nav>
<ul>
<li class = "logo" id="sidebar_trigger"> <a href="#">Menu</a></li>
<li><a href="#" id="">视频分享</a></li>
<li><a href="#" id="">技术分享</a></li>
<li><a href="#" id="">散文游记</a></li>
<li><a href="#" id="">旅行摄影</a></li>
<li><a href="index.html" id="">首页</a></li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<div class="la_masion">
<div class="hr"></div>
<h1>La masion</h1>
<div class="hr"></div>
</div>
<p class="subtitle">谦逊，淡雅，安之若素 </p>
<input type="button" value="个人简历" onclick="location.href='article.html'">
<div class="more">更多</div>
</div>
</div>
</header>
<div class="content">
<section class="section_green">
<div class="wrapper">
<h2>Le Premier</h2>
<div class="hr"></div>
<div class="sub_heading"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
</div>
<div class="icon_group">
<span class="icon">item1</span>
<span class="icon">item2</span>
<span class="icon">item3</span>
</div>
</div>
</section>
<section class="section_blue">
<div class="preview_article clear_float">
<div class="img_section">
<img src="img/1.jpg" alt="">
</div>
<div class="text_section">
<h2>凯旋门·顶</h2>
<h2 class="subtitle">巴黎·法国</h2>
<p>"海明威说巴黎是流动的盛宴，你说巴黎是宇宙的明珠，我说你是个诗人"</p>
</div>
</div>
<div class="preview_article clear_float">
<div class="text_section">
<h2>中心大广场</h2>
<h2 class="subtitle">罗马·意大利</h2>
<p>“你看到人们在古罗马遗迹边阅读，野餐；你看到生活的气息，也看到这座城市经历的风霜”</p>
</div>
<div class="img_section">
<img src="img/rome.jpg" alt="">
</div>
</div>
<div class="preview_article clear_float">
<div class="img_section">
<img src="img/bruge.jpg" alt="">
</div>
<div class="text_section">
<h2>北方威尼斯</h2>
<h2 class="subtitle">布鲁日·比利时</h2>
<p>“这座城市让我想起我在南方的家，离开时竟有不舍。后来才发现舍不得的，只是家的幻觉”</p>
</div>
</div>
</section>
<section class="section_perple">
<div class="heading_wrapper">
<div >
<h2>技术日记</h2>
</div>
<div >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia tempora consequuntur, culpa eligendi modi ullam atque laudantium, repellat, vitae autem error aut voluptatibus magnam. Esse magni dolor, veritatis pariatur quas?</p>
</div>
</div>
<div class="card_group clear_float">
<div class="card">
<h3>111</h3>
<p>Lorem ipsum dolor sclear_floatit amet, consectetur adipisicing elit. Porro, fuga aut deserunt esse sapiente nostrum dolorem molestiae odio, excepturi illum incidunt, animi nulla.</p>
</div>
<div class="card">
<h3>111</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolore nisi, magnam earum repellat minus quidem eius explicabo architecto molestiae, dolor facere tenetur ex, vel libero itaque in totam et.</p>
</div>
<div class="card">
<h3>111</h3>
<p>Lorem ipsum dolor sclear_floatit amet, consectetur adipisicing elit. Porro, fuga aut deserunt esse sapiente nostrum dolorem molestiae odio</p>
</div>
<div class="card">
<h3>111</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga dolore nisi, magnam earum repellat minus quidem eius explicabo architecto molestiae, dolor facere tenetur ex, vel libero itaque in totam et.</p>
</div>
</div>
</section>
<footer>
<div class="foot_wrapper">
<ul class="share_group">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
</ul>
<div class="copy">
© 沈慈航
</div>
</div>
</footer>
<div class="mask"></div>
<div id="sidebar">
<ul>
<li>
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
<a href="#">链接4</a>
<a href="#">链接5</a>
</li>
</ul>
</div>
<script src="css/js/jquery.js"></script>
<script src="css/js/main.js"></script>
</body>
</html>