自制簡單博客模板

時間  2019-12-07
標籤 自制 簡單 博客 模板 简体版
原文   原文鏈接

 

index代碼段css

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>森林之下</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">森林之下</a>
      <div class="intro">哈哈AHH</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">信息</a>
      <a href="#" class="item">郵件</a>
      <a href="#" class="item">電話</a>
    </div>
  </div>
  <div class="main">
    <div class="article-list">
      <div class="item">
        <a href="article.html"class="title">德媒：不懼貿易戰 自力更生的中國經濟或讓特朗普勃然大怒？！</a>
        <div class="status">發佈於：2018-5-2 | 吳新明 | 13小時前</div>
        <div class="content">
        </div>
      </div>
      <div class="item">
        <a href="article.html"class="title">個人博客</a>
        <div class="status">發佈於：2018-5-2 | 哈哈哈 | 靜安寺個</div>
        <div class="content">
          fjslkfslkgsdlgjalsgjsdkgdgjaksjlad
        </div>
      </div>
      <div class="item">
        <a href="article.html"class="title">個人博客</a>
        <div class="status">發佈於：2018-5-2 | 哈哈哈 | 靜安寺個</div>
        <div class="content">
          fjslkfslkgsdlgjalsgjsdkgdgjaksjlad
        </div>
      </div>
      <div class="item">
        <a href="article.html"class="title">個人博客</a>
        <div class="status">發佈於：2018-5-2 | 哈哈哈 | 靜安寺個</div>
        <div class="content">
          fjslkfslkgsdlgjalsgjsdkgdgjaksjlad
        </div>
      </div>
      <div class="item">
        <a href="article.html"class="title">個人博客</a>
        <div class="status">發佈於：2018-5-2 | 哈哈哈 | 靜安寺個</div>
        <div class="content">
          fjslkfslkgsdlgjalsgjsdkgdgjaksjlad
        </div>
      </div>
    </div>
  </div>
</body>
</html>

article代碼段html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://cdn.bootcss.com/normalize/8.0.0/normalize.min.css">
  <link rel="stylesheet" href="css/main.css">
  <title>森林之下</title>
</head>
<body>
  <div class="side-bar">
    <div class="header">
      <a href="index.html" class="logo">森林之下</a>
      <div class="intro">哈哈AHH</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">信息</a>
      <a href="#" class="item">郵件</a>
      <a href="#" class="item">電話</a>
    </div>
  </div>
  <div class="main">
    <div class="article">
      <h1 class="title">德媒：不懼貿易戰 自力更生的中國經濟或讓特朗普勃然大怒？！</h1>
      <div class="status">發佈於：2018-5-2 | 吳新明 | 13小時前</div>
      <div class="content">
        <p>儘管與美國的貿易戰一觸即發，中國經濟增加依然再次超出預期。</p>
        <p>有德國新聞媒體的相關專家表示，這爲中國政府解決部分國內問題創造了條件。這個消息也許會讓特朗普很是生氣，甚至是勃然大怒：中國經濟日益擺脫對於出口的依賴，運行良好超過預期。</p>
        <p>根據最新數字，我國今年第一季度國內生產總值同比增加6.8%，超過經濟專家們此前作出的6.7%的預測值。如今的增加數字甚至比政府計劃的整年目標（6.5%左右）還要高。</p>
        <P>而必須指出的是，中國在此期間還關閉了許多對環境形成嚴重污染的工廠，對銀行信貸踩剎車，取締影子銀行，中止保險巨頭的投機行爲，打擊房產泡沫。如今的訊息很清楚：即使是在自我設限的狀況下，中國經濟也能持續穩定發展。</P>
        <P>固然，人們依然能夠就官方統計數字的準確性展開爭辯。真實數字到底是6.7%或6.6%，恐怕也難以知曉。但過去數十年的經驗顯示出，整體趨勢是毫無疑問的。這一趨勢就是：狀況好過預期。</P>
        <P>另外一個顯而易見的事實是：從此出口對於中國經濟的影響將日益減小。出口在中國國內生產總值中所佔比例在過去十年中已經從35%降低到18%。</P>
        <P>目前中國經濟增加中的77.8%，也就是超過三分之二來自國內消費支出。國內消費總額相比去年增加超過20%。這並不是毫無可能。去年國內消費佔國內生產總值比例就已經超過50%。與接近70%的美國相比，中國還有很大的上升空間。畢竟中國人口數量是美國的4倍多，目前人均收入水平還僅僅至關於南歐小國馬其頓。</P>
        <P>有朝一日，也許中國會說"親愛的美國人，十分抱歉，咱們不能送貨，由於必須先知足咱們本身民衆的需求"，這並不徹底是天方夜譚。不管如何，如今的走勢就是這樣。</P>
        <P>中國如今就已經開始愈來愈多地爲國內市場進行生產。從化妝品到服裝，直到科技設備，長久以來被視爲喜歡存錢的中國人購買力日益旺盛。尤爲是在不斷膨脹的都市區，服務業和國內消費產業成爲了拉動經濟發展的發動機。</P>
        <P>中國人買國產貨的熱情也愈來愈高。十年前，蘋果手機獨霸一方，而如今只是諸多品牌中的一個選項而已。去年蘋果手機在中國的銷售排名中也僅列第四。前三名全是中國國產品牌。</P>
        <P>政府在 IT和人工智能等將來關鍵產業領域的大舉投資已經開始獲得回報。在線商家對於顧客的需求日益瞭解。支付寶和微信支付等智能手機支付應用讓花錢變得愈來愈容易。能夠用它們買菜、訂購電影票和火車票、付房租、借自行車，等等等等。</P>
        <P>與此同時，中國的生產效率也愈來愈高。今年第一季度中國製造的工業機器人比去年同期增長30%。由此帶來的剩餘勞動力進入了服務業領域。此外，還有電動汽車等新興產業，同期產量增加139%。</P>
        <P>針對房產買賣的嚴格措施顯然並未嚇退投資者，而是加強了人們對於市場穩定的信心。第一季度房地產業增加率10.4%，達到三年以來的最高水平。大量人口從鄉村遷居城市，使得對於住宅的需求依然居高不下。每一年中國新增城市人口達到1300萬到1500萬，其中不但包括民工，還有已經在鄉村得到成功，但願在城市生活經商的"新貴"。</P>
        <P>中國消費者信心指數也達到近三年來的最高水平，但這一情況可能會在一段時間內得以持續。由於中國家庭負債率並不高，而且存款充足。國家層面也是如此。儘管國內負債很高，但只要中國的海外負債維持在低位，而且手持龐大外匯儲備，問題就不大。而對於特朗普而言，可能會讓他老人家不過高興吧。</P>
      </div>
    </div>
  </div>
</body>
</html>

css代碼段web

body{
  background: #454545;
  line-height: 1.7;
}
a{
  text-decoration: none;
}
a,body{
  color: #eee;
}
.side-bar {
  float: lift;
  width: 20%;
  position: fixed;
}
.side-bar > *{
  padding: 10px 15px;
}

.side-bar .nav a,
.side-bar .tag-list a{
  display: block;
  padding: 4px;
  color: #999;
  -webkit-transition: color 200ms ;
  -o-transition: color 200ms;
  transition: color 200ms;
}

.side-bar .nav a:hover,
.side-bar .tag-list a:hover{
  color: #eee;
}

.side-bar .nav a{
  font-weight: 700;
}
.main{
  float: right;
  width: 80%;
  color: #454545;
}

.header .logo{
  line-height: 1;
  border: 5px solid #eee;
  padding: 10px 20px;
  font-size: 25px;
  display: inline-block;
  margin-bottom: 10px;
}

.article-list,.article{
    margin-right: 30%;
    background: #fff;
    padding: 20px 30px;
    -webkit-box-shadow: 0 0 3px 2px rgba(0,0,0,0.2);
    box-shadow: 0 0 3px 2px 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: #ccc;
}

.article-list .item > *,
.article > *{
  margin: 10px 0;
}

模板較爲簡陋，請見諒。微信

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程