rem布局&響應式布局

rem布局

1.rem單位

2.媒體查詢

2.1 什么是媒體查詢

2.2 媒體查詢語法規(guī)范

2.3 媒體查詢+rem實現元素動態(tài)大小變化

2.4 引入資源

3. less 基礎

3.1 維護css弊端

3.2 Less 介紹

1捏悬、Less安裝

2江醇、Less 變量

3、Less 編譯 插件

4悲伶、Less 嵌套

5挽懦、Less 運算

6翰意、less導入

4. rem適配方案

4.1rem實際開發(fā)適配方案1

4.2 蘇寧首頁

4.3 rem 適配方案2

1、適配庫flexible.js

2巾兆、插件 cssrem

響應式布局

1. 響應式開發(fā)原理

1.1 響應式開發(fā)原理

1.2 響應式布局容器

2. bootstrap的介紹

2.1Bootstrap簡介

2.2 bootstrap優(yōu)點

2.3 版本簡介

2.4bootstrap基本使用

2.5 bootstrap布局容器

2.6 bootstrap柵格系統

1猎物、介紹

2、柵格選項參數

3角塑、柵格嵌套

4蔫磨、列偏移

5、列排序

6圃伶、響應式工具

3. 阿里百秀案例制作

3.1 技術選型

3.2 屏幕劃分方法

3.3項目結構搭建

rem布局

1.rem單位

rem (root em)是一個相對單位堤如,類似于em

  • em是父元素字體大小
  • rem是相對html元素的字體大小
/* 根html 為 12px */
html {
   font-size: 12px;
}
/* 此時 div 的字體大小就是 24px */       
div {
    font-size: 2rem;
}

rem的優(yōu)勢:父元素文字大小可能不一致蒲列, 但是整個頁面只有一個html,可以很好來控制整個頁面的元素大小搀罢。

2.媒體查詢

2.1 什么是媒體查詢

媒體查詢(Media Query)是CSS3新語法

  • 使用 @media查詢蝗岖,可以針對不同的媒體類型定義不同的樣式
  • @media 可以針對不同的屏幕尺寸設置不同的樣式
  • 當你重置瀏覽器大小的過程中,頁面也會根據瀏覽器的寬度和高度重新渲染頁面
  • 目前針對很多蘋果手機榔至、Android手機抵赢,平板等設備都用得到多媒體查詢

2.2 媒體查詢語法規(guī)范

  • 用 @media開頭 注意@符號
  • mediatype 媒體類型
  • 關鍵字 and not only
  • media feature 媒體特性 必須有小括號包含
@media mediatype and|not|only (media feature) {
    CSS-Code;
}
  1. mediatype 查詢類型

將不同的終端設備劃分成不同的類型,稱為媒體類型

  • all 用于所有設備
  • print 用于打印機和打印預覽
  • screen 用于電腦屏幕唧取,平板電腦铅鲤,智能手機等
  1. 關鍵字

關鍵字將媒體類型或多個媒體特性連接到一起做為媒體查詢的條件。

  • and:可以將多個媒體特性連接到一起枫弟,相當于“且”的意思邢享。
  • not:排除某個媒體類型,相當于“非”的意思淡诗,可以省略骇塘。
  • only:指定某個特定的媒體類型,可以省略韩容。
  1. 媒體特性

    每種媒體類型都具體各自不同的特性款违,根據不同媒體類型的媒體特性設置不同的展示風格。我們暫且了解三個群凶。

    注意他們要加小括號包含

    • width: 定義輸出設備頁面可見區(qū)域的寬度
    • min-width : 表示最小寬度(當設備屏幕大于min-width的值時奠货,則滿足條件)
    • max-width : 表示最大寬度(當設備屏幕小于max-width的值時,則滿足條件)
  1. 媒體查詢書寫規(guī)則

    注意: 為了防止混亂座掘,媒體查詢按照從小到大或者從大到小的順序來寫,一般從小到大來寫柔滔,這樣代碼更簡潔

    /* 從小到大 */
    @media screen and (max-width: 539px) {
     body {
            background-color: red;
        }
    }
    /* 由于沖突覆蓋溢陪,下面一行相當于@media screen and (min-width: 540px) and (max-width: 969px) */
    
    @media screen and (min-width: 540px) {
        body {
            background-color: blue;
        }
    }
    @media screen and (min-width: 970px) {
        body {
            background-color: green;
        }
    }
    

2.3 媒體查詢+rem實現元素動態(tài)大小變化

 <style>
        * {
            margin: 0;
            padding: 0;
        }
        .top {
            height: 1rem;
            font-size: .5rem;
            background-color: green;
            color: #fff;
            text-align: center;
            line-height: 1rem;
        }
     
        @media screen and (min-width: 320px) {
            html {
                font-size: 50px;
            }
        }
        @media screen and (min-width: 640px) {
            html {
                font-size: 100px;
            }
        }
    </style>
    ...
    <div class="top">購物車</div>

2.4 引入資源

針對不同媒體類型和屏幕尺寸,引入不同的樣式文件睛廊,同樣建議從小到大

<link rel="stylesheet" type="text/css" media="screen and(min-width:320px)" href="style320.css">
<link rel="stylesheet" type="text/css" media="screen and(min-width:640px)" href="style640.css">

3. less 基礎

3.1 維護css弊端

CSS 是一門非程序式語言形真,沒有變量、函數超全、SCOPE(作用域)等概念咆霜。

  • CSS 需要書寫大量看似沒有邏輯的代碼,CSS 冗余度是比較高的嘶朱。
  • 不方便維護及擴展蛾坯,不利于復用。
  • CSS 沒有很好的計算能力
  • 非前端開發(fā)工程師來講疏遏,往往會因為缺少 CSS 編寫經驗而很難寫出組織良好且易于維護的 CSS 代碼項目脉课。

3.2 Less 介紹

Less(LeanerStyle Sheets 的縮寫)是一門 CSS擴展語言救军,也成為CSS預處理器

做為 CSS的一種形式的擴展,在現有的CSS語法上倘零,為CSS加入程序式語言的特性

它在CSS 的語法基礎之上唱遭,引入了變量,Mixin(混入)呈驶,運算以及函數等功能拷泽,大大簡化了 CSS 的編寫,并且降低了 CSS的維護成本袖瞻,Less可以讓我們用更少的代碼做更多的事情

Less中文網址:http://lesscss.cn/

常見的CSS預處理器:Sass司致、Less、Stylus

一句話:Less是一門 CSS 預處理語言虏辫,它擴展了CSS的動態(tài)特性

1蚌吸、Less安裝

①安裝nodejs,可選擇版本(8.0)砌庄,網址:http://nodejs.cn/download/

②檢查是否安裝成功羹唠,使用cmd命令 “node –v”查看版本即可

③基于nodejs在線安裝Less,使用cmd命令“npm install -g less”即可

④檢查是否安裝成功娄昆,使用cmd命令“ lessc -v ”查看版本即可

2佩微、Less 變量

變量是指沒有固定的值,可以改變的萌焰。因為我們CSS中的一些顏色和數值等經常使用哺眯。

@變量名:值;
  • 必須有@為前綴
  • 不能包含特殊字符
  • 不能以數字開頭
  • 大小寫敏感
@color: pink;

3、Less 編譯 插件

Easy LESS 插件用來把less文件編譯為css文件

只要保存一下Less文件扒俯,會自動生成CSS文件

4奶卓、Less 嵌套

// 將css改為less
#header .logo {
  width: 300px;
}

#header {
    .logo {
       width: 300px;
    }
}

如果遇見 (交集|偽類|偽元素選擇器) ,利用&進行連接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
  &::before {
      content:"";
  }
}

5撼玄、Less 運算

任何數字夺姑、顏色或者變量都可以參與運算。就是Less提供了加(+)掌猛、減(-)盏浙、乘(*)、除(/)算術運算荔茬。

/*Less 里面寫*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至還可以這樣 */
width: (@width + 5) * 2;

color: #888 - #222;

width: 12rem / 78px;
  • 乘號(*)和除號(/)的寫法
  • 運算符中間左右有個空格隔開 1px + 5
  • 對于兩個不同的單位的值之間的運算废膘,運算結果的值取第一個值的單位
  • 如果兩個值之間只有一個值有單位,則運算結果就取該單位

6慕蔚、less導入

在一個less文件導入另一個樣式文件

/* index.less */
@import "common";
/* common.less是另一個樣式文件 */

4. rem適配方案

  1. 當設備尺寸發(fā)生改變的時候丐黄,元素可以等比例適配當前設備

  2. 使用媒體查詢,根據不同設備按比例設置html的字體大小坊萝,然后頁面元素使用rem做尺寸單位孵稽,當html字體大小變化许起,元素尺寸也會發(fā)生變化,從而達到等比縮放的適配

技術方案:

  1. less+rem+媒體查詢

  2. flexible.js+rem

總結:

  • 兩種方案現在都存在

  • 方案2 更簡單

4.1rem實際開發(fā)適配方案1

1菩鲜、選一套標準尺寸750px為準

①假設設計稿是750px

2园细、用 屏幕尺寸 / 劃分的份數 = html字體大小

②假設我們把整個屏幕劃分為15等份(劃分標準不一可以是20份也可以是10等份)

③每一份作為html字體大小,這里就是50px

④那么在320px設備的時候接校,字體大小為320/15就是 21.33px

3猛频、元素在750px屏幕尺寸下的px / html字體大小 = 元素的rem值

⑤用我們頁面元素的大小除以不同的 html字體大小會發(fā)現他們比例還是相同的

⑥比如我們以750為標準設計稿

⑦一個100100像素的頁面元素在 750屏幕下, 就是 100/ 50 轉換為rem 是 2rem2rem 比例是1比1

⑧320屏幕下蛛勉, html字體大小為21.33 則 2rem= 42.66px 此時寬和高都是 42.66 但是寬和高的比例還是 1比1

⑨但是已經能實現不同屏幕下 頁面元素盒子等比例縮放的效果

總結:

①最后的公式:頁面元素的rem值 = 頁面元素值(px) / (屏幕寬度 / 劃分的份數)

②屏幕寬度/劃分的份數就是 html font-size 的大小

③或者:頁面元素的rem值 = 頁面元素值(px) / html font-size 字體大小

4.2 蘇寧首頁

蘇寧首頁地址 :蘇寧首頁

1鹿寻、 技術選型

方案:我們采取單獨制作移動頁面方案

技術:布局采取rem適配布局(less + rem + 媒體查詢)

設計圖: 本設計圖采用 750px 設計尺寸

2、搭建文件結構

3诽凌、設置視口標簽以及引入初始化樣式

<meta name="viewport" content="width=device-width, user-scalable=no,         initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<link rel="stylesheet" href="css/normalize.css">

4毡熏、設置公共common.less文件

  • 新建common.less 設置好最常見的屏幕尺寸,利用媒體查詢設置不同的html字體大小侣诵,因為除了首頁其他頁面也需要
  • 我們關心的尺寸有 320px痢法、360px、375px杜顺、384px财搁、400px、414px躬络、424px尖奔、480px、540px、720px、750px
  • 劃分的份數我們定為 15等份
  • 因為我們pc端也可以打開蘇寧移動端首頁,我們默認html字體大小為 50px,注意這句話寫到最上面

4.3 rem 適配方案2

1零院、適配庫flexible.js

手機淘寶團隊出的簡潔高效 移動端適配庫flexible.js

實現了不同屏幕的媒體查詢,因為里面js做了處理

它的原理是把當前設備劃分為10等份,但是不同設備下飞崖,比例還是一致的

我們要做的,就是確定好我們當前設備的html 文字大小就可以了

比如當前設計稿是 750px德撬, 那么我們只需要把 html 文字大小設置為 75px(750px / 10) 就可以

里面頁面元素rem值: 頁面元素的px 值 / 75 (插件cssrem可以實現)

剩余的铲咨,讓flexible.js來去算

github地址:https://github.com/amfe/lib-flexible

總結:

因為flexible是默認將屏幕分為10等分

但是當屏幕大于750的時候希望不要再去重置html字體了,所以要自己通過媒體查詢設置一下蜓洪,并且要把權重提到最高

@media screen and (min-width: 750px) {
    html {
        font-size: 75px!important;
    }
}

2纤勒、插件 cssrem

VSCode px 轉換rem 插件 cssrem

插件默認html font size 是16px轉換的,所以需要自己配置

  • vs左下角設置--更多操作--打開setting.json--輸入cssroot--修改fontsize--重啟vs

響應式布局

1. 響應式開發(fā)原理

1.1 響應式開發(fā)原理

就是使用媒體查詢隆檀,針對不同寬度的設備進行布局和樣式的設置摇天,從而適配不同設備

設備的劃分情況:

  • 小于768的為超小屏幕(手機)
  • 768~992之間的為小屏設備(平板)
  • 992~1200的中等屏幕(桌面顯示器)
  • 大于1200的寬屏設備(大桌面顯示器)

1.2 響應式布局容器

響應式需要一個父級做為布局容器粹湃,來配合子級元素來實現變化效果

原理就是在不同屏幕下,通過媒體查詢來改變這個布局容器的大小泉坐,再改變里面子元素的排列方式和大小为鳄,從而實現不同屏幕下,看到不同的頁面布局和樣式變化

父容器版心的尺寸劃分

  • 超小屏幕(手機腕让,小于 768px):設置寬度為 100%
  • 小屏幕(平板孤钦,大于等于 768px):設置寬度為 750px
  • 中等屏幕(桌面顯示器,大于等于 992px):寬度設置為 970px
  • 大屏幕(大桌面顯示器纯丸,大于等于 1200px):寬度設置為 1170px

但是我們也可以根據實際情況自己定義劃分

2. bootstrap的介紹

2.1Bootstrap簡介

Bootstrap 來自 Twitter(推特)偏形,Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的觉鼻,它簡潔靈活俊扭,使得 Web 開發(fā)更加快捷

中文網 官網 推薦網站

框架:它有一套比較完整的網頁功能解決方案,而且控制權在框架本身坠陈,有預制樣式庫萨惑、組件和插件。使用者要按照框架所規(guī)定的某種規(guī)范進行開發(fā)

2.2 bootstrap優(yōu)點

  • 標準化的html+css編碼規(guī)范
  • 提供了一套簡潔畅姊、直觀咒钟、強悍的組件
  • 有自己的生態(tài)圈,不斷的更新迭代
  • 讓開發(fā)更簡單若未,提高了開發(fā)的效率

2.3 版本簡介

2.x.x:停止維護,兼容性好,代碼不夠簡潔朱嘴,功能不夠完善

3.x.x:目前使用最多,穩(wěn)定,但是放棄了IE6-IE7。對 IE8 支持但是界面效果不好,偏向用于開發(fā)響應式布局粗合、移動設備優(yōu)先的WEB 項目

4.x.x:最新版萍嬉,目前還不是很流行

2.4bootstrap基本使用

Bootstrap 使用四步曲:

  1. 創(chuàng)建文件夾結構

    [圖片上傳失敗...(image-db216e-1596527921884)]

  1. 創(chuàng)建 html 骨架結構

    <!DOCTYPE html>
    <html lang="zh-CN">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- 上述3個meta標簽*必須*放在最前面,任何其他內容都*必須*跟隨其后隙疚! -->
        <title>Bootstrap 101 Template</title>
    
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
        <h1>你好壤追,世界!</h1>
    
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
      </body>
    </html>
    
  1. 引入相關樣式文件

    <!-- Bootstrap 核心樣式-->
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    
  1. 書寫內容

    直接拿Bootstrap 預先定義好的樣式來使用bootstrap.css88.com

    修改Bootstrap 原來的樣式供屉,注意權重問題

    學好Bootstrap 的關鍵在于知道它定義了哪些樣式行冰,以及這些樣式能實現什么樣的效果

2.5 bootstrap布局容器

Bootstrap 為頁面內容和柵格系統包裹一個 .container (不能改樣式名字,框架中定義了)或者.container-fluid 容器伶丐,它提供了兩個作此用處的類

.container

  • 響應式布局的容器 固定寬度
  • 大屏 ( >=1200px) 寬度定為 1170px
  • 中屏 ( >=992px) 寬度定為 970px
  • 小屏 ( >=768px) 寬度定為 750px
  • 超小屏 (100%)

.container-fluid

  • 流式布局容器 百分百寬度
  • 占據全部視口(viewport)的容器悼做。

2.6 bootstrap柵格系統

1、介紹

Bootstrap提供了一套響應式哗魂、移動設備優(yōu)先的流式柵格系統肛走,隨著屏幕或視口(viewport)尺寸的增加,系統會將container自動分為最多12列

2录别、柵格選項參數

柵格系統通過一系列的行(row)與列(column)的組合來創(chuàng)建頁面布局朽色,內容就可以放入創(chuàng)建好的布局中

手機<768px 平板>=768px 中等屏幕>=992px 寬屏設備>=1200px
.container最大寬度 自動100% 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
列數 12 12 12 12
  • 按照不同屏幕劃分為1~12 等份
  • 行(row) 可以去除父容器作用15px的邊距
  • xs-extra small:超辛谕獭; sm-small:泻小抱冷; md-medium:中等; lg-large:大腾誉;
  • 列(column)大于 12徘层,多余的另起一行排列,少于12的空著
  • 每一列默認有左右15像素的 padding
  • 可以同時為一列指定多個設備的類名利职,class="col-md-4 col-sm-6"

3趣效、柵格嵌套

就是一個列內再分成若干份小列。我們可以通過添加一個新的 .row 元素和一系列 .col-sm-* 元素到已經存在的 .col-sm-*元素內

<!-- 列嵌套 -->
 <div class="col-sm-4">
 <!-- 行(row) 可以去除父容器作用15px的邊距 -->
    <div class="row">
         <div class="col-sm-6">小列</div>
         <div class="col-sm-6">小列</div>
    </div>
</div>

<!-- col-sm-4相當于width: 33.3%猪贪,如果一行三個col-sm-4跷敬,不能用margin撐開縫隙,因為最后的col-sm-4會另起一行 -->

4热押、列偏移

使用 .col-md-offset-* 類可以將列向右側偏移西傀。這些類實際是通過使用 * 選擇器為當前元素增加了左側的邊距(margin)。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

5桶癣、列排序

通過使用 .col-md-push-* 和 .col-md-pull-* 類就可以很容易的改變列(column)的順序拥褂,左拉右推

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">左側</div>
      <div class="col-lg-8 col-lg-pull-4">右側</div>
  </div>

6、響應式工具

利用媒體查詢功能牙寞,并使用這些工具類可以方便的針對不同設備饺鹃,展示或隱藏頁面內容

類名 xs超小屏 sm小屏 md中屏 lg大屏
.hidden-xs 隱藏 可見 可見 可見
.hidden-sm 可見 隱藏 可見 可見
.hidden-md 可見 可見 隱藏 可見
.hidden-lg 可見 可見 可見 隱藏

3. 阿里百秀案例制作

3.1 技術選型

方案:我們采取響應式頁面開發(fā)方案

技術:bootstrap框架

設計圖: 本設計圖采用 1280px 設計尺寸

3.2 屏幕劃分方法

中屏幕和大屏幕布局一樣,為列定義col-md-就可以了间雀,之后再為小屏和超小屏重新布局

container寬度修改

3.3項目結構搭建

Bootstrap 使用四步曲:

  1. 創(chuàng)建文件夾結構 images css bootstrap index.html

  2. 創(chuàng)建 html 骨架結構

    <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">
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <title>Document</title>
    </head>
    <body>
        <div class="container"></div>
    </body>
    
  3. 引入相關樣式文件

        <!-- 引入bootstrap 樣式文件 -->
        <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
        <!-- 引入我們自己的首頁樣式文件 -->
        <link rel="stylesheet" href="css/index.css">
    
  4. 書寫內容

因為本效果圖采取 1280的寬度悔详, 而Bootstrap 里面 container寬度 最大為 1170px,因此我們需要手動改下container寬度

 /* 利用媒體查詢修改 container寬度適合效果圖寬度  */
  @media (min-width: 1280px) { 
    .container { 
    width: 1280px; 
     } 
   }

bootstrap存在clearfix類清除浮動

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末惹挟,一起剝皮案震驚了整個濱河市茄螃,隨后出現的幾起案子,更是在濱河造成了極大的恐慌连锯,老刑警劉巖归苍,帶你破解...
    沈念sama閱讀 212,454評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現場離奇詭異运怖,居然都是意外死亡霜医,警方通過查閱死者的電腦和手機,發(fā)現死者居然都...
    沈念sama閱讀 90,553評論 3 385
  • 文/潘曉璐 我一進店門驳规,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人署海,你說我怎么就攤上這事吗购∫侥校” “怎么了?”我有些...
    開封第一講書人閱讀 157,921評論 0 348
  • 文/不壞的土叔 我叫張陵捻勉,是天一觀的道長镀梭。 經常有香客問我,道長踱启,這世上最難降的妖魔是什么报账? 我笑而不...
    開封第一講書人閱讀 56,648評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮埠偿,結果婚禮上透罢,老公的妹妹穿的比我還像新娘。我一直安慰自己冠蒋,他們只是感情好羽圃,可當我...
    茶點故事閱讀 65,770評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著抖剿,像睡著了一般朽寞。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上斩郎,一...
    開封第一講書人閱讀 49,950評論 1 291
  • 那天脑融,我揣著相機與錄音,去河邊找鬼缩宜。 笑死肘迎,一個胖子當著我的面吹牛,可吹牛的內容都是我干的脓恕。 我是一名探鬼主播膜宋,決...
    沈念sama閱讀 39,090評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼炼幔!你這毒婦竟也來了秋茫?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,817評論 0 268
  • 序言:老撾萬榮一對情侶失蹤乃秀,失蹤者是張志新(化名)和其女友劉穎肛著,沒想到半個月后,有當地人在樹林里發(fā)現了一具尸體跺讯,經...
    沈念sama閱讀 44,275評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡枢贿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,592評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現自己被綠了刀脏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片局荚。...
    茶點故事閱讀 38,724評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出耀态,到底是詐尸還是另有隱情轮傍,我是刑警寧澤,帶...
    沈念sama閱讀 34,409評論 4 333
  • 正文 年R本政府宣布首装,位于F島的核電站创夜,受9級特大地震影響,放射性物質發(fā)生泄漏仙逻。R本人自食惡果不足惜驰吓,卻給世界環(huán)境...
    茶點故事閱讀 40,052評論 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望系奉。 院中可真熱鬧檬贰,春花似錦、人聲如沸喜最。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,815評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瞬内。三九已至迷雪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間虫蝶,已是汗流浹背章咧。 一陣腳步聲響...
    開封第一講書人閱讀 32,043評論 1 266
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留能真,地道東北人赁严。 一個月前我還...
    沈念sama閱讀 46,503評論 2 361
  • 正文 我出身青樓,卻偏偏與公主長得像粉铐,于是被迫代替她去往敵國和親疼约。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,627評論 2 350