閱讀Skeleton.css源碼拱镐，改善睡眠質(zhì)量（盡管它只有419行代碼）

本文介紹

點(diǎn)贊就等于學(xué)會(huì)了艘款！

如果本文對您有幫助，建議點(diǎn)贊收藏（點(diǎn)贊就等于學(xué)會(huì)了）


Skeleton 源碼一共只有 419 行（加上注釋和換行）沃琅，非常適合用來學(xué)習(xí)哗咆。

本文是根據(jù)我的學(xué)習(xí)過程來編寫的，幾乎每個(gè)章節(jié)都包含 使用方法 和 源碼分析益眉。

雖然現(xiàn)在大部分業(yè)務(wù)都不需要重復(fù)造輪子了晌柬，但對于小白來說，學(xué)習(xí)完 Skeleton 源碼 是能走出新手村的郭脂。


本文不是推薦大家使用 Skeleton.css 年碘，因?yàn)楝F(xiàn)代工程其實(shí)已經(jīng)用不上這個(gè)庫了。本文的重點(diǎn)在 響應(yīng)式布局源碼的解讀朱庆。


本文適合人群：

  • 有 css 基礎(chǔ)的（了解浮動(dòng)盛泡、顏色、背景色等）娱颊；
  • 有一定工作經(jīng)驗(yàn)，但又沒了解過 css 庫是如何生成的凯砍；


Skeleton 介紹

如果您正在著手一個(gè)較小的項(xiàng)目箱硕，或者覺得不太需要用到大型框架，那么可以嘗試使用 Skeleton悟衩。

Skeleton僅對少數(shù)標(biāo)準(zhǔn) HTML 元素設(shè)置了樣式剧罩，并提供了一個(gè)網(wǎng)格系統(tǒng)。


『Skeleton.css 官網(wǎng)』

『github 地址』

也可以直接滑到文末獲取 Skeleton 源碼座泳。


讀css方面的源碼惠昔，為什么要選 Skeleton ？

  • Bootstrap：太長挑势，不看镇防！

  • Layui：太長，不看潮饱！

  • Element ui：和框架綁定的来氧，不適合小白看~

  • Animate.css：動(dòng)畫庫，下次再看。

  • ……

  • Skeleton：短啦扬！


功能目錄



出發(fā)Ｖ锌瘛！扑毡！

本文所有例子都使用 CDN 的方式引入 skeleton.css 胃榕，默認(rèn)已經(jīng)引入了，所以在案例中不會(huì)再出現(xiàn)引入的代碼瞄摊。

<link  rel="stylesheet">


網(wǎng)格系統(tǒng) Grid<a name="Grid"></a>

Skeleton 提供了 12列 的網(wǎng)格布局模式勤晚，和現(xiàn)代UI庫的24列相比，12列的確有點(diǎn)少了泉褐。但這并不影響我們學(xué)習(xí)赐写。


Skeleton 支持 指定值布局 和 比例布局，這兩個(gè)名字是我自己起的膜赃，官方?jīng)]這樣說挺邀。

其實(shí)這兩種布局方式都是大同小異的，只不過語義上有點(diǎn)不同而已跳座。


使用方法


指定值布局

通過使用 1~12 的單詞配合 .columns 類名 進(jìn)行布局端铛。

.one、.two疲眷、.three禾蚕、.four、.five狂丝、.six换淆、.seven、.eight几颜、.nine倍试、.ten、.eleven蛋哭、.twelve


Skeleton.css 提供了12列的響應(yīng)式網(wǎng)格布局县习，隨著瀏覽器/設(shè)備尺寸的減小而縮小。

當(dāng)瀏覽器窗口小于 550px 時(shí)谆趾，所有列都會(huì)占滿整行躁愿。

file
<div class="container">
  <div class="row">
    <div class="one column">One</div>
    <div class="eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="two columns">Two</div>
    <div class="ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="three columns">Three</div>
    <div class="nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="four columns">Fout</div>
    <div class="eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="five columns">Five</div>
    <div class="seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="six columns">Six</div>
    <div class="six columns">Six</div>
  </div>

  <div class="row">
    <div class="twelve columns">Twelve</div>
  </div>
</div>


<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>

本例使用了 .container 作為容器，限制了最大寬度是 980px 沪蓬，并且水平居中彤钟。

因?yàn)椴季秩萜魇遣惶峁┍尘昂屯膺吘嗟葮邮剑员纠龑懥艘粋€(gè)背景色給 .columns 以便觀察怜跑。

.row 這個(gè)其實(shí)不需要加的样勃，本例添加這個(gè)類只是希望代碼看起來能更加易讀吠勘。


比例布局

提供了3個(gè)類名，需要配合 .column 使用峡眶。

  • .one-third：三分之一
  • .two-thirds：三分之二
  • .one-half：一半
file
<div class="container">
  <div class="row">
    <div class="one-third column">1/3</div>
    <div class="two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="one-half column">1/2</div>
    <div class="one-half column">1/2</div>
  </div>
</div>

<style>
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>


列偏移
file
<div class="container">
  <div class="row">
    <div class="offset-by-eleven one columns">One</div>
  </div>

  <div class="row">
    <div class="offset-by-ten two columns">Two</div>
  </div>

  <div class="row">
    <div class="offset-by-nine three columns">Three</div>
  </div>

  <div class="row">
    <div class="offset-by-eight four columns">Fout</div>
  </div>

  <div class="row">
    <div class="offset-by-seven five columns">Five</div>
  </div>

  <div class="row">
    <div class="offset-by-six six columns">Six</div>
  </div>
  <div class="row">
    <div class="offset-by-five seven columns">Seven</div>
  </div>

  <div class="row">
    <div class="offset-by-four eight columns">Eight</div>
  </div>

  <div class="row">
    <div class="offset-by-three nine columns">Nine</div>
  </div>

  <div class="row">
    <div class="offset-by-two ten columns">Ten</div>
  </div>

  <div class="row">
    <div class="offset-by-one eleven columns">Eleven</div>
  </div>

  <div class="row">
    <div class="offset-by-two-thirds one-third column">1/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-third two-thirds column">2/3</div>
  </div>

  <div class="row">
    <div class="offset-by-one-half one-half column">1/2</div>
  </div>
</div>

<style>
  .container {
    border: 1px solid #ccc;
  }
  .row .column,
  .row .columns {
    margin-bottom: 10px;
    background: #eee;
  }
</style>


源碼分析

布局其實(shí)分了幾個(gè)部分：

  1. 容器部分
  2. 列（確定值）
  3. 列（百分比）
  4. 列間距
  5. 列偏移


容器部分
.container {
  position: relative;  /* 相對定位 */
  width: 100%;  /* 容器寬度100% */
  max-width: 960px;  /* 但最大寬度不超過980px */
  margin: 0 auto;  /* 水平居中 */
  padding: 0 20px;  /* 容器左右內(nèi)邊距20px */
  box-sizing: border-box; /* 設(shè)置容器盒模型剧防，設(shè)置了容器的邊框、內(nèi)邊距都不會(huì)超過容器寬度 */
}

/* 當(dāng)容器不小于400px時(shí) */
@media (min-width: 400px) {
  .container {
    width: 85%;  /* 寬度為85% */
    padding: 0;  /* 內(nèi)邊距為0 */
  }
}

/* 當(dāng)容器不小于550px時(shí) */
@media (min-width: 550px) {
  .container {
    width: 80%;  /* 寬度80辫樱，同時(shí)padding受到 @media (min-width: 400px) 里設(shè)置的影響 */
  }
}

.container:after {
  content: "";
  display: table;
  clear: both;  /* 清除浮動(dòng) */
}


容器使用了 container 這個(gè)類名峭拘，可以看出 skeleton 是先寫了小屏的解決方案，然后再寫大屏的狮暑。

  • 默認(rèn)情況下（文檔寬度小于 400px）鸡挠，container 容器的寬度是 100%，最大寬度是 980px 搬男，通過 margin: 0 auto; 實(shí)現(xiàn)了水平居中效果拣展。

  • 當(dāng)文檔寬度大于等于 400px 時(shí)，容器寬度變成 85%缔逛，但也會(huì)被最大寬度（980px）限制备埃，同時(shí)內(nèi)邊距設(shè)為 0。

  • 當(dāng)文檔寬度大于等于 550px 時(shí)褐奴，容器寬度變成 80%按脚，會(huì)覆蓋 @media (min-width: 400px) 里設(shè)置的寬度，但會(huì)受到 @media (min-width: 400px) 里設(shè)置的 padding 影響敦冬。

  • 最后設(shè)置了一個(gè)偽元素 :after 清除浮動(dòng)（clear: both;）辅搬。


列布局（響應(yīng)式的開始）

Skeleton.css 使用 浮動(dòng) + 百分比 的方式實(shí)現(xiàn)響應(yīng)式。


列（確定值 ）脖旱、列（百分比）和 列間距 這三個(gè)要放在一起講堪遂。

skeleton 一共有12列布局，所以配置了基本的：one夯缺、two蚤氏、three、four踊兜、five、six佳恬、seven捏境、eight、nine毁葱、ten垫言、eleven、twelve倾剿。


都是基礎(chǔ)的數(shù)字英文筷频，我就不翻譯了蚌成。

這里要分2種情況來討論，

  1. 能整除12的（one凛捏、two担忧、three、four坯癣、six瓶盛、twelve）
  2. 不能整除12的（five、seven示罗、eight惩猫、nine、then蚜点、eleven）


接下來會(huì)分開討論這兩種情況轧房。

.column,
.columns {
  width: 100%;  /* 所有列的寬度都是100%。 */
  float: left;  /* 左浮動(dòng) */
  box-sizing: border-box;  /* 設(shè)置容器盒模型绍绘，設(shè)置了容器的邊框奶镶、內(nèi)邊距都不會(huì)超過容器寬度 */
}

@media (min-width: 550px) {
  .column,
  .columns {
    margin-left: 4%;  /* 左邊距4% */
   }
  .column:first-child,
  .columns:first-child {
    margin-left: 0;  /* 第一個(gè)元素不需要左邊距，所以設(shè)為0 */
   }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }  /* 只有一列脯倒，不需要左邊距了 */

  /* 1/3实辑，對應(yīng) .four */
  .one-third.column               { width: 30.6666666667%; }
  
  /* 2/3，對應(yīng) .eight */
  .two-thirds.column              { width: 65.3333333333%; }

  /* 1/2藻丢，對應(yīng) .six */
  .one-half.column                { width: 48%; }
}
  • 默認(rèn)情況下（文檔寬度小于 550px）所有列的寬度都是 100%剪撬。
  • 除了第一列，后面跟著的列都有一個(gè) 4%的左邊距 悠反。


能整除12的

.one残黑、.two、.three斋否、.four梨水、.six、.twelve

布局方式如下圖所示（本文只詳細(xì)講 .one 和 .two 兩種列茵臭，其他的原理都是一樣的疫诽，自己推算就行了）


file

從上圖可以看出，都使用 .one 的話旦委，一共有 12列 奇徒、11個(gè)間隔 ，一行的寬度是 100% 缨硝，每個(gè)間隔的占比是 4% 摩钙，11個(gè)間隔一共就花掉了 44% ，剩下 56% 給12列平均分查辩。

所以 .one 的寬度就是 56 ÷ 12 ≈ 4.66666666667 胖笛，單位是 %


file

都用.two 的話网持，從上圖可以看出一共有 6列 、5個(gè)間隔 长踊，每個(gè)間隔的寬度是 4%功舀，5個(gè)間隔合計(jì)占用 20% 的寬度，剩下 80% 的寬度給6列平均分之斯。

**所以 .two 的寬度就是 80 ÷ 6 ≈ 13.3333333333 日杈，單位是 % **


剩下的我就直接寫公式了，不懂的可以在評論區(qū)討論~

公式：(100% - 間隔數(shù)量 × 4%) ÷ 列的數(shù)量

  • .one：(100% － 4% × 11) ÷ 12 ≈ 4.66666666667%
  • .two：(100% － 4% × 5) ÷ 6 ≈ 13.3333333333%
  • .three：(100% － 4% × 3) ÷ 4 = 22%
  • .four：(100% - 4% × 2 ) ÷ 3 ≈ 30.6666666667%
  • .six：(100% － 4% × 1) ÷ 2 = 48%
  • .twelve：就是100%咯佑刷，而且不需要左邊距


不能整除12的

.five莉擒、.seven、.eight瘫絮、.nine涨冀、.then、.eleven


首先看 .five 麦萤，代表 5鹿鳖，12 - 5 = 7，但現(xiàn)在 .five 和 .seven 的值是多少我們都不知道壮莹，雖然可以按 5:7 再加一個(gè) 間隔（4%） 來計(jì)算翅帜，但我更愿意使用已知的值來推算。

.two + .five + .five 三列加起來剛好是 12 命满，而 .two 的值我們是知道的涝滴，由此可以得到一個(gè)代數(shù)式：

13.3333333333% + 間隔 + .five + 間隔 + .five = 100%


間隔 的占比是 4% 所以得到下面的代數(shù)式

13.3333333333% + 4% + .five + 4% + .five = 100%

21.3333333333% + 2(.five) = 100%

2(.five) = 78.6666666667%

.five ≈ 39.3333333333%

根據(jù)上面的小學(xué)生推導(dǎo)法，得知一個(gè) .five 是 39.3333333333%


.seven

剛剛有講到胶台，5 + 7 = 12歼疮，那現(xiàn)在 5 出來了，7 也就通過加減法能算出來

.five + 間隔 + .seven = 100%

39.3333333333% + 4% + .seven = 100%

.seven = 100% - 39.3333333333% - 4%

.seven = 56.6666666667%

綜上所述诈唬，.seven 的寬度是 56.6666666667%


這是我的推導(dǎo)方式韩脏，最后的值也和 skeleton 的值一樣。.eight铸磅、.nine赡矢、.then、.eleven 的推導(dǎo)方式其實(shí)也和上面一樣阅仔，這里我就不再啰嗦了济竹。有疑問的可以在評論區(qū)交流。


最后得出

  • .five：39.3333333333%
  • .seven：56.6666666667%
  • .eight：65.3333333333%
  • .nine：74.0%
  • .ten：82.6666666667%
  • .eleven：91.3333333333%


比例
  • .one-third：三分之一霎槐。對應(yīng) .four
  • .two-thirds：三分之二。對應(yīng) .eight
  • .one-half：一半梦谜。對應(yīng).six


列偏移

列偏移的類名都是 .offset-by- 開頭的丘跌，后面再加上對應(yīng)的數(shù)字或者比例的單詞袭景。

@media (min-width: 550px) {
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }
}


如果用 .offset-by-one ，那我們就需要假設(shè)后面的內(nèi)容補(bǔ)充完是 12闭树。

1 + 11 = 12耸棒，我們通過上面的計(jì)算得知 .eleven 的寬度是 91.3333333333%，所以 .offset-by-one 的占比是：

.offset-by-one = 100% - .eleven

.offset-by-one = 8.66666666667%


其他的 .offset-by-two 报辱、.offset-by-three 那些也可以用同樣的方法去計(jì)算与殃。最后再和 skeleton 的值對比一下就行了。


基礎(chǔ)樣式 Base Styles<a name="BaseStyles"></a>

這部分主要定義了全局字體和行距的樣式碍现，作用在 html 和 body 標(biāo)簽上幅疼。



使用方法

file
<div>雷猴</div>



源碼分析

看看這部分的源碼：

html {
  font-size: 62.5%;  /* 16px × 62.5% = 10px */
}

body {
  font-size: 1.5em;  /* 10px × 1.5 = 15px */
  line-height: 1.6;  /* 15px * 1.6 = 24px */
  font-weight: 400;  /* 字體粗細(xì) */
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;  /* 字體 */
  color: #222;  /* 文本顏色 */
}


瀏覽器的默認(rèn)字號是 16px ，在 html 設(shè)置字號是 62.5%昼接，那就是變成 10px 了爽篷。

在 body 設(shè)置 font-size: 1.5em; ，那么之后的內(nèi)容默認(rèn)都會(huì)繼承 body 的慢睡，也就是普通的文本是 15px逐工。

最后再設(shè)置 行高 、字體粗細(xì) 漂辐、字體 泪喊、文本顏色 。



排版 Typography<a name="Typography"></a>

不需要使用特別的類名髓涯，這部分作用在 h1 ~ h6 標(biāo)簽中袒啼。使用了 rem 的方式設(shè)置字體大小，會(huì)受到 <html> 標(biāo)簽字體大小影響复凳。


使用方法

file
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>

<p>The base type is 15px over 1.6 line height (24px)</p>



源碼分析

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


這段源碼其實(shí)沒什么好解釋的了瘤泪，主要設(shè)置了 h1 ~ h6 的 外邊距、字號育八、文字粗細(xì)对途、行高、字距髓棋，并且用 媒體查詢 來重新定義不同尺寸的瀏覽器寬度顯示出來的標(biāo)題 字號 不同实檀。

最后定義了段落 p 的上邊距，這里的 p 的字號默認(rèn)繼承 body 里的設(shè)置按声，也就是 15px膳犹。


鏈接 Links<a name="Links"></a>


使用方法

file
<a>Colored</a>


源碼分析

a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }

這里只定義了 a 的字體顏色晤碘，還有鼠標(biāo)經(jīng)過時(shí)的顏色宏蛉。字號默認(rèn)繼承 body ，也就是 15px噪叙。

file
file


按鈕 Buttons<a name="Buttons"></a>


使用方法

file
<!-- 默認(rèn) -->
<a class="button" href="#">Anchor button</a>
<button>Button element</button>
<input type="submit" value="submit input">
<input type="button" value="button input">

<!-- primary類型 -->
<a class="button button-primary" href="#">Anchor button</a>
<button class="button-primary">Button element</button>
<input class="button-primary" type="submit" value="submit input">
<input class="button-primary" type="button" value="button input">


源碼分析

/* 默認(rèn)樣式 */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;  /* 行內(nèi)塊 */
  height: 38px;  /* 高度 */
  padding: 0 30px;  /* 內(nèi)邊距：上下0渐裂，左右30px */
  color: #555;  /* 字體顏色：灰色(有點(diǎn)深) */
  text-align: center;  /* 本文居中 */
  font-size: 11px;  /* 字號 */
  font-weight: 600;  /* 字體稍微加粗 */
  line-height: 38px;  /* 行高（和height一樣豺旬，所以是垂直居中了） */
  letter-spacing: .1rem;  /* 字距 */
  text-transform: uppercase;  /* 字母變成全大寫 */
  text-decoration: none;  /* 不需要文本修飾 */
  white-space: nowrap;  /* 不換行 */
  background-color: transparent;  /* 背景色：透明 */
  border-radius: 4px;  /* 圓角：4px */
  border: 1px solid #bbb;  /* 邊框：1px钠惩，實(shí)線，淺灰 */
  cursor: pointer;  /* 鼠標(biāo)指針樣式 */
  box-sizing: border-box;  /* 盒模型規(guī)則 */
}

/* 鼠標(biāo)經(jīng)過族阅、獲得焦點(diǎn) */
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;  /* 文字顏色比默認(rèn)深一點(diǎn)點(diǎn) */
  border-color: #888;  /* 邊框顏色比默認(rèn)深一點(diǎn)點(diǎn) */
  outline: 0;  /* 輪廓：0 */
}

/* primary類型 */
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;  /* 字變白 */
  background-color: #33C3F0;  /* 背景色變藍(lán) */
  border-color: #33C3F0;  /* 邊框顏色變藍(lán) */
}

/* 使用primary類型時(shí)：鼠標(biāo)經(jīng)過篓跛、獲得焦點(diǎn) */
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;  /* 文本白色 */
  background-color: #1EAEDB;  /* 背景色變深一點(diǎn)點(diǎn) */
  border-color: #1EAEDB;  /* 邊框顏色變深一點(diǎn)點(diǎn) */
}

按鈕的實(shí)現(xiàn)方式有很多種，比如 <button> 坦刀、<input type="submit" /> 等等愧沟，這里就不一一列舉額了，skeleton 把這類情況都寫好了鲤遥，可以直接在源碼中看到沐寺。

skeleton 提供了2中樣式的按鈕，一個(gè)是默認(rèn)的（白底黑字）渴频，一個(gè)是 primary 的（藍(lán)底白字）芽丹。

還有一些選中狀態(tài)。

skeleton 的做法是先寫好默認(rèn)的卜朗，其他狀態(tài)都在默認(rèn)狀態(tài)的基礎(chǔ)上覆蓋新的樣式拔第。



表單 Forms<a name="Forms"></a>


使用方法

file
<form>
  <div class="row">
    <div class="six columns">
      <label for="exampleEmailInput">Your email</label>
      <input class="u-full-width" type="email" placeholder="test@mailbox.com" id="exampleEmailInput">
    </div>
    <div class="six columns">
      <label for="exampleRecipientInput">Reason for contacting</label>
      <select class="u-full-width" id="exampleRecipientInput">
        <option value="Option 1">Questions</option>
        <option value="Option 2">Admiration</option>
        <option value="Option 3">Can I get your number?</option>
      </select>
    </div>
  </div>
  <label for="exampleMessage">Message</label>
  <textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>
  <label class="example-send-yourself-copy">
    <input type="checkbox">
    <span class="label-body">Send a copy to yourself</span>
  </label>
  <input class="button-primary" type="submit" value="Submit">
</form>


源碼分析

/* 單行文本框、多行文本框场钉、下來選擇器 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;  /* 高度 */
  padding: 6px 10px;  /* 內(nèi)邊距：上下6px蚊俺，左右10px */
  background-color: #fff;  /* 背景色：白色 */
  border: 1px solid #D1D1D1;  /* 邊框：1px，實(shí)線逛万，灰色 */
  border-radius: 4px;  /* 圓角：4px */
  box-shadow: none;  /* 投影：無 */
  box-sizing: border-box;  /* 盒模型 */
}

/* 針對單行和多行文本框的樣式設(shè)置 */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;  /* 外表 */
}

/* 多行文本框 */
textarea {
  min-height: 65px;  /* 最小高度是65px泳猬，會(huì)覆蓋上面設(shè)置的height */
  padding-top: 6px;  /* 上內(nèi)邊距 */
  padding-bottom: 6px;  /* 下內(nèi)邊距 */
}

/* 單行文本框、多行文本框宇植、下來選擇器 獲取焦點(diǎn)時(shí) */
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;  /* 邊框：1px得封，實(shí)線，藍(lán)色 */
  outline: 0;  /* 輪廓：0 */
}

/* label(標(biāo)簽)
   legend(組合表單中的相關(guān)元素指郁，legend 元素為 fieldset 元素定義標(biāo)題) */
label,
legend {
  display: block;  /* 塊狀 */
  margin-bottom: .5rem;  /* 下外邊距 */
  font-weight: 600;  /* 字體有點(diǎn)粗 */
}

/* fieldset(可將表單內(nèi)的相關(guān)元素分組) */
fieldset {
  padding: 0;  /* 內(nèi)邊距 */
  border-width: 0;  /* 邊框?qū)挾?*/
}

/* 多選和單選 */
input[type="checkbox"],
input[type="radio"] {
  display: inline;  /* 行內(nèi) */
}

/* label標(biāo)簽下的 .label-body忙上，可看使用例子 */
label > .label-body {
  display: inline-block;  /* 行內(nèi) */
  margin-left: .5rem;  /* 左外邊距：5px */
  font-weight: normal;  /* 字體粗細(xì) */
}



列表 Lists<a name="Lists"></a>


使用方法

file
<ul>
  <li>Item 1</li>
  <li>
    Item 2
    <ul>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ul>
  </li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>
    Item 2
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
</ol>


源碼分析

/* 無序列表 */
ul {
  list-style: circle inside;  /* 標(biāo)記樣式：圓，內(nèi)側(cè) */
}

/* 有序列表 */
ol {
  list-style: decimal inside;  /* 標(biāo)記樣式：十進(jìn)制闲坎，內(nèi)側(cè) */
}

ol, ul {
  padding-left: 0;  /* 左側(cè)內(nèi)邊距：0 */
  margin-top: 0;  /* 左側(cè)外邊距：0 */
}

/* 嵌套列表 */
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;  /* 外邊距 */
  font-size: 90%;  /* 字號 */
}

/* 列表項(xiàng) */
li {
  margin-bottom: 1rem;  /* 下外邊距 */
}



代碼 Code<a name="Code"></a>


使用方法

file
<pre>
<code>.some-class {
  background-color: red;
}</code>
</pre>


源碼分析

code {
  padding: .2rem .5rem;  /* 內(nèi)邊距 */
  margin: 0 .2rem;  /* 外邊距 */
  font-size: 90%;  /* 字號 */
  white-space: nowrap;  /* 不換行 */
  background: #F1F1F1;  /* 背景色：超級淺的灰色 */
  border: 1px solid #E1E1E1;  /* 邊框：1px疫粥，實(shí)線，灰色 */
  border-radius: 4px;  /* 圓角：4px */
}

pre > code {
  display: block;  /* 塊狀 */
  padding: 1rem 1.5rem;  /* 內(nèi)邊距 */
  white-space: pre;  /* 空白會(huì)被瀏覽器保留腰懂。 */
}

code 和 pre 是 HTML 原生標(biāo)簽梗逮。



表格 Tables<a name="Tables"></a>


使用方法

file
<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dave Gamache</td>
      <td>26</td>
      <td>Male</td>
      <td>San Francisco</td>
    </tr>
    <tr>
      <td>Dwayne Johnson</td>
      <td>42</td>
      <td>Male</td>
      <td>Hayward</td>
    </tr>
  </tbody>
</table>


源碼分析

/* 表頭的列 和 普通列 */
th,
td {
  padding: 12px 15px;  /* 內(nèi)邊距 */
  text-align: left;  /* 文本左對齊 */
  border-bottom: 1px solid #E1E1E1;  /* 底邊框 */
}

/* 第一個(gè)表頭的列 和 每行第一個(gè)普通列 */
th:first-child,
td:first-child {
  padding-left: 0;  /* 左內(nèi)邊距 */
}

/* 最后一個(gè)表頭的列 和 每行最后一個(gè)普通列 */
th:last-child,
td:last-child {
  padding-right: 0;  /* 右內(nèi)邊距 */
}

沒想到表格的 css 樣式這么簡單吧哈哈哈哈~



間隔 Spacing<a name="Spacing"></a>


源碼分析

button,
.button {
  margin-bottom: 1rem;
}

input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem;
}

pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem;
}

這部分主要定義常用的標(biāo)簽和類的底部外邊距，太簡單绣溜，不一一細(xì)講了慷彤。



工具集 Utilities<a name="Utilities"></a>


源碼分析

.u-full-width {
  width: 100%;
  box-sizing: border-box;
}

.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box;
}

.u-pull-right {
  float: right;
}

.u-pull-left {
  float: left;
}

這部分源碼太簡單了，不講了~

  • .u-full-width ：寬度滿屏
  • .u-max-full-width ：最大寬度是滿屏
  • .u-pull-right ：右浮動(dòng)
  • .u-pull-left ：左浮動(dòng)



分割線 Hr<a name="Hr"></a>


使用方法

file
<hr />


源碼分析

hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1;
}
  • 上下設(shè)置了外邊距
  • 清除掉所有border
  • 最后再設(shè)置回頂部邊框?yàn)?px，實(shí)線瞬欧，灰色



清除浮動(dòng) Clearing<a name="Clearing"></a>


源碼分析

.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both;
}

容器 和 行 都設(shè)置了清楚浮動(dòng)贷屎。

.u-cf 是專門清楚浮動(dòng)的。

清楚浮動(dòng)的做法在很多基礎(chǔ)的 css 教程有講艘虎，這里不再啰嗦了。



媒體查詢 Media Queries<a name="MediaQueries"></a>


源碼分析

@media (min-width: 400px) {}

@media (min-width: 550px) {}

@media (min-width: 750px) {}

@media (min-width: 1000px) {}

@media (min-width: 1200px) {}

這部分的源碼咒吐，是預(yù)留給開發(fā)者自己寫的野建。

如果開發(fā)者需要自己重新定義某些元素的樣式，根據(jù)不同的窗口寬度來定義恬叹，可以在此編寫候生。



Skeleton.css源碼

/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Grid
- Base Styles
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/


/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; }
.column,
.columns {
  width: 100%;
  float: left;
  box-sizing: border-box; }

/* For devices larger than 400px */
@media (min-width: 400px) {
  .container {
    width: 85%;
    padding: 0; }
}

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

  .one.column,
  .one.columns                    { width: 4.66666666667%; }
  .two.columns                    { width: 13.3333333333%; }
  .three.columns                  { width: 22%;            }
  .four.columns                   { width: 30.6666666667%; }
  .five.columns                   { width: 39.3333333333%; }
  .six.columns                    { width: 48%;            }
  .seven.columns                  { width: 56.6666666667%; }
  .eight.columns                  { width: 65.3333333333%; }
  .nine.columns                   { width: 74.0%;          }
  .ten.columns                    { width: 82.6666666667%; }
  .eleven.columns                 { width: 91.3333333333%; }
  .twelve.columns                 { width: 100%; margin-left: 0; }

  .one-third.column               { width: 30.6666666667%; }
  .two-thirds.column              { width: 65.3333333333%; }

  .one-half.column                { width: 48%; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}


/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* NOTE
html is set to 62.5% so that all the REM measurements throughout Skeleton
are based on 10px sizing. So basically 1.5rem = 15px :) */
html {
  font-size: 62.5%; }
body {
  font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.6;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 2rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.1rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.1rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.6;  letter-spacing: 0; }

/* Larger than phablet */
@media (min-width: 550px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 1.5rem; }
}

p {
  margin-top: 0; }


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  height: 38px;
  padding: 0 30px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  color: #333;
  border-color: #888;
  outline: 0; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  color: #FFF;
  background-color: #1EAEDB;
  border-color: #1EAEDB; }


/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  height: 38px;
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  background-color: #fff;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box; }
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
textarea {
  min-height: 65px;
  padding-top: 6px;
  padding-bottom: 6px; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border: 1px solid #33C3F0;
  outline: 0; }
label,
legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600; }
fieldset {
  padding: 0;
  border-width: 0; }
input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; }


/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
ul {
  list-style: circle inside; }
ol {
  list-style: decimal inside; }
ol, ul {
  padding-left: 0;
  margin-top: 0; }
ul ul,
ul ol,
ol ol,
ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; }
li {
  margin-bottom: 1rem; }


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {
  padding-left: 0; }
th:last-child,
td:last-child {
  padding-right: 0; }


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
button,
.button {
  margin-bottom: 1rem; }
input,
textarea,
select,
fieldset {
  margin-bottom: 1.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  margin-bottom: 2.5rem; }


/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.u-full-width {
  width: 100%;
  box-sizing: border-box; }
.u-max-full-width {
  max-width: 100%;
  box-sizing: border-box; }
.u-pull-right {
  float: right; }
.u-pull-left {
  float: left; }


/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  margin-top: 3rem;
  margin-bottom: 3.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }


/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/


/* Larger than mobile */
@media (min-width: 400px) {}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



更多推薦

??console.log也能插圖！Ｕ乐纭唯鸭！

??Vite 搭建 Vue2 項(xiàng)目（Vue2 + vue-router + vuex）

????Fabric.js 從入門到膨脹

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市硅确，隨后出現(xiàn)的幾起案子目溉，更是在濱河造成了極大的恐慌，老刑警劉巖菱农，帶你破解...
    沈念sama閱讀 217,509評論 6贊 504
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件缭付，死亡現(xiàn)場離奇詭異，居然都是意外死亡循未，警方通過查閱死者的電腦和手機(jī)陷猫，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3贊 394
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來的妖，“玉大人绣檬，你說我怎么就攤上這事∩┧冢” “怎么了娇未？”我有些...
    開封第一講書人閱讀 163,875評論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長赋元。 經(jīng)常有香客問我忘蟹，道長，這世上最難降的妖魔是什么搁凸？ 我笑而不...
    開封第一講書人閱讀 58,441評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任媚值，我火速辦了婚禮，結(jié)果婚禮上护糖，老公的妹妹穿的比我還像新娘褥芒。我一直安慰自己，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布锰扶。 她就那樣靜靜地躺著献酗，像睡著了一般。 火紅的嫁衣襯著肌膚如雪坷牛。 梳的紋絲不亂的頭發(fā)上罕偎，一...
    開封第一講書人閱讀 51,365評論 1贊 302
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音京闰，去河邊找鬼颜及。 笑死，一個(gè)胖子當(dāng)著我的面吹牛蹂楣，可吹牛的內(nèi)容都是我干的俏站。 我是一名探鬼主播，決...
    沈念sama閱讀 40,190評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼痊土，長吁一口氣：“原來是場噩夢啊……” “哼肄扎！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起赁酝，我...
    開封第一講書人閱讀 39,062評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤犯祠，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后赞哗，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體雷则，經(jīng)...
    沈念sama閱讀 45,500評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評論 3贊 335
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年肪笋，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了月劈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評論 1贊 347
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡藤乙，死狀恐怖猜揪，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情坛梁，我是刑警寧澤而姐，帶...
    沈念sama閱讀 35,559評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站划咐，受9級特大地震影響拴念，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜褐缠，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一政鼠、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧队魏，春花似錦公般、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0贊 22
  • 一樁弒父案官帘，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽瞬雹。三九已至，卻和暖如春刽虹，著一層夾襖步出監(jiān)牢的瞬間酗捌，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工状婶， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留意敛，地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,958評論 2贊 370
  • 代替公主和親
    正文 我出身青樓膛虫，卻偏偏與公主長得像，于是被迫代替她去往敵國和親钓猬。 傳聞我的和親對象是個(gè)殘疾皇子稍刀，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評論 2贊 354

推薦閱讀更多精彩內(nèi)容