最近學習Web前端， 把HTML5和CSS3學完了，覺得有必要多做一些練習再進行下一步JavaScript的學習，就在網上找了一些實戰項目，在這裏分享一下。
總體預覽：
總體框架：
HTML代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="css/main.css" type="text/css" >
<title>向煙霞笑傲</title>
</head>
<body>
<div class="side-bar">
<div class="header">
<a href="index.html" class="logo">向煙霞笑傲</a>
<div class="intro">四時之景不同，而樂亦無窮也~</div>
</div>
<div class="nav">
<a href="#" class="item">首頁</a>
<a href="#" class="item">博文</a>
<a href="#" class="item">關於</a>
</div>
<div class="tag-list">
<a href="#" class="item">#C</a>
<a href="#" class="item">#web</a>
<a href="#" class="item">#Python</a>
</div>
</div>
<div class="main">
<div class="article-list">
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
<div class="item">
<a href="article.html" class="title">醉翁亭記</a>
<div class="status">發佈與：2019-11-23 | 閱讀： 2333 | 標籤： #Web</div>
<div class="content">
環滁皆山也。其西南諸峯，林壑尤美，望之蔚然而深秀者，琅琊也。山行六七裏，漸聞水聲潺潺而瀉出於兩峯之間者，釀泉也。峯迴路轉，有亭翼然臨於泉上者，醉翁亭也。作亭者誰？山之僧智仙也。名之者誰？太守自謂也。太守與客來飲於此，飲少輒醉，而年又最高，故自號曰醉翁也。醉翁之意不在酒，在乎山水之間也。山水之樂，得之心而寓之酒也。
</div>
</div>
</div>
</div>
</body>
</html>
CSS代碼：
body{
background-color: #454545;
line-height: 1.7;
}
a{
text-decoration: none;
}
a,body{
color: #eee;
}
.side-bar{
float: left;
width: 20%;
position: fixed;
}
.side-bar .nav a,
.side-bar .tag-list a{
display: block;
padding: 5px;
color: #888;
transition: color 200ms;
}
.side-bar .nav a{
font-weight: 700;
}
.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
color: #eee;
}
.side-bar>*{
padding: 10px 15px;
}
.main{
float: right;
width: 80%;
color: #454545;
}
.header .logo{
border: 5px solid #eee;
padding: 10px 20px;
font-size: 30px;
display: inline-block;
margin-bottom: 5px;
line-height: 1;
}
.article-list,
.article{
margin-right: 30%;
background-color: white;
padding: 20px 30px;
box-shadow: 0 0 3px 5px rgba(0,0,0,0.2);
}
.article-list .item{
margin-bottom: 25px;
}
.article-list .item .title,
.article .title{
color: #454545;
font-size: 22px;
font-weight: 700;
}
.article-list .item .status,
.article .status{
font-size: 13px;
color: #bbb;
}
.article-list .item > *,
.article .item> *{
margin: 10px 0;
}
.article .content{
text-indent: 2em;
}
這個項目是我在網上看到的，來源於表嚴肅，他的個人網站：https://biaoyansu.com/
有興趣的小夥伴可以去他的網站看一看，我覺得講的還不錯。
adios~