上周，根据慕课网的视频，写了个静态页面，记录下。

———js

———img

———css

js下 index

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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>

    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/main.css">

</head>
<body>
<div>
    <div class="main-wrapper">
        <header>
            <nav>
                <div class="logo">
                    <a href="#">一棵开花的树</a>
                </div>
                <ul>
                    <li>
                        <a href="#" class="active">首页</a>
                    </li>
                    <li>
                        <a href="#">目录</a>
                    </li>
                    <li>
                        <a href="#">菜单</a>
                    </li>
                    <li>
                        <a href="#">联系我</a>
                    </li>

                </ul>
            </nav>
            <div id="banner">
                <div class="inner">
                    <h1>情不知所起一往而深</h1>

                    <p class="sub-heading"> 青春是一本太仓促的书，我们含着泪，一读再读。</p>
                    <button>了解我</button>

                    <div class="more">更多</div>

                </div>
            </div>

        </header>
        <div class="content">
            <section class="green-section">
                <div class="wapper">
                    <div>
                        <h2>
                            如何让你遇见我
                            　　在我最美丽的时刻
                        </h2>

                        <div class="hr"></div>
                        <p class="sub-heading">
                            今生今世 我只是个戏子 永远在别人的故事里流着自己的泪
                            　
                        </p>

                        <div class="icon-group">
                            <span class="icon"><p>章一</p></span>
                            <span class="icon"><p>章二</p></span>
                            <span class="icon"><p>章三</p></span>

                        </div>
                    </div>
                </div>
            </section>
            <section class="grey-section">
                <div class="article-preview">
                    <div class="img-section">
                        <img src="../img/pic.jpg" alt="图片">
                    </div>
                    <div class="text-section">
                        <h2>one</h2>

                        <div class="sub-heading"> 七里香</div>
                        <p>
                              溪水急着要流向海洋<br>
                            　　浪潮却渴望重回土地<br>
                            　　在绿树白花的篱前<br>
                            　　曾那样轻易地挥手道别<br>
                            　　而沧桑了二十年後<br>
                            　　我们的魂魄却夜夜归来<br>
                            　　微风拂过时<br>
                            　　便化作满园的郁香
                        </p>
                    </div>
                </div>

                <div class="article-preview">

                    <div class="text-section">
                        <h2>two</h2>

                        <div class="sub-heading"> 抉择</div>
                        <p>
                              假如我来世上一遭<br>
                            　　只为与你相聚一次<br>
                            　　只为了亿万光年里的那一刹那<br>
                            　　一刹那里所有的甜蜜与悲凄<br>
                            　　那麽就让一切该发生的<br>
                            　　都在瞬间出现吧<br>
                            　　我俯首感谢所有星球的相助<br>
                            　　让我与你相遇<br>
                            　　与你别离<br>
                            　　完成了上帝所作的一首诗<br>
                            　　然後再缓缓地老去<br>
                        </p>
                    </div>
                    <div class="img-section">
                        <img src="../img/pic02.jpg" alt="图片">
                    </div>
                </div>

                <div class="article-preview">
                    <div class="img-section">
                        <img src="../img/pic03.jpg" alt="图片">
                    </div>
                    <div class="text-section">
                        <h2>three</h2>

                        <div class="sub-heading">青春</div>
                        <p>
                              所有的结局都已写好<br>
                            　　所有的泪水也都已启程<br>
                            　　却忽然忘了是怎麽样的一个开始<br>
                            　　在那个古老的不再回来的夏日<br>
                            　　无论我如何地去追索<br>
                            　　年轻的你只如云影掠过<br>
                            　　而你微笑的面容极浅极淡<br>
                            　　逐渐隐没在日落後的群岚<br>
                            　　遂翻开那发黄的扉页<br>
                            　　命运将它装订得极为拙劣<br>
                            　　含着泪我一读再读<br>
                            　　却不得不承认<br>
                            　　青春是一本太仓促的书<br>
                        </p>
                    </div>
                </div>

            </section>
            <section class="purple-section">
                <div class="wapper">
                    <div class="heading-wrapper">
                        <h2>番外篇</h2>

                        <div class="hr"></div>
                        <div class="sub-heading">
                            娱乐一下下
                        </div>
                    </div>

                    <div class="card-group clearfix">
                        <div class="card">
                            <h3>热门</h3>

                            <p>
                                今天去同事家，同事10岁的儿子开的门，叼着烟，很屌很欠揍。我问：你爸在家吗？那小子眉毛一挑：你看我的样子，他们会在家吗？，，，，我，，，</div>
                        <div class="card">
                            <h3>文字</h3>

                            <p>我有四个愿望：不劳而获，不学有术，狂吃不胖，相爱无伤
                            </p>
                        </div>
                        <div class="card">
                            <h3>穿越</h3>

                            <p>人到底什么时候最恐惧，是没钱的时候，还是没食物、没水的时候？都不是。最恐惧的时候，是没有方向的时候，有了方向，其实所有的困难都不是困难。
                            </p>
                        </div>
                        <div class="card">
                            <h3>新鲜</h3>

                            <p>
                                有些路，走下去，会很累，但是不走，会后悔。人生没有对错，只有选择后的坚持！不后悔，走下去，就是对的，喜欢一句诗：走着走着，花就开了。
                            </p>
                        </div>
                    </div>

                </div>

            </section>

        </div>

        <footer>
            <ul class="share-group">
                <li>心灵鸡汤</li>
                <li>经典语录</li>
                <li>散文诗歌</li>

            </ul>
            <div class="copy">
                &copy 昨天的你
            </div>

        </footer>
    </div>

</div>
</body>
</html>

css 下main.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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
nav {
    background: transparent;
    height: 50px;
}

#banner {
    background: transparent;
    height: 700px
}

nav ul {
    list-style: none;
    margin: 0;
    float: right;
}

nav ul li, nav .logo {
    display: inline-block;
    line-height: 50px;
    margin-right: 20px;
}

nav ul li a {
    line-height: 50px;
    text-decoration: none;
    display: inline-block;
    height: inherit;
    color: #fff;
}

nav .logo {
    float: left;
    margin-left: 20px;
    text-decoration: none;

}

#banner .inner {
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    top: 160px;
    color: #fff;
}

#banner .inner h1 {
    margin: 0;

}

button {
    border: none;
    background: #333;
    color: #eee;
    padding: 10px;
}

#banner button {
    padding: 14px 40px;
}

#banner .inner .more {
    margin-top: 200px
}

.logo {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
}

.logo a {
    color: #fff;
    text-decoration: none;
}

.green-section {
    background: #089DB0;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.wapper {
    max-width: 1080px;
    margin: 0 auto;

}

.hr {
    width: 100%;
    height: 2px;
    margin: 20px auto;
}

.green-section .wapper .hr {
    background: #078494;
    width: 60%;
}

.sub-heading {
    font-size: 18px;
    padding: 10px;
}

.green-section .icon-group .icon {
    display: inline-block;
    width: 80px;
    height: 80px;
    border: 1px solid #0D6f7c;
    transform: rotate(45deg);
    margin: 20px;

}

.green-section .icon-group p {
    transform: rotate(-45deg);

}

.icon-group {
    margin-top: 30px;
    text-align: center;
}

.grey-section {
    color: #fff;
    background: #252F34;
}

.grey-section .img-section {
    width: 45%;
}

.grey-section .text-section {
    width: 55%;
}

.img-section img {
    width: 100%;
}

.article-preview > div {
    float: left;
    /*font-size: 0;*/
}

.article-preview:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

.article-preview:after {
    content: '';
    display: block;
    clear: both;
}

.text-section {
    position: relative;
    top: 68px;
    left: 50px;
}


.text-section .sub-heading {
    font-size: 22px;
    margin-top: 0;
}

.text-section p {
    font-size: 18px;
    letter-spacing: 1px;
}

.text-section > * {
    max-width: 90%;
}

.purple-section {
    padding: 80px;
    background: #262149;
    color: #fff;
}

.purple-section .heading-wrapper {
    text-align: center;
}

.purple-section .hr {
    background: #373259;
    width: 60%;
}

.card {
    float: left;
    width: 50%;
    min-height: 300px;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid white;
}

.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

.card h3 {
    font-size: 18px;
}

p {
    font-size: 16px;
    letter-spacing: 1px;

}

.card:first-child {
    background: rgba(0, 0, 0, 0.04);
}

.card:nth-child(2) {
    background: rgba(0, 0, 0, 0.08);
}

.card:nth-child(3) {
    background: rgba(0, 0, 0, 0.12);
}

.card:nth-child(4) {
    background: rgba(0, 0, 0, 0.16);
}

footer {
    background: #333;
    color: #fff;
    min-height: 200px;
    text-align: center;
}

ul {
    margin: 0;
}

.share-group {
    display: block;
    width: 1080px;
    margin: 0 auto;
    padding: 50px;
}

.share-group li {
    display: inline-block;
    padding: 10px;
}
.copy{
    padding-bottom: 50px;
}

.main-wrapper{
    background: #444 url(../img/timg.jpg);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

img 下图片素材
img
img
img
img