CSS



Table of Contents generated with DocToc


CSS.png

1、CSS 的简介

1.1、什么是 CSS

CSS (Capcading Style Sheets 的缩写)，翻译为“层叠样式表”或者“级联样式表”，简称样式表。

1.2、CSS 的作用

它主要是用来给 HTML 网页来设置外观或者样式，包括文字的大小、颜色、字体，网页的背景颜色、背景图片

1.3、书写方式

19222327-202e973579e5a7c1.png
  • CSS 代码是由选择器和一对括号组成
  • 大括号里面是有一条一条的声明语句组成
  • 每一条语句都要使用英文状态下面的分号分割
  • 每一条语句是有“属性：值”组成
  • CSS 中的属性值一般不加引号
  • 在 CSS 中如果属性值为数值型数据的时候，一般情况下需要加单位，单位一般都是 px（像素）
  • 在 CSS 中不能出现 HTML 标签

1.3.1、嵌入式

<!DOCTYPE html>
<html>
<head>
    <title>嵌入式</title>
    <style type="text/css">
        .box {
            color: red
        }
    </style>
</head>
<body>
    <p class="box">嵌入式</p>
</body>
</html>
  • 将 CSS 代码嵌入到 HTML 文件中，嵌入式是通过 HTML 中的 style 标签将 CSS 代码嵌入到 HTML 网页中
  • 注意：style 它可以出现在 HTML 中的任何地方，但是一般情况我们只会将它放置在 head 标签里面

1.3.2、外链式

<!DOCTYPE html>
<html>
<head>
    <title>嵌入式</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
    <p class="box">嵌入式</p>
</body>
</html>
  • 外链式是指单独写一个以 .css 为扩展名的文件，然后在 head 标签中使用 link 标签，将这个 css 文件链接到 html 文件中。
  • 注意：CSS 文件不能单独的运行，它必须要依赖于 HTML 文件！
.box{
    color: red
}

1.3.3、行内式

<div style="width:100px;height: 100px;background-color:#fod"></div>
  • 将 CSS 代码书写在 HTML 标签的 style 属性中
  • style 是一个通用属性，每一个标签里面都拥有这个属性！

2、选择器

2.1、基本选择器

<style type="text/css">
    /* 通用选择器 */
    * {color: red}

    /* 标签选择器 */
    p {color: green}

    /* 类选择器 */
    p.h {color: blue}

    /* id选择器 */
    p#id {color: black}
</style>

2.2、复合选择器

2.2.1 多元素选择器

多元素选择器同时匹配选择器1和选择器2，多个选择器之间用逗号分隔

<style type="text/css">
  /* 多元素选择器 */
    div,p,h2,ul {color: red}
</style>

2.2.2 后代元素选择器

E F{属性：值}后代元素选择器 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔

  <title>后代选择器</title>
    <style type="text/css">
        /* 后代选择器 */
        .box h2{
            color: #f00
        }
    </style>

2.2.3 子元素选择器

E>F{属性：值；}子元素选择器 子元素选择器，匹配所有E元素的子元素F

子元素选择器 : 只匹配子元素，只匹配一级
后代元素选择器 :匹配后代元素，多级包扣子元素以及子元素的子元素

<style type="text/css">
    /* 子元素选择器 */
    .box>h2{
        color: #f00
    }
</style>

2.2.4 相邻元素选择器

E+F{属性：值；}相邻元素选择器 相邻元素选择器，匹配所有紧随E元素之后的同级元素F

  • 格式：E+F
  • 作用：要满足以下前提才会匹配：
    • 1.E 元素与 F 元素必须是兄弟关系
    • 2.E 元素与 F 元素必须紧挨着 之间没有元素阻挡
<style type="text/css">
    /* 子元素选择器 */
    .box + p{
        color: #f00
    }
</style>

2.3、伪类选择器

  • :link 正常状态 超级链接没有被访问
  • :visited 访问过后状态 超级链接已经被访问
  • :hover 鼠标放上状态 鼠标放在超级链接上面，但是并没有将鼠标的左键按下去
  • :active 鼠标左键已经按下去了，但是并没有将鼠标的左键弹出
  • :visited 访问过后状态 超级链接已经被访问
    注意：超级链接的不同状态是有顺序。也就是说伪类选择器设置是有顺序。如果不按照伪类选择器的顺序，那么样式就会失效。
    顺序：要遵守“爱恨准则”要先有爱，才有恨。“Love Hate”
<style type="text/css">
    :link{
        color: #F00
    }
    a:visited{
        color: #000
    }
    a:hover{
        color: gold
    }
    a:active{
        color: #0F0
    }
</style>

2.4、属性选择器

属性选择器是与标签的属性名和属性值有关,通过标签的属性名和属性值来匹配元素

2.4.1、[attr] 匹配特定的属性名的所有元素

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
        [align]{
            color: #F00
        }
    </style>

</head>
<body>
    <h2 align="center">标题</h2>
    <p align="left">内容</p>
</body>
</html>


<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
/* 先匹配 P标签然后再匹配align属性*/
        p[align]{
            color: #F00
        }
    </style>

</head>
<body>
    <h2 align="center">标题</h2>
    <p align="left">内容</p>
    <p>内容2</p>
</body>
</html>

2.4.2、[attr=val] 匹配属性等于指定值的所有元素

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
        [align =center]{
            color: #F00
        }
    </style>

</head>
<body>
    <h2 align="center">标题</h2>
    <p align="left">内容</p>
    <p>内容2</p>
</body>
</html>

2.4.3、[attr*="val"] 匹配属性中包含指定值的所有元素

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
        font[color*="FF"]{
            border: 1px solid #FF0000
        }
    </style>

</head>
<body>
    <font color="#FF0000">颜色</font>
    <font color="#FFAA00">颜色</font>
    <font color="#FFaabb">颜色</font>
    <font color="#aacc00">颜色</font>
    <font color="#ff0000">颜色</font>
    <font color="#FFaadd">颜色</font>
    <font color="#ddaabb">颜色</font>
</body>
</html>

2.4.4、[attr$="val"] 匹配属性的值以指定值结束的所有元素

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
        font[color$="00"]{
            border: 1px solid #FF0000
        }
    </style>

</head>
<body>
    <font color="#FF0000">颜色</font>
    <font color="#FFAA00">颜色</font>
    <font color="#FFaabb">颜色</font>
    <font color="#aaFF00">颜色</font>
    <font color="#ff0000">颜色</font>
    <font color="#FFaadd">颜色</font>
    <font color="#ddaabb">颜色</font>
</body>
</html>

2.4.5、[attr^="val"] 匹配属性以指定值开头的所有元素

 <title>属性选择器</title>
<style type="text/css">
     font[color^="#FF"]{
      border: 1px solid #FF0000
    }
</style>

2.5、伪元素选择器

  • :first-letter 操作当前元素中第一个字
  • :first-line 操作当前元素中第一行
  • :beforerw 在之前插入，在一一个盒子内部的最前面
  • :afterp 在之后插入，在一个盒子内部的最后面
.box::before{
/*如：要在当前元素的最前面插入文字必须将文字放上content中*/
Content：如“黑马程序员”;
}

3、属性

3.1、标签属性

3.1.1、尺寸属性

width(宽度) 、height(高度)
问：span 能够设置宽度、高度吗？
答：不可以，因为 span 标签是一个行内函数，它是不可以设置宽度和高度的，只有块级元素才可以设置宽度与高度，span 标签的宽度和高度只由它的内容决定

3.1.2、文本属性

属性名称 值 功能
color #ff0000
red
rgb(3,5,8)		 字体设置颜色
text-aligne left(居左)
right(居右)
center(居中）		 水平对齐的方向
text-decoration none(去掉文本修饰线)
underline(下划线)
overline(上划线)
line-through(删除线)		 文本修饰线
text-transforme capitalize
uppercase
lowercase		 大小写转换或者首字母大写
Line-height 固定值或百分比 行高 (行高与高度值一致垂直对齐)
text-indent px
em		 首行缩进，允许负值
letter-spacing px 字符间距
word-spacing px 单词间距

3.1.3、字体属性

属性名称 值 功能
font-stylee normal(正常)
italic(斜体)		 设置文本字体
font-weight normal(正常)
bolde (加粗)		 设置文字粗细
font-size 如12 px、14 px 给文本设置大小
font-family 微软雅黑、楷体、宋体.... 给文本设置字体，可以设置多个字体
font italic bold 14p 简写属性能够同时给文本设置斜体、加粗、大小、字体每一个值之间需要使用空格 并且一定要有顺序

关于字体：一般很特殊的字体 网站上面都是使用图片来表示。是否能够显示此字体是根据用户电脑里面是否有对应的字体文件，如果没有该文件就会显示为宋体。

3.1.4、列表样式属性

属性名称 值 功能
list-style-type none (将列表前面的项目符号去掉)
disc (实心园)
square (实心小方块)
circle (空心园)		 设置列表前项目符号的类型
list-style-position inside (在里面)
outside (在外面)		 设置列表项标记的放置位置
list-style-image url (图像路径) 将图象设置为列表项标记。
list-style square
inside
url(arrow.gif)		 在一个声明中设置所有列表属性

3.1.5、背景样式属性

属性名称 值 功能
background-color #ff0000 背景的颜色
background-image url(图像路径和名称) 背景图像
background-repeat repeat、repeat-x、repeat-y、no-repeat 背景图像重复 方式
background-position center center 或 x% y% 或 xpos ypos 背景图像起始位置
background-attachment scroll (滚动)、fixed (固定) 设置背景图像是否固定或者随着页面的其余部分滚动。
background url(1.ipga) no-repeat center center fixed 设器背景的简写形式

注意：

  • background-color: 用于给元素设置背景颜色但是前提这个元素要么有内容，要么有宽度和高度才可以。
  • background-position 三种方式可以混合使用
    • 英文表示 left right center top center bottom
    • 固定值 100px 100px 像素
    • 百分比10% 10%

3.2、属性的继承性

  • 1.外层元素身上的样式会被内层元素所继承
  • 2.如果内层元素与外层元素身上的演示相同时，外层元素的样式会被内层元素所覆盖
  • 3.并不是所有的样式都能被集成，只有字体样式的属性能够被集成

3.3、属性的优先级

行内样式> ID 选择器>类选择器>标签选择器
一般而言，选择器指向的越准确，优先级就会越高

  • 用1表示标签选择器的优先级
  • 用10来表示类选择器的优先级
  • 用100来表示 ID 选择器的优先级
  • 用1000来表示行内样式
div h2{       /*1+1 =2  */
color:     #ccc;
}

.d h2{      /*10+1 =11*/
coLor:  #000;
}

#dd h2{       /*100+1 =101*/
color:     #f00;
}

3.4、!important 属性

它主要是用来提升属性的权重。其属性的权重值无穷大

  • 1、!important 它是提升的属性的权重，而不是提升选择器的权重！
  • 2、!important 它不能提升继承过来的权重!
<!DOCTYPE html>
<html>
<head>
    <title>!important</title>
    <style type="text/css">
        p{
            color: #F00 !important
        }
        .p1{color: #000}
    </style>

</head>
<body>
    <p class="p1">!important</p>
</body>
</html>

3.5、一个标签携带多个类名

<标签名 class = ”值1 值2 值3”></标签名>

  • 1.减少 css 的代码量
  • 2.多个类名的样式会叠加到当前元素上面
  • 3.一个标签内有多个类名，它们设置的样式如果一样，那么就会存在样式冲突以 css 中的代码作为标准，谁写在后面就以谁作为标准，和 HTML 中的 class 属性值顺序没有关系

3.6、Display 属性

它是“显示”的意思，用来进行行内元素与块级元素之间的相互转换！将隐藏的元素显示或者将显示的元素进行隐藏。
Display 属性取值：inline (行内)、block (块级)、none (无)

  • 将一个行内元素的 display 属性值设置为 block 后，这个元素就会被转换为块级元素
  • 将一个块级元素的 display 属性设置 为 inline，这个元素就会从块级元素转换为行内元素
  • display: none (将一个显示的元素进行隐藏) 主要是js用
  • display: block (将一个隐藏的元素进行显示) 主要是js用

3.7、Border-radius 圆角矩形

/*border-radius:左上 右上 右下 左下; */
border-radius: 10px 20px 30px 40px;

border-radius: 20px; 左上角 右上角 右下角 左下角这个四角的值都20px

3.8、透明度 Rgba

Rgba（红色，绿色，蓝色，透明度）

  • a：表示透明度的意思 透明度取值：0~1之间 0表示完全透明、1表示不透明
    • 背景颜色透明 Background-color:rgba(255,255,255,0.3)
    • 文件颜色透明 color:rgba(255,255,255,0.3)

4、位置

在使用定位属性时,一定要配合定位的坐标来使用.

  • left: 表示定位的元素离左边多远
  • right: 表示定位的元素离右边多远。
  • top: 表示定位的元素离上边多远。
  • bottom: 表示定位的元素离下边多远
p.pos_fixed{
  position:fixed;
  top:30px;
  right:5px;
}

4.1、position:fixed ~ 固定定位

它是相对于浏览器窗口来进行定位。不管页面如何滚动，位置固定

  • 定位元素显示的位置不会改变
  • 固定定位元素它脱离了标准文档流
  • 固定定位元素的的层级比标准文档流里面的元素要高所以固定定位元素它会压盖住标准文档流里面的元素
  • 固定定位元素它不再占用空间。
  • 固定定位元素它显示的位置不会随着浏览器滚动而滚动

4.2、position:relative ~ 相对定位

相当于“自己”来定位

  • 相对定位元素它没有脱离标准文档流
  • 相对定位元素没有设置定位坐标，那么相对定位元素还在原来位置
  • 相对定位元素设置了定位坐标，就会在原位置留下一个空白元素
  • 相对定位元素会将标准文档流中的元素压盖住
  • 相对定位元素的定位值可以为负数

注意：相对定位元素会在原来位置留一块空白，一般很少单独使用，主要是用来配合“绝对定位”元素来使用

4.3、position:absolute ~ 绝对定位

绝对定位元素是相对于“祖先定位元素”来进行定位

什么是祖先定位元素?
绝对定位元素它会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性那么它就会相对于其父元素来进行定位;但是如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性,如果有设置就相对于其父元素的上一级元素进行定位，但是如果没有设置，那么会继续往向一级进行查找，如果其祖先元素都没有设置定位属性，那么它会相对于“浏览器窗口”来进行定位!

  • 绝对定位元素它脱离了标准文档流。
  • 绝对定位元素它不再占用空间。
  • 绝对定位元素它会压盖住标准文档流中的元素。
  • 绝对定位元素他会相对于其祖先定位元素来进行定位，这里的祖先定位元素可以是相对定位也可以是固定定位还可以是绝对定位，但是我们一般只会给其祖先定位元素设置相对定位属性“子绝父相”子元素设置绝对定位父元素设置相对定位

4.4、z-index ~ 层高

  • z-index 表示谁压盖着谁，数值大的会压盖住数值小的
  • 只有定位的元素才有 z-index 值 只有设置了固定定位、相对定位、绝对定位了的元素它们才会拥有 z-index
  • z-index 的值是没有单位的,值是一个正整数,默认的 z-index 的值是0
  • 如果定位元素没有设置 z-index 属性或者 z-index 值设置一样,那么写在 HTML 后面的定位前面的定位元素

5、标准文档

HTML 网页在制作的时候都得遵循一个“流的规则:从左至右、从上至下。
标准文档流注意事项：

  • 空白折叠现象


    19222327-30a3f752a778932b.png

让这些元素放在同一行，使这些元素紧密相连


19222327-dc520f23b22a0f4f.png
  • 高矮不齐，底部对齐

6、浮动

6.1、浮动

float:这个属性有两个值left(向左浮动)、right(向右浮动)
在标准文档流中的元素只有两种:块级元素和行内元素

6.1.1、行内元素和块级元素的区别

  • 行内元素不会占据整行，在一条直线上排列，都是同一行，水平方向排列；块级元素会占据一行，垂直方向排列。
  • 块级元素可以包含行内元素和块级元素；行内元素不能包含块级元素。
  • 行内元素与块级元素属性的不同，主要是盒模型属性上，行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

6.1.2、浮动的作用

能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度

6.1.3、浮动的特性

  • 浮动元素理解为“漂”，它会脱离标准文档流，不再占用空间了
  • 浮动元素它的层级要比标准文档流里面的元素层级要高，它会将标准文档流中的元素给压盖住
  • 浮动元素它遇到了父元素的边框然后就停止了浮动
  • 浮动元素它还会遇到上一个浮动元素后就停止了浮动
  • 浮动元素浮动以后 其父元素不会再包裹着浮动元素
  • 我们将行内元素进行浮动以后 那么这个行内元素它会变成块级元素

6.2、清除浮动

6.2.1、为什么要清除浮动

  • 经过浮动的元素，会影响到下面的元素的排版布局，浮动元素的父元素没有将浮动元素包裹着。
  • 清除了浮动不会影响到浮动元素的下面进行排版布局﹐浮动元素的父元素会将浮动元素从视觉上包裹着。

6.2.1、清除浮动方法

  • 给浮动元素的父元素设置一个固定的高度 （不建议使用，因为元素的高度不是固定吧，是由其内容填充决定的）

  • 使用清除浮动的样式属性 clear ：clear left ，clear right，clear both ，这个属性用在最后一个浮动的下面


    19222327-84789e80c352ea98.png

  • 使用 overflow:hidden 这个属性来清除浮动
    overflow 是一个属性 overflow:hidden 原意是用来将溢出的部分进行隐藏 还可以用于清除浮动 一般用于给列表清除浮动

Ul  li{

float: left;

border : 1px solid #fee;

}

</style>

</head>

<body>

<ul style="overfLow: hidden; ”>
<1i>栏目管理1</1i>
<li>栏目管理2</li>
<li>栏目管理3</li>
<li>栏目管理4</li>
<li>栏目管理5</li>
<li>栏目管理6</li>
<li>栏目管理7</li>
<li>栏目管理8</li>
<li>栏目管理9</li>
<li>栏目管理10</li>
</ul>

7、盒子模型

  • width: 指“宽度”的意思﹐但是这里的宽度指的盒子里面的内容的宽度―而不是盒子的宽刻
  • hegiht: 指“高度”的意思﹐但是这里的高度指的盒子里面的内容的高度而不是盒子的高度v
  • padding: 是“内填充”的意思，指的盒子里面的内容到盒子边框的距离
  • border:是“外边框”的意思指的盒子的边框
  • margin: 是“外边距”的意思指的是盒子与盒子之间的间距

7.1、padding

  • padding-top：上内填充
  • padding-right：右内填充
  • padding-bottom：下内填充
  • padding-left：左内填充
  • padding：这个属性是有方向的，同时表示4个方向，这个属性的方向是顺时针方向：上，右，下，左，这个顺序
  • padding:10px;表示上右下左这四个方向的外边距都是10像素。
  • padding:10px 20px;表示上下这两个方向的外边距为10像素︰左右两个方向的外边距为20像素。
  • padding:10px 20px 30px;表示上外边距为10像素左右外边距为20像素下外边距为30像素,
  • padding:10px 20px 30px 40p;表示上外边距为10像素右外边距为20像素下外边距为30像素左外边距为40像素

7.2、margin

7.2.1、margin 塌陷现象

  • 在标准的文档流中竖直方向的 margin 值不会叠加它会取较大的值
  • 横着方向是没有 margin 的塌陷现象
  • 浮动元素它是没有 margin 的塌陷现象的

7.2.2、margin 居中

Margin 的值可以是 auto，当左外边距与右外边距的值都是 auto 时，那么这个盒子就会水平居中

  • Margin-left：auto；/左外边距/
  • Margin-right：auto；/右外边距/
  • Margin-top：100px；/上外边距100像素/
  • Margin-bottom：100px；/下外边距100像素/
    注意点 :
  • 使用 margin 来实现水平居中时，一定要有固定的宽度（给这个盒子设置一个宽度）只有块元素可以实现水平居中，行内元素不能实现居中(如果这个元素没有设置固定的宽度，那么这个元素就会占据其父元素的100%宽度)
  • 只有标准文档流中的盒子才可以使用 margin 来实现水平居中
    比如：float：left；(像左浮动)这个用上 margin 就不可能居中
  • margin 属性是用来实现盒子的水平居中，而不是文本的水平居中
  • text-align 这个属性是用于实现文本的水平居中，值为 center 表示文本水平居中，不能实现盒子水平居中 text-align：center

7.2.3、善于使用父元素的 padding 而不使用子元素的

  • margin 属性本意用于来描述兄弟与兄弟元素之间的关系不是用于描述父子元素之间的关系
  • 描述父子元素的关系最好使用给其父元素设置 padding 属性。

7.3、border

边框有三个要素:粗细、线型、颜色,
border: 1px solid #f00
边框的颜色可以省略不写 但是如果不写的话就表式边框的颜色为黑色 其他的两个属性值不能不写 如果不写的话就不会显示边框


19222327-edd751306c65a273.png

7.3.1、Border-radius

/*border-radius:左上 右上 右下 左下; */
border-radius: 10px 20px 30px 40px;

border-radius: 20px; 左上角 右上角 右下角 左下角这个四角的值都20px

8、阴影

8.1 text-shadow 文本阴影

text-shadow:水平阴影 垂直阴影 模糊距离 阴影颜色。

  • 文字阴影可以有多组值，多组之间用逗号隔开就可以。
  • text-shadow: 3px 3px 3px #CD5C5C,3px 3px 3px #CD5C5C ;
  • 水平阴影正值阴影在右边，负值在左边。
  • 垂直阴影正值在下边，负值在上边。
  • 模糊强度，值越大越模糊。

8.2 Box-shadow 盒子阴影

选择器 功能
h-shadow 必须。水平阴影的位置。允许负值
v-shadow 必须。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影(outset)改为内部阴影

box-shadow: h-shadow v-shadow blur spread color inset;

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,734评论 6赞 505
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,931评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 164,133评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,532评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,585评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,462评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,262评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,153评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,587评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,792评论 3赞 336
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,919评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,635评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,237评论 3赞 329
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,855评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,983评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,048评论 3赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,864评论 2赞 354

推荐阅读更多精彩内容