HTML+CSS學(xué)習(xí)筆記 06

一. 元素類型

1.1 元素類型的劃分方式

  • 塊級元素,行內(nèi)級元素 (按元素的顯示類型劃分)
    • 塊級元素
      • block-level-elements
      • 獨占父元素整行
      • 可以設(shè)置寬高
      • 比如div揍庄、p棠涮、pre陈轿、h1~h6、ul霹粥、ol、li损同、dl帐偎、dt、dd御雕、table矢沿、form、article酸纲、aside捣鲸、footer、header闽坡、hgroup栽惶、main、nav疾嗅、section外厂、blockquote、hr等
    • 行內(nèi)級元素
      • inline-level-elements
      • 多個行內(nèi)級元素可以在同一行顯示
      • 不可以隨意設(shè)置寬高
      • 比如a宪迟、img酣衷、span、strong次泽、code穿仪、iframe席爽、label、input啊片、button只锻、canvas、embed紫谷、object齐饮、 video、audio等
  • 替換元素,非替換元素 (瀏覽器是否會替換掉某些元素)
    • 替換元素
      • replaced elements
      • 元素本身沒有實際內(nèi)容,但是瀏覽器會根據(jù)元素的屬性動態(tài)絕對元素的顯示內(nèi)容
      • 比如img笤昨、input祖驱、iframe、video瞒窒、embed捺僻、canvas、audio崇裁、object等
    • 非替換元素
      • non-replaced elements
      • 和替換元素相反匕坯，元素本身是有實際內(nèi)容的，瀏覽器會直接將其內(nèi)容顯示出來拔稳，而不需要根據(jù)元素類型和屬性來判斷到底顯示什么內(nèi)容
      • 比如div葛峻、p、pre巴比、h1~h6术奖、ul、ol匿辩、li腰耙、dl、dt铲球、dd挺庞、table、form稼病、article选侨、aside、footer然走、header援制、hgroup、main芍瑞、nav晨仑、section、blockquote、hr洪己、a妥凳、strong、span答捕、code逝钥、label等

1.2 元素類型的總結(jié)

image.png

  • 塊級元素的特點: 塊級元素都是非替換元素,獨占父元素的整行,可以任意設(shè)置寬高

  • 行內(nèi)非替換元素的特點:可以和其他元素在同一行,但是不能設(shè)置寬高

  • 行內(nèi)替換元素的特點:可以和其他元素在同一行,能設(shè)置寬高

1.3 CSS屬性 --- display

  • display有以下幾個常用取值

    • block: 讓元素顯示為塊級元素
    • inline: 讓元素顯示為行內(nèi)級元素
    • inline-block: 讓元素同時具有塊級元素和行內(nèi)級元素的特點
    • none:讓元素不顯示

  • display其他的不常用的取值,等同于某些HTML元素

    • table: <table> 一個block-level的表格
    • inline-table: <table> 一個inline-level的表格
    • table-row: <tr>
    • table-row-group: <tbody>
    • table-header-group: <thead>
    • table-footer-group: <tfoot>
    • table-cell: <td>,<th> 一個單元格
    • table-caption: <caption> 表格的標題
    • list-item : <li>

1.4 CSS屬性 --- visibility

visibility可以控制元素的可見性,有兩個常見的取值

  • visible: 默認值,讓元素可見
  • hidden: 讓元素隱藏不可見

visibility:hidden和display:none都是讓元素隱藏,有什么不同?

  • visiblity:hidden是讓元素隱藏,但是元素依舊占據(jù)原來的位置,就像隱身一樣
  • display:none是真正的消失,元素會不占據(jù)原來的位置,旁邊的元素會頂替它的元素,就像消失一般

1.5 CSS屬性 --- overflow

overflow屬性用于控制元素內(nèi)容溢出的處理方式,常用取值如下

  • visible:超出部分仍然可見,這是默認值
  • hidden:超出部分直接裁剪
  • scroll
    • 溢出部分會裁剪,但是可以通過滾動條來查看裁剪內(nèi)容
    • 滾動條占據(jù)位置
    • 不管元素內(nèi)容超不超出元素本身,都會出現(xiàn)滾動條
  • auto
    • 溢出部分會裁剪,但是可以通過滾動條來查看裁剪內(nèi)容
    • 滾動條占據(jù)位置
    • 會根據(jù)元素內(nèi)容是否移溢出動態(tài)決定是否出現(xiàn)滾動條

注意:

  • overflow是設(shè)置水平,垂直兩個方向的溢出處理行為
  • 如果要設(shè)置單方向的,可以通過overflow-x,和overflow-y來分別設(shè)置,但是不推薦,因為這兩個屬性還沒有成為標準
  • 建議直接使用overflow即可

1.6 元素之間的空格

  • 行內(nèi)級元素(包括inline-block)之間會出現(xiàn)空格,這是由于空格和換行引起的
  • 目前可行的解決方法
    • 代碼不要留空格(會造成代碼難以閱讀,難以維護)
    • 代碼注釋掉空格(比較麻煩)
    • 給父元素font-size設(shè)為0,自己單獨設(shè)置font-size(此方法在Safari瀏覽器不可用)
    • 給元素加浮動(推薦)

1.7 元素之間的嵌套規(guī)范

  • 塊級元素,inline-block元素
    • 一般情況下,可以包含任何元素
    • 但是,p元素不能包含div元素'
  • 行內(nèi)元素(a,span,strong等):
    • 一般情況下,只能嵌套行內(nèi)元素

二. 盒子模型

2.1 盒子的概念

HTML中每一個元素都可以看作是一個盒子,都有自己的盒模型

2.2 盒子模型 (box model )的幾個重要屬性

  • 內(nèi)容(content)
  • 內(nèi)邊距(padding)
  • 邊框(border)
  • 外邊距(margin

默認盒子模型圖示

image.png

瀏覽器開發(fā)者工具的盒模型

image.png

2.3 內(nèi)容相關(guān)屬性

  • width: 寬度
  • min-width: 最小寬度,無論內(nèi)容多少,寬度都不小于這個值,小于最小寬度時,瀏覽器將出現(xiàn)橫向滾動條
  • max-width: 最大寬度,無論內(nèi)容多少,寬度都不大于這個值
  • height: 高度
  • min-height: 最小高度,無論內(nèi)容多少,高度都不小于這個值,小于最小高度時,瀏覽器將出現(xiàn)縱向滾動條
  • max-height: 最大高度,無論內(nèi)容多少,高度都不大于這個值

2.4 內(nèi)邊距

2.4.1 內(nèi)邊距相關(guān)屬性

  • padding-top:上內(nèi)邊距

  • padding-right: 右內(nèi)邊距

  • padding-bottom: 下內(nèi)邊距

  • padding-left: 左內(nèi)邊距

  • padding:是padding-top,padding-right,padding-bottom,padding-left屬性的簡寫

2.4.2 padding的取值規(guī)律

  • 按順時針排序: padding-top,padding-right,padding-bottom,padding-left
  • 四個值: 代表上,右,下,左
  • 三個值,代表上,右(左),下
  • 兩個值: 代表上(下),右(左)
  • 一個值: 上下左右取一樣的值

代碼示例

div {
    padding:10px 20px 30px 40px;
}

/* 等同于 */

div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:30px;
    padding-left:40px;
}


div {
    padding: 10px 20px 30px;
}
/* 等同于 */
div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:30px;
    padding-left:20px;
}

div {
    padding:10px 20px;
}

/* 等同于 */
div {
    padding-top:10px;
    padding-right:20px;
    padding-bottom:10px;
    padding-left:20px;
}

div {
    padding:10px;
}

/* 等同于 */

div {
    padding-top:10px;
    padding-right:10px;
    padding-bottom:10px;
    padding-left:10px;
}

2.5 外邊距

2.5.1 外邊距的相關(guān)屬性

  • margin-top:上外邊距

  • margin-right: 右外邊距

  • margin-bottom: 下外邊距

  • margin-left: 左外邊距

  • margin:是margin-top,margin-right,margin-bottom,margin-left屬性的簡寫

2.5.2 外邊距的取值規(guī)律

  • 按順時針排序: margin-top,margin-right,margin-bottom,margin-left
  • 四個值: 代表上,右,下,左
  • 三個值,代表上,右(左),下
  • 兩個值: 代表上(下),右(左)
  • 一個值: 上下左右取一樣的值

代碼示例

div {
    margin:10px 20px 30px 40px;
}

/* 等同于 */

div {
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:40px;
}


div {
    margin: 10px 20px 30px;
}
/* 等同于 */
div {
    margin-top:10px;
    margin-right:20px;
    margin-bottom:30px;
    margin-left:20px;
}

div {
    padding:10px 20px;
}

/* 等同于 */
div {
    marign-top:10px;
    margin-right:20px;
    margin-bottom:10px;
    marign-left:20px;
}

div {
    margin:10px;
}

/* 等同于 */

div {
    margin-top:10px;
    margin-right:10px;
    margin-bottom:10px;
    margin-left:10px;
}

2.5.3 外邊距的上下傳遞問題(對象是父子元素)

  • margin-top傳遞(常用)
    • 如果塊級元素的頂部線于父元素的頂部線重疊(也就是第一個塊級子元素)的話,那么這個塊級元素的margin-top會傳給父元素
  • margin-bottom傳遞(不常用)
    • 如果塊級元素的底部線與父元素的底部線重疊,并且父元素的高度為auto的話,那么這個塊級元素的margin-bottom會傳遞給父元素
  • 如何解決這種傳遞問題呢?
    • 給父元素設(shè)置padding-top/padding-bottom,而不要使用margin-top/margin-bottom
    • 給父元素設(shè)置border
    • 觸發(fā)BFC,給父元素設(shè)置overflow為auto/hidden
  • 建議:
    • margin主要用來設(shè)置兄弟元素的間距
    • padding主要用來設(shè)置父子元素的間距

2.5.4 外邊距的上下折疊問題(對象是兄弟元素)

  • 什么是外邊距的上下折疊?

    • 垂直方向上的兩個相鄰元素的marign-top和margin-bottom會合并成一個margin,這種現(xiàn)象叫做外邊距的折疊現(xiàn)象

    • 水平方向的margin(margin-left和margin-right是永遠不會折疊的)

  • 折疊后最終值的計算規(guī)則

    • 取較大值的那個

  • 建議

    • 為了防止產(chǎn)生折疊問題,只設(shè)置一個元素的垂直方向的margin即可

2.6 border(邊框)

2.6.1 邊框的相關(guān)屬性

  • 邊框?qū)挾? border-width
    • border-top-width,border-right-width,border-bottom-width,border-left-width
    • border-width是以上四個取值的簡寫形式,取值也是上右下左
  • 邊框顏色: border-color
    • border-top-color,border-right-color,border-bottom-color,border-left-color
    • border-color是以上四個取值的簡寫形式,取值也是上右下左
  • 邊框樣式: border-style
    • border-top-style,border-right-style,border-bottom-style,border-left-style
    • border-style是以上四個取值的簡寫形式,取值也是上右下左
  • 上邊框: border-top
    • 包含border-top-width,border-top-style,border-top-color,且三者書寫順序無關(guān)緊要
    • 書寫形式: border-top: 2px solid #ccc;
  • 右邊框: border-right
    • 包含border-right-width,border-right-style,border-right-color,且三者書寫順序無關(guān)緊要
    • 書寫形式: border-right: 2px solid #ccc;
  • 下邊框: border-bottom
    • 包含border-bottom-width,border-bottom-style,border-bottom-color,且三者書寫順序無關(guān)緊要
    • 書寫形式: border-bottom: 2px solid #ccc;
  • 左邊框: border-left
    • 包含border-left-width,border-left-style,border-left-color,且三者書寫順序無關(guān)緊要
    • 書寫形式: border-left: 2px solid #ccc;
  • border的復(fù)合寫法
    • border:2px solid #ccc;
    • 代表4個方向的border采取一樣的樣式

2.6.2 邊框樣式(border-style)的取值

  • none: 沒有邊框,這是默認值
  • dotted: 邊框上是一系列的點
  • dashed: 邊框上是一系列的虛線
  • solid: 實線,最常用

2.6.3 邊框的形狀

  • 矩形
  • 梯形
  • 三角形
image.png

2.7 行內(nèi)非替換元素的注意點

  • 以下屬性對于行內(nèi)非替換元素(span,strong等)無效
    • width,height,margin-top,margin-bottom
  • 以下屬性對于行內(nèi)非替換元素比較特殊
    • padding-top,padding-bottom,上下方向的border(有效,但是上下方向的bortder,padding均不占空間)

2.8 邊框圓角 (border-radius)

2.8.1 CSS屬性 ---- border-*-*-radius

  • border半徑相關(guān)的屬性有

    • border-top-left-radius: 左上角圓角
    • border-top-right-radius: 右上角圓角
    • border-bottom-left-radius: 左下角圓角
    • border-bottom-right-radius: 右下角圓角

  • border-*-*-radius的取值,以border-top-left-radius為例

    • 定義的是四分之一的橢圓的半徑
    • 第一個是水平半徑,即長半軸
    • 第二個是垂直半徑,即短半軸
    • 只寫一個值,代表垂直半徑與水平半徑相同
    • 百分比代表的是: 水平百分比代表的是盒模型的寬度,垂直百分比代表的是盒模型的高度

    代碼演示

    border-top-left:20px 30px;
border-top-right: 20% 30%;

2.8.2 CSS屬性 ---- border-radius

border-radius是一個縮寫屬性

  • border-radius:10px 20px 30px 40px / 15px 25px 35px 45px;

  • '/ '前面是水平的四個值,后面是垂直方向的四個值

  • 四個值分別是按順時針方向分為top-left,top-right,bottom-right,bottom-left

    • 如果bottom-left沒設(shè)置，就跟隨top-right

    • 如果bottom-right沒設(shè)置拱镐，就跟隨top-left

    • 如果top-right沒設(shè)置艘款，就跟隨top-left

  • border-radius:大于等于50% 如果這是個正方形,則會變成一個正圓

2.9 CSS屬性 --- outline

  • outline代表元素的外輪廓

    • 不占用元素空間
    • 默認顯示在border的外面,但是用法與border一樣

  • outline的相關(guān)屬性有

    • outline-width: 外輪廓的寬度
    • outline-style: 外輪廓的樣式,等同于border-style
    • outline-color:外輪廓的顏色
    • outline: outline-width,outline-style,outline-color的復(fù)合寫法,與border一樣
    outline:10px solid gray;

  • 應(yīng)用場景

    • 去除a元素,input元素默認聚焦時的默認樣式

2.10 CSS屬性 --- box-shadow

  • box-shadow用來設(shè)置元素一個或者多個陰影

  • 每個陰影用shadow表示,多個陰影效果可以疊加

  • shadow的常見格式是: inset ? && <length>{2,4} && <color>?

    • 第一個length: 水平方向的偏移,正值向右,負值向左
    • 第二個length: 垂直方向的偏移,正值向下,負值向上
    • 第三個length: 模糊半徑
    • 第四個length: 擴散距離
    • color: 陰影的顏色,默認黑色
    • inset 外框陰影變內(nèi)框陰影,默認為outside,陰影往外

  • 一個元素可以設(shè)置多組陰影值,中間以逗號隔開

  • .box {
    width:100px;
    height:100px;
    box-shadow:10px 10px 10px 10px #f00,-10px -10px 10px 10px #ff0;
}

2.11 CSS屬性 --- text-shadow

  • 給文字添加陰影效果,用法與box-shadow類似
  • text-shadow沒有擴散距離和inset 意思是 text-shadow的書寫格式是: <length>{2,,3} <color>?
  • text-shadow同樣適用于::first-line,::first-letter

2.12 CSS屬性 --- box-sizing

2.12.1 box-sizing的定義

  • box-sizing用來設(shè)置盒子模型中元素大小的行為

2.12.2 box-sizing的取值

  • content-box: padding,border都設(shè)置在width/height的外面
  • border-box: padding,border都設(shè)置在width/height的里面

2.12.3 box-sizing:content-box

  • 元素默認值就是box-sizing: content-box
  • 是w3c標準建議的盒模型,又稱標準盒模型
  • 元素實際的width = content的width + padding-left + padding-right + border-left + border-right
  • 元素實際的height = contnet的height + padding-top + padding-bottom + border-top + border-bottom

  • 增加padding和border的值會使元素變大


    image.png

2.12.4 box-sizing: border-box

  • IE8以下的瀏覽器采用的盒子模型,俗稱怪異盒子模型
  • 元素實際的width就是content的width
  • 元素實際的height就是content的height
  • 增加padding和border,元素不會變大,但是content區(qū)域會縮小
image.png

2.13 元素的水平居中顯示

在一些需求中,需要元素在其父元素中水平居中(父元素一般是block元素或者是inline-bloc元素)

  • 行內(nèi)級元素,inline-block元素
    • 父元素設(shè)置text-align:center即可實現(xiàn)居中
  • block元素
    • 本身設(shè)置margin:0 auto以達到水平居中

三. background背景的使用

3.1 background-image

  • background-image是用來設(shè)置元素的背景圖片

    • 背景圖片會蓋在(注意不是覆蓋)background-color上

  • 如果設(shè)置了多張背景圖片

    • .box {
    background-image:url("./img/a.jpg"),url("./img/b.png"),url("./img/c.gif")
}

    • 設(shè)置的第一張圖片在最上面,,其他元素按照順序?qū)盈B在下面

    • 注意,如果元素沒有寬度或者高度,加上背景圖片,也不會顯示

3.2 background-repeat

  • background-repeat用來設(shè)置當背景圖片的大小小于元素的大小時,元素背景是否平鋪
  • 常用的取值有
    • repeat: 水平方向和垂直方向都平鋪(默認值)
    • no-repeat: 不平鋪(最常用)
    • repeat-x : 水平方向平鋪,垂直方向不平鋪
    • repeat-y: 垂直方向平鋪,水平方向不平鋪

3.3 background-size

  • background-size用于設(shè)置背景圖片的大小,可以有如下的幾個值

    • auto: 以背景圖片本身大小設(shè)置 (這是默認值)
    • cover: 以寬高比縮放背景圖,使其完全鋪滿整個元素,但是圖片可能會裁剪一部分
    • contain:以寬高比縮放圖片,但是未必保證可以鋪滿整個元素
    • 百分比: 指的是背景放置的元素的寬高
    • length: 具體的大小,比如100px

  • 注意

    • 默認值為auto auto
    • 只設(shè)置一個值時,另外一個值是auto
    • 設(shè)置兩個值時,第一個值是背景的寬度,第二個值是背景圖的高度

  • 代碼如下

    • /* 背景圖片寬度為100px 高度為200px */
div {
    background-size: 100px 200px;
}

/* 背景圖片寬度為100px 高度為auto */
div {
    background-size: 100px;
}

/* 背景圖片寬度為auto 高度為200px */
div {
    background-size: auto 200px;
}

    • /* 背景圖片寬度為元素寬度的50% 高度為元素高度的60% */
div {
    background-size: 50% 60%;
}
/* 背景圖片寬度為元素寬度的66% 高度為auto */
div {
    background-size:66%;
}

    • /* 以寬高比縮放背景圖,使其完全鋪滿整個元素,但是圖片可能會裁剪一部分*/
div {
    background-size:cover;
}

    • /* 背景圖片被拉伸,保證圖片的寬高比,當不能保證一定能鋪滿整個元素*/
div {
    background-size:contain;
}

3.4 background-position

3.4.1 background-position的基本認識

  • 用于設(shè)置背景圖片在元素中水平,垂直的位置

  • background-position: 水平值,垂直值,默認為0,0,正值向右,下,負值向左,上

  • 水平方向: 可以設(shè)left,center,right三個方向值

  • 垂直方向: 可以設(shè)top,center,bottom三個值

  • 如果只設(shè)了一個值,另一個值為center

    • 比如: background-position:100px;等價于 background-position:100px center;

3.4.2 CSS Sprite (雪碧圖/精靈圖)

  • 什么是CSS Sprite
    • 是一種圖片合成技術(shù),將多個小圖片合并到一張圖片上,再利用CSS背景定位技術(shù)顯示對應(yīng)的圖片
    • 也稱為雪碧圖,精靈圖等
  • 使用CSS Sprite的好處
    • 減少網(wǎng)頁http請求數(shù)量,加速顯示網(wǎng)頁,減少服務(wù)器壓力
    • 減少圖片總大小
    • 減少了圖片命名的困擾,只需要命名一張圖片即可
  • CSS Sprite的制作方法

3.5 background-attachment

  • background-attachment可以設(shè)置以下幾個值
    • scroll: 默認值, 背景圖片跟隨元素一起滾動
    • local: 背景圖片跟隨元素以及元素內(nèi)容一起滾動
    • fixed: 背景圖片相當于瀏覽器窗口固定,不會根據(jù)元素滾動而滾動

3.6 background的復(fù)合寫法

background是背景一系列的復(fù)合寫法,其常用格式是

image position/size repeat attachment color

注意:

  • background-size可以省略,如果不省略,size必須緊跟再posiiton后面,并以/分開

  • 其他屬性也都可以省略,且順序無所謂

  • .box{
    background:url("../img/beer.png") center bottom/cover no-repeat fixed #ff0;
}

3.7 background-image和img的選擇

  • 利用background-image和img元素都能實現(xiàn)顯示圖片的需求,那么在開發(fā)中應(yīng)該如何選擇呢
  • img background-image
    性質(zhì) HTML元素 CSS樣式
    圖片是否占據(jù)空間 是 否
    瀏覽器右鍵能否查看圖片地址 能 不能
    支持CSS Sprite 不支持 支持
    更有可能被搜索引擎收錄 可以,結(jié)合alt屬性 不行
    加載順序 優(yōu)先加載 等HTML元素加載完畢之后才加載

  • 總結(jié)

    • img，作為網(wǎng)頁內(nèi)容的重要組成部分沃琅，比如廣告圖片哗咆、LOGO圖片、文章配圖益眉、產(chǎn)品圖片
    • background-image岳枷，可有可無。有呜叫，能讓網(wǎng)頁更加美觀。無殿衰，也不影響用戶獲取完整的網(wǎng)頁內(nèi)容信息

3.8 CSS屬性 --- cursor

  • cursor用來設(shè)置鼠標指針(光標)在元素上面的顯示樣式,常用值有

    • auto：瀏覽器根據(jù)上下文決定指針的顯示樣式朱庆，比如根據(jù)文本和非文本切換指針樣式
    • default：由操作系統(tǒng)決定，一般就是一個小箭頭
    • pointer：一只小手闷祥，鼠標指針挪動到鏈接上面默認就是這個樣式
    • text：一條豎線娱颊，鼠標指針挪動到文本輸入框上面默認就是這個樣式
    • none：沒有任何指針顯示在元素上面
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市凯砍，隨后出現(xiàn)的幾起案子箱硕，更是在濱河造成了極大的恐慌，老刑警劉巖悟衩，帶你破解...
    沈念sama閱讀 206,311評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件剧罩，死亡現(xiàn)場離奇詭異，居然都是意外死亡座泳，警方通過查閱死者的電腦和手機惠昔，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來挑势，“玉大人镇防，你說我怎么就攤上這事〕北ィ” “怎么了来氧？”我有些...
    開封第一講書人閱讀 152,671評論 0贊 342
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經(jīng)常有香客問我啦扬，道長中狂，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,252評論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任考传，我火速辦了婚禮吃型，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘僚楞。我一直安慰自己勤晚，他們只是感情好，可當我...
    茶點故事閱讀 64,253評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布泉褐。 她就那樣靜靜地躺著赐写，像睡著了一般。 火紅的嫁衣襯著肌膚如雪膜赃。 梳的紋絲不亂的頭發(fā)上挺邀，一...
    開封第一講書人閱讀 49,031評論 1贊 285
  • 城市分裂傳說
    那天，我揣著相機與錄音跳座，去河邊找鬼端铛。 笑死，一個胖子當著我的面吹牛疲眷，可吹牛的內(nèi)容都是我干的禾蚕。 我是一名探鬼主播，決...
    沈念sama閱讀 38,340評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼狂丝，長吁一口氣：“原來是場噩夢啊……” “哼换淆！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起几颜，我...
    開封第一講書人閱讀 36,973評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤倍试，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后蛋哭，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體县习，經(jīng)...
    沈念sama閱讀 43,466評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年谆趾，在試婚紗的時候發(fā)現(xiàn)自己被綠了准颓。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,039評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡棺妓，死狀恐怖攘已，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情怜跑，我是刑警寧澤样勃，帶...
    沈念sama閱讀 33,701評論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布吠勘，位于F島的核電站，受9級特大地震影響峡眶，放射性物質(zhì)發(fā)生泄漏剧防。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一辫樱、第九天 我趴在偏房一處隱蔽的房頂上張望峭拘。 院中可真熱鬧，春花似錦狮暑、人聲如沸鸡挠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0贊 19
  • 一樁弒父案搬男，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽拣展。三九已至，卻和暖如春缔逛，著一層夾襖步出監(jiān)牢的瞬間备埃，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1贊 262
  • 情欲美人皮
    我被黑心中介騙來泰國打工褐奴， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留按脚，地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2贊 354
  • 代替公主和親
    正文 我出身青樓敦冬，卻偏偏與公主長得像乘寒，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子匪补，可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2贊 345