上周，根据慕课网的视频，写了个静态页面，记录下。
---------js
---------img
---------css
js下 index
如何让你遇见我
在我最美丽的时刻
今生今世 我只是个戏子 永远在别人的故事里流着自己的泪
章一
章二
章三
one
七里香
溪水急着要流向海洋
浪潮却渴望重回土地
在绿树白花的篱前
曾那样轻易地挥手道别
而沧桑了二十年後
我们的魂魄却夜夜归来
微风拂过时
便化作满园的郁香
two
抉择
假如我来世上一遭
只为与你相聚一次
只为了亿万光年里的那一刹那
一刹那里所有的甜蜜与悲凄
那麽就让一切该发生的
都在瞬间出现吧
我俯首感谢所有星球的相助
让我与你相遇
与你别离
完成了上帝所作的一首诗
然後再缓缓地老去
three
青春
所有的结局都已写好
所有的泪水也都已启程
却忽然忘了是怎麽样的一个开始
在那个古老的不再回来的夏日
无论我如何地去追索
年轻的你只如云影掠过
而你微笑的面容极浅极淡
逐渐隐没在日落後的群岚
遂翻开那发黄的扉页
命运将它装订得极为拙劣
含着泪我一读再读
却不得不承认
青春是一本太仓促的书
番外篇
娱乐一下下
热门
今天去同事家，同事10岁的儿子开的门，叼着烟，很屌很欠揍。我问：你爸在家吗？那小子眉毛一挑：你看我的样子，他们会在家吗？，，，，我，，，
文字
我有四个愿望：不劳而获，不学有术，狂吃不胖，相爱无伤
穿越
人到底什么时候最恐惧，是没钱的时候，还是没食物、没水的时候？都不是。最恐惧的时候，是没有方向的时候，有了方向，其实所有的困难都不是困难。
新鲜
有些路，走下去，会很累，但是不走，会后悔。人生没有对错，只有选择后的坚持！不后悔，走下去，就是对的，喜欢一句诗：走着走着，花就开了。
css 下main.css
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 下图片素材
