上周，根據(jù)慕課網(wǎng)的視頻，寫了個(gè)靜態(tài)頁(yè)面，記錄下。
---------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="#">一棵開(kāi)花的樹</a>
</div>
<ul>
<li>
<a href="#" class="active">首頁(yè)</a>
</li>
<li>
<a href="#">目錄</a>
</li>
<li>
<a href="#">菜單</a>
</li>
<li>
<a href="#">聯(lián)系我</a>
</li>
</ul>
</nav>
<div id="banner">
<div class="inner">
<h1>情不知所起一往而深</h1>
<p class="sub-heading"> 青春是一本太倉(cāng)促的書，我們含著淚，一讀再讀。</p>
<button>了解我</button>
<div class="more">更多</div>
</div>
</div>
</header>
<div class="content">
<section class="green-section">
<div class="wapper">
<div>
<h2>
如何讓你遇見(jiàn)我
在我最美麗的時(shí)刻
</h2>
<div class="hr"></div>
<p class="sub-heading">
今生今世 我只是個(gè)戲子 永遠(yuǎn)在別人的故事里流著自己的淚
</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>
曾那樣輕易地?fù)]手道別<br>
而滄桑了二十年後<br>
我們的魂魄卻夜夜歸來(lái)<br>
微風(fēng)拂過(guò)時(shí)<br>
便化作滿園的郁香
</p>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>two</h2>
<div class="sub-heading"> 抉擇</div>
<p>
假如我來(lái)世上一遭<br>
只為與你相聚一次<br>
只為了億萬(wàn)光年里的那一剎那<br>
一剎那里所有的甜蜜與悲凄<br>
那麼就讓一切該發(fā)生的<br>
都在瞬間出現(xiàn)吧<br>
我俯首感謝所有星球的相助<br>
讓我與你相遇<br>
與你別離<br>
完成了上帝所作的一首詩(shī)<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>
所有的結(jié)局都已寫好<br>
所有的淚水也都已啟程<br>
卻忽然忘了是怎麼樣的一個(gè)開(kāi)始<br>
在那個(gè)古老的不再回來(lái)的夏日<br>
無(wú)論我如何地去追索<br>
年輕的你只如云影掠過(guò)<br>
而你微笑的面容極淺極淡<br>
逐漸隱沒(méi)在日落後的群嵐<br>
遂翻開(kāi)那發(fā)黃的扉頁(yè)<br>
命運(yùn)將它裝訂得極為拙劣<br>
含著淚我一讀再讀<br>
卻不得不承認(rèn)<br>
青春是一本太倉(cāng)促的書<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">
娛樂(lè)一下下
</div>
</div>
<div class="card-group clearfix">
<div class="card">
<h3>熱門</h3>
<p>
今天去同事家，同事10歲的兒子開(kāi)的門，叼著煙，很屌很欠揍。我問(wèn)：你爸在家嗎？那小子眉毛一挑：你看我的樣子，他們會(huì)在家嗎？，，，，我，，，</div>
<div class="card">
<h3>文字</h3>
<p>我有四個(gè)愿望：不勞而獲，不學(xué)有術(shù)，狂吃不胖，相愛(ài)無(wú)傷
</p>
</div>
<div class="card">
<h3>穿越</h3>
<p>人到底什么時(shí)候最恐懼，是沒(méi)錢的時(shí)候，還是沒(méi)食物、沒(méi)水的時(shí)候？都不是。最恐懼的時(shí)候，是沒(méi)有方向的時(shí)候，有了方向，其實(shí)所有的困難都不是困難。
</p>
</div>
<div class="card">
<h3>新鮮</h3>
<p>
有些路，走下去，會(huì)很累，但是不走，會(huì)后悔。人生沒(méi)有對(duì)錯(cuò)，只有選擇后的堅(jiān)持！不后悔，走下去，就是對(duì)的，喜歡一句詩(shī)：走著走著，花就開(kāi)了。
</p>
</div>
</div>
</div>
</section>
</div>
<footer>
<ul class="share-group">
<li>心靈雞湯</li>
<li>經(jīng)典語(yǔ)錄</li>
<li>散文詩(shī)歌</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
