上周，根据慕课网的视频，写了个静态页面，记录下。
---------js
---------img
---------css
js下 index
<!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">
</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">
</div>
</div>
<div class="article-preview">
<div class="img-section">
</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">
© 昨天的你
</div>
</footer>
</div>
</div>
</body>
</html>
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 下图片素材
img
img
img
img
