CSS Tailwind

一般的UI中CSS框架都是內(nèi)建各種預(yù)設(shè)的組件，比如按鈕什乙、卡片挽封、警告框等，當(dāng)需要通過定制化設(shè)計(jì)時(shí)臣镣，組件的高度耦合性則帶來很大的弊端场仲。Tailwind并不提供預(yù)先設(shè)計(jì)好的內(nèi)建組件，而是提供了更為基礎(chǔ)的工具類（utility classes）退疫，可直接在HTML源碼上構(gòu)建完全定制化的設(shè)計(jì)。

  • Tailwind順風(fēng)是一個(gè)CSS框架的工具集鸽素，Tailwind的理念是抽取共用體（Utilities First）褒繁。
  • Tailwind CSS是一個(gè)高度可定制的基礎(chǔ)層CSS框架，提供了構(gòu)建定制化所需的構(gòu)建塊馍忽，無需重新覆蓋內(nèi)建于框架內(nèi)中的風(fēng)格棒坏。

CSS類庫管理的實(shí)質(zhì)上是CSS命名的問題，目前流行的解決方案有：

  • BEM（Block Element Modifer）
    BEM即.block__element--modifier{}的形式遭笋，使用BEM后CSS就有了三個(gè)作用域坝冕。
  • ACSS（CSS Atomic）
    ACSS是雅虎團(tuán)隊(duì)的Atomic CSS，其理念是將樣式原子化瓦呼。

安裝

  • NPM
$ npm i tailwindcss
  • CDN
<link  rel="stylesheet">

特性

  • 響應(yīng)式

Tailwind CSS的每個(gè)工具類都支持響應(yīng)式布局喂窟，使用類似{screen}:的命名前綴以區(qū)分響應(yīng)式類。

  • 組件友好

僅需使用工具類（utility classes）即可央串，Tailwind從重復(fù)模式中提取組件的工具類磨澡。

  • 可定制

Tailwind CSS是基于PostCSS開發(fā)的，通過JavaScript代碼配置质和。

核心

實(shí)用為主（Utility-First）

傳統(tǒng)的Web頁面設(shè)計(jì)需手工為HTML元素編寫CSS樣式稳摄，使用Tailwind可以直接在HTML使用預(yù)先定義的類名來設(shè)置元素的樣式。

自適應(yīng)設(shè)計(jì)（Responsive Design）

Tailwind中每個(gè)工具類均可有條件地應(yīng)用到不同的斷點(diǎn)（breakpoint）饲宿，默認(rèn)情況下根據(jù)常見移動(dòng)設(shè)備分辨率劃分了4個(gè)斷點(diǎn)厦酬，分別對應(yīng)4個(gè)不同的媒體查詢胆描。

自適應(yīng)
斷點(diǎn) 屏幕類型 最小寬度
sm 小型屏幕（small），手機(jī) min-width:640px;
md 中等屏幕（medium）仗阅，平板 min-width:768px;
lg 大型屏幕（large）先壕，筆記本 min-width:1024px;
xl 超大屏幕（extra large），臺(tái)式機(jī) min-width:1280px; 
/*sm small*/
@meida (min-width:640px){}
/*md medium*/
@meida (min-width:768px){}
/*lg large*/
@meida (min-width:1024px){}
/*xl extra large*/
@meida (min-width:1280px){}

當(dāng)需要為元素添加僅在某個(gè)斷點(diǎn)處生效的工具類時(shí)暖侨，需在工具類名前添加前綴breakpoint:classname提前。

例如：不同分辨率設(shè)備圖片寬度限制

<img class="w-16 md:w-32 lg:w-48" src="..." />

例如：營銷頁面組件在小屏幕上使用堆疊布局，大屏幕上使用并排布局旋廷。

<link  rel="stylesheet">

<div class="container mx-auto bg-gray-200 p-4">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="rounded-lg md:w-56" src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80"/>
    </div>
    <div class="mt-4 md:mt-0 md:ml-6">
      <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">市場營銷</div>
      <a class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">為您的生意發(fā)現(xiàn)新的客戶</a>
      <p class="mt-2 text-gray-600">經(jīng)營一家企業(yè)是一件非常艱巨的工作鸠按，這里有五個(gè)可用來發(fā)掘您第一個(gè)客戶的想法。</p>
    </div>
  </div>
</div>
  • md:flex將外部元素默認(rèn)的display:block在中等屏幕和較大屏幕上轉(zhuǎn)換為display:flex彈性盒子容器饶碘。
  • 當(dāng)圖像元素的父元素為彈性容器時(shí)目尖，為確保圖像不發(fā)生收縮，因此為img元素添加md:flex-shrink-0扎运，以防止在中等屏幕和更大的屏幕中不發(fā)生收縮瑟曲。從技術(shù)角度來講可以只是用flex-shrink-0，因?yàn)樗谳^小屏幕上不會(huì)起作用豪治，但由于只在md中等屏幕上起作用洞拨，所以最好在類名中添加md以明確指明。
  • 小型屏幕上圖片默認(rèn)為全寬负拟，中型屏幕及以上則使用md:w-56將圖片寬度限制為固定大小烦衣。
  • 小型屏幕上內(nèi)容部分使用mt-4，即在內(nèi)容和圖像之間添加外頂邊距掩浙。當(dāng)在水平并排布局時(shí)不需要此邊距花吟，使用md:mt-0撤銷，并使用md:ml-6添加左邊距厨姚。
大屏并排布局
小屏堆疊布局

移動(dòng)優(yōu)先（Mobile First）

默認(rèn)Tailwind使用移動(dòng)優(yōu)先斷點(diǎn)系統(tǒng)衅澈，類似Bootstrap或Foundation。這也就意味著那些沒有添加斷點(diǎn)前綴的類名會(huì)在所有屏幕大小上都會(huì)生效谬墙，比如uppercase今布。帶斷點(diǎn)前綴的類名則僅在指定斷點(diǎn)及更大尺寸中生效，比如md:uppercase拭抬。

例如：不同斷點(diǎn)處循環(huán)使用多個(gè)背景色险耀，即調(diào)整瀏覽器大小以查看背景色的更改。

更換背景色
<link  rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 flex items-center justify-center">
  <div class="w-20 h-20 rounded bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
  </div>
</div>

偽類變量（Pseudo-Class Variants）

基礎(chǔ)樣式（base）

Tailwind默認(rèn)分為三個(gè)模塊分別是base玖喘、component甩牺、utilities。

  • base 基礎(chǔ)樣式
  • component 組件類樣式
  • utilities工具類樣式

Tailwind以normalize.css為基礎(chǔ)累奈，在其上構(gòu)建出preflight基礎(chǔ)樣式贬派，其目的在于消除不同廠商瀏覽器渲染不一致的內(nèi)置樣式急但。

  • 清零默認(rèn)外邊距

preflight從元素（比如標(biāo)題、引號(hào)搞乏、段落等）中刪除默認(rèn)外邊距

blockquote,dl,dd,h1,h2,h3,h4,h5,h6,figure,p,pre{margin:0;}
  • 取消標(biāo)題默認(rèn)樣式

默認(rèn)標(biāo)題元素默認(rèn)樣式波桩，使之具有與普通文本相同的字體大小和字號(hào)粗細(xì)。

h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit;}
  • 取消列表默認(rèn)樣式
ol, ul{margin:0; padding:0; list-style:none;}
  • 圖像類元素設(shè)置為塊級(jí)元素
img, svg, video, canvas, audio, iframe, embed, object{display:block; vertical-align:middle;}
  • 全局重置邊框樣式
*, *::before, *::after{ border-width:0; border-style:solid; border-color:theme('borderColor.default', currentColor);}

布局（layout）

容器（container）

.container容器類是一個(gè)將元素寬度固定到當(dāng)前斷點(diǎn)的組件请敦。

斷點(diǎn) 最大寬度
none width:100%;
sm max-width:640px;
md max-width:768px
lg max-width:1024px;
xl max-width:1280px;

.container容器類用于設(shè)置元素的最大寬度镐躲，以匹配當(dāng)前斷點(diǎn)的最小寬度。適用于固定屏幕大小設(shè)計(jì)而非容納完全流動(dòng)的viewport視口侍筛。

.container{
  width:100%:
}

.container容器類不會(huì)自動(dòng)居中也沒有任何內(nèi)置的水平填充萤皂。

盒模型（box sizing）

類名 屬性 描述
.box-border box-sizing:border-box; 邊框盒模型，元素尺寸包含邊框和內(nèi)邊距匣椰。
.box-content box-sizing:content-box; 內(nèi)容盒模型裆熙，元素尺寸不包含邊框和內(nèi)邊距。

box-sizing屬性用于控制瀏覽器如何計(jì)算元素大小禽笑，即盒子模型的尺寸入录。

包含邊框和內(nèi)邊距的盒模型（border-box）

border-box
.border-box{
  box-sizing:border-box;
}

border-box盒子模型會(huì)將元素的框大小設(shè)置為border box邊框盒子模型，告訴瀏覽器在給定元素的高度或?qū)挾葧r(shí)會(huì)包含邊框和填充佳镜。

例如：創(chuàng)建100px x 100px的元素僚稿，使用border box盒子模型時(shí)，如果具有2px的邊框和4像素的內(nèi)邊距（padding）蟀伸，最終呈現(xiàn)的是 100px x 100px的區(qū)域贫奠，其中內(nèi)容區(qū)域則為88px x 88px。

<link  rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="box-border h-32 w-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-300"></div>
  </div>
</div>

不包含邊框和內(nèi)邊距的盒模型（content-box）

使用box-content類名將定義元素的盒模型為內(nèi)容框望蜡，也就是告訴瀏覽器在元素計(jì)算寬度或高度時(shí)包含邊框和內(nèi)邊距的大小。

.content-box{
  box-sizing: content-box;
}
content-box

例如：創(chuàng)建100px x 100px的元素時(shí)拷恨，若邊框?yàn)?px脖律，內(nèi)邊距為4px，最終呈現(xiàn)的尺寸為112px x 112px腕侄，內(nèi)部內(nèi)容區(qū)域?yàn)?100px x 100px小泉。

<link  rel="stylesheet">

<div class="flex align-center justify-center p-4">
  <div class="content-box w-32 h-32 p-4 border-4 border-gray-400 bg-gray-200">
    <div class="w-full h-full bg-gray-100"></div>
  </div>
</div>

顯示框（display）

CSS中的display屬性用于控制元素生成的顯示框類型

類名 屬性 描述
.hidden display:none 隱藏元素，不顯示框冕杠。
.block display:block 設(shè)置元素顯示為塊級(jí)元素微姊，元素前后會(huì)帶有換行符。
.inline display:inline 設(shè)置元素顯示為行內(nèi)（內(nèi)聯(lián)）元素分预，元素前后沒有換行符兢交。
.inline-block display:inline-block 設(shè)置元素顯示為內(nèi)聯(lián)塊級(jí)元素（行內(nèi)塊元素）
.flow-root display:flow-root 設(shè)置元素顯示為塊級(jí)元素并創(chuàng)建BFC塊級(jí)格式化上下文
.flex display:flex; 設(shè)置元素顯示為塊級(jí)彈性盒子容器
.inline-flex display:inline-flex; 設(shè)置元素顯示為行內(nèi)彈性盒子容器
.grid display:grid; 設(shè)置元素顯示為柵格容器
.inline-grid display:inline-grayd; 設(shè)置元素顯示為行內(nèi)柵格容器
.hidden 隱藏顯示區(qū)域

塊級(jí)元素（block）

  • 塊級(jí)元素獨(dú)占一行，且盡可能撐滿父級(jí)元素的寬度笼痹。
  • 快積元素默認(rèn)寬度為父元素寬度的100%
  • 塊級(jí)元素即可容納內(nèi)聯(lián)元素也可容納塊級(jí)元素
  • 常見塊級(jí)元素包括div配喳、h1~h6酪穿、p、hr晴裹、ol被济、ul
block
<link  rel="stylesheet">

<div class="bg-gray-200 p-4">
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2">1</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">2</span>
  <span class="block text-center text-gray-700 bg-gray-400 px-4 py-2 mt-2">3</span>
</div>

內(nèi)聯(lián)元素（inline）

  • 非塊級(jí)元素均為內(nèi)聯(lián)元素，內(nèi)聯(lián)元素只能容納文本或內(nèi)聯(lián)元素涧团。
  • 常見內(nèi)聯(lián)元素包括strong只磷、em、s泌绣、u钮追、a、span赞别、img畏陕、input...
  • 內(nèi)聯(lián)元素默認(rèn)大小是不可控制的，內(nèi)聯(lián)元素不可以設(shè)置width和height仿滔。
  • 內(nèi)聯(lián)元素默認(rèn)與其它內(nèi)聯(lián)元素在一行上惠毁，相鄰內(nèi)聯(lián)元素不換行，寬度即為內(nèi)容寬度崎页。
  • 內(nèi)聯(lián)元素padding在4個(gè)方向上都有效鞠绰，內(nèi)聯(lián)元素margin只在水平方向有效。
inline
<link  rel="stylesheet">

<div class="bg-gray-200 p-4">
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">1</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">2</div>
  <div class="inline text-gray-700 text-center bg-gray-400 px-4 py-2">3</div>
</div>

行內(nèi)塊級(jí)元素（inline-block）

  • inline-block元素結(jié)合行內(nèi)和塊級(jí)的優(yōu)點(diǎn)飒焦，即可設(shè)置width和height蜈膨，又讓padding和margin生效，也可和其它行內(nèi)元素并排顯示牺荠。
  • vertical-align屬性會(huì)影響到inline-block元素
  • 若HTML代碼中元素之間存在空格翁巍，則inline-block元素之間會(huì)產(chǎn)生間隙。
  • inline-block元素是將對象呈現(xiàn)為inline對象休雌，對象內(nèi)容則作為block對象顯示灶壶。
inline-block
<link  rel="stylesheet">

<div class="bg-gray-200">
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">1</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">2</div>
  <div class="inline-block text-gray-700 text-center bg-gray-400 px-4 py-2 m-2">3</div>
</div>

帶BFC的塊級(jí)元素（flow-root）

<link  rel="stylesheet">

<div class="flow-root bg-gray-400">
  <div class="block my-4 px-4 py-2 bg-gray-500 text-center text-gray-700">1</div>
</div>
<div class="flow-root bg-gray-200">
  <div class="block my-4 px-4 py-2 bg-gray-400 text-center text-gray-700">2</div>
</div>
flow-root

彈性盒子容器（flex）

<link  rel="stylesheet">

<div class="flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>
flex

行內(nèi)彈性盒子容器（inline-flex）

<link  rel="stylesheet">

<div class="inline-flex bg-gray-200">
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">1</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">2</div>
  <div class="flex-1 m-2 px-4 py-2 bg-gray-400 text-gray-700 text-center">3</div>
</div>
inline-flex

柵格容器（grid）

<link  rel="stylesheet">

<div class="grid gap-4 grid-cols-3 bg-gray-200 text-center">
  <div class="bg-gray-400 p-4">1</div>
  <div class="bg-gray-400 p-4">2</div>
  <div class="bg-gray-400 p-4">3</div>
  <div class="bg-gray-400 p-4">4</div>
  <div class="bg-gray-400 p-4">5</div>
  <div class="bg-gray-400 p-4">6</div>
  <div class="bg-gray-400 p-4">7</div>
</div>
grid

浮動(dòng)（float）

CSS標(biāo)準(zhǔn)文檔流在正常情況下，頁面總是從左向右杈曲、從上向下布局的驰凛。浮動(dòng)屬性可以打破標(biāo)準(zhǔn)文檔流默認(rèn)的布局從而實(shí)現(xiàn)特殊的布局。浮動(dòng)會(huì)讓塊級(jí)元素脫離文檔流担扑，漂浮在文檔流之上恰响，因此和文檔流并不處于同一個(gè)層次。

CSS的float浮動(dòng)屬性用于設(shè)置元素水平向左或向右移動(dòng)涌献，其周圍元素同時(shí)會(huì)自動(dòng)排列胚宦。浮動(dòng)元素會(huì)盡量向左或向右移動(dòng)，直到其外邊緣觸碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂８?dòng)元素之后的元素將圍繞它间唉，浮動(dòng)元素之前的元素將不受影響绞灼。

浮動(dòng)設(shè)計(jì)的初衷并不是用來布局的，而僅僅是為了實(shí)現(xiàn)圖片文字環(huán)繞效果呈野，即圖片做浮動(dòng)低矮，文字環(huán)繞圖片。

當(dāng)元素設(shè)置浮動(dòng)屬性后被冒，會(huì)表現(xiàn)出如下特性：

  • 破壞文檔流
    浮動(dòng)屬性的本質(zhì)是用來破壞文檔流军掂，因此設(shè)置元素浮動(dòng)屬性后會(huì)導(dǎo)致父元素高度塌陷。
  • 包裹性
    包裹性包含包裹和自適應(yīng)兩個(gè)特征
  1. 包裹是指若浮動(dòng)元素的子元素寬度足夠小昨悼，則父級(jí)浮動(dòng)元素寬度就是子元素的寬度蝗锥。
  2. 自適應(yīng)是指若浮動(dòng)元素的父元素已設(shè)置寬度且浮動(dòng)元素的子元素寬度超出父元素，則浮動(dòng)元素寬度最終會(huì)表現(xiàn)為父元素的寬度率触。
  • BFC 塊狀格式化上下文
    當(dāng)元素設(shè)置了浮動(dòng)屬性终议，其display顯示屬性最終值會(huì)表現(xiàn)為block或table。
  • margin合并失效
    元素設(shè)置了浮動(dòng)屬性后會(huì)自動(dòng)形成BFC葱蝗，因此也就沒有margin合并的效果穴张。
  • 行盒和浮動(dòng)元素不可重疊性
    行框盒子和浮動(dòng)元素不會(huì)發(fā)生重疊
類名 屬性 描述
.clearfix &::after{content:""; display:table; clear:both;} 清除浮動(dòng)
.float-none float:none; 浮動(dòng)默認(rèn)值，設(shè)置元素不浮動(dòng)两曼。
.float-left float:left; 設(shè)置元素向左浮動(dòng)
.float-right float:right; 設(shè)置元素向右浮動(dòng)

左浮動(dòng)（float-left）

使用.float-left工具類將元素浮動(dòng)到父級(jí)容器的最左端

<link  rel="stylesheet">

<div class="container mx-auto p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/300x300" class="float-left mr-4 my-2 h-32"/>
  <p>使用左浮動(dòng)將元素浮動(dòng)到父級(jí)容器的左邊</p>
</div>

為了避免float屬性帶來父容器container高度塌陷皂甘，父容器添加了overflow-hidden將其轉(zhuǎn)換成BFC以解決這個(gè)問題。

float-left

右浮動(dòng)（float-right）

<link  rel="stylesheet">

<div class="container mx-auto my-4 p-4 bg-gray-200 overflow-hidden">
  <img src="http://source.unsplash.com/100x100" class="float-right ml-4"/>
  <p class="overflow-hidden">設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端設(shè)置元素右浮動(dòng)將其浮動(dòng)到父級(jí)容器的右端</p>
</div>
float-right

不浮動(dòng)（float-none）

使用.float-none工具類可重置元素的float屬性為默認(rèn)的none即不發(fā)生浮動(dòng)悼凑。

清除浮動(dòng)（clear）

類名 屬性 描述
.clear-left clear:left; 清除左浮動(dòng)
.clear-right clear:right; 清除右浮動(dòng)
.clear-both clear:both; 清除左右浮動(dòng)
.clear-none clear:none; 不清除浮動(dòng)

可替換對象（replaced object）

可替換元素縮放方式（object fit）

類名 屬性 描述
.object-fill object-fit:fill; 填充偿枕，拉伸
.object-contain object-fit:contain; 包含，縮放
.object-cover object-fit:cover; 覆蓋户辫，裁剪
.object-none object-fit:none; 原樣
.object-scale-down object-fit:scale-down; 降低渐夸，none與contain看誰小

可替換元素定位方式（object position）

類名 屬性 描述
.object-bottom object-position:bottom; 底部
.object-center object-position:center; 居中
.object-left object-position:left; 左側(cè)
.object-left-bottom object-position:left bottom; 左下角
.object-left-top object-position:left top; 左上角
.object-right object-position:right; 右側(cè)
.object-right-bottom object-position:right bottom; 右下角
.object-right-top object-position:right top; 右上角
.object-top object-position:top; 頂部
object-position
<link  rel="stylesheet">
<div class="container mx-auto my-4 p-4 bg-gray-200 grid grid-cols-3 gap-4">
  <div class="bg-black text-white text-center">
    left-top
    <img src="http://source.unsplash.com/100x100" class="object-left-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    top
    <img src="http://source.unsplash.com/100x100" class="object-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-top
    <img src="http://source.unsplash.com/100x100" class="object-right-top object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left
    <img src="http://source.unsplash.com/100x100" class="object-left object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    center
    <img src="http://source.unsplash.com/100x100" class="object-center object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right
    <img src="http://source.unsplash.com/100x100" class="object-right object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    left-bottom
    <img src="http://source.unsplash.com/100x100" class="object-left-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    bottom
    <img src="http://source.unsplash.com/100x100" class="object-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>

  <div class="bg-black text-white text-center">
    right-bottom
    <img src="http://source.unsplash.com/100x100" class="object-right-bottom object-none bg-gray-400 h-48 w-full"/>
  </div>
</div>

溢出（overflow）

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市渔欢，隨后出現(xiàn)的幾起案子墓塌，更是在濱河造成了極大的恐慌，老刑警劉巖膘茎，帶你破解...
    沈念sama閱讀 217,277評論 6贊 503
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異酷誓，居然都是意外死亡披坏，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評論 3贊 393
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門盐数，熙熙樓的掌柜王于貴愁眉苦臉地迎上來棒拂，“玉大人，你說我怎么就攤上這事≈闾耄” “怎么了谜诫？”我有些...
    開封第一講書人閱讀 163,624評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長攻旦。 經(jīng)常有香客問我喻旷，道長，這世上最難降的妖魔是什么牢屋？ 我笑而不...
    開封第一講書人閱讀 58,356評論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任且预，我火速辦了婚禮，結(jié)果婚禮上烙无，老公的妹妹穿的比我還像新娘锋谐。我一直安慰自己，他們只是感情好截酷，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布涮拗。 她就那樣靜靜地躺著，像睡著了一般迂苛。 火紅的嫁衣襯著肌膚如雪三热。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,292評論 1贊 301
  • 城市分裂傳說
    那天灾部，我揣著相機(jī)與錄音康铭，去河邊找鬼。 笑死赌髓，一個(gè)胖子當(dāng)著我的面吹牛从藤，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播锁蠕，決...
    沈念sama閱讀 40,135評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼夷野，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了荣倾？” 一聲冷哼從身側(cè)響起悯搔，我...
    開封第一講書人閱讀 38,992評論 0贊 275
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎舌仍，沒想到半個(gè)月后妒貌，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,429評論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡铸豁，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評論 3贊 334
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年灌曙，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片节芥。...
    茶點(diǎn)故事閱讀 39,785評論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡在刺，死狀恐怖逆害，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情蚣驼，我是刑警寧澤魄幕，帶...
    沈念sama閱讀 35,492評論 5贊 345
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站颖杏，受9級(jí)特大地震影響纯陨，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜输玷，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評論 3贊 328
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一队丝、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧欲鹏，春花似錦机久、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評論 0贊 22
  • 一樁弒父案膘盖，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至尤误，卻和暖如春侠畔，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背损晤。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工软棺， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人尤勋。 一個(gè)月前我還...
    沈念sama閱讀 47,891評論 2贊 370
  • 代替公主和親
    正文 我出身青樓喘落，卻偏偏與公主長得像，于是被迫代替她去往敵國和親最冰。 傳聞我的和親對象是個(gè)殘疾皇子瘦棋，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評論 2贊 354