HTML5与CSS3的新属性

转自：http://www.cnblogs.com/star91/p/5659134.html

1.HTML5 新元素

HTML5提供了新的元素来创建更好的页面结构：

标签描述

<article>定义页面独立的内容区域。

<aside>定义页面的侧边栏内容。

<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。

<command>定义命令按钮，比如单选按钮、复选框或按钮

<details>用于描述文档或文档某个部分的细节

<dialog>定义对话框，比如提示框

<summary>标签包含 details 元素的标题

<figure>规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption>定义 <figure> 元素的标题

<footer>定义 section 或 document 的页脚。

<header>定义了文档的头部区域

<mark>定义带有记号的文本。

<meter>定义度量衡。仅用于已知最大和最小值的度量。

<nav>定义导航链接的部分。

<progress>定义任何类型的任务的进度。

<ruby>定义 ruby 注释（中文注音或字符）。

<rt>定义字符（中文注音或字符）的解释或发音。

<rp>在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

<section>定义文档中的节（section、区段）。

<time>定义日期或时间。

<wbr>规定在文本中的何处适合添加换行符。

2.HTML5 Canvas

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

<canvas>简单实例如下:

<canvasid="myCanvas"width="200"height="100"></canvas>

使用 JavaScript 来绘制图像

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script> 

3.HTML5 拖放

 拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<imgdraggable="true">

拖动什么 - ondragstart 和 setData()

放到何处 - ondragover

进行放置 - ondrop

4.HTML5 地理定位

 HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

<script>

var x=document.getElementById("demo");

function getLocation()

{

if(navigator.geolocation)

{

navigator.geolocation.getCurrentPosition(showPosition);

}

else{x.innerHTML="该浏览器不支持获取地理位置。";}

}

function showPosition(position)

{

x.innerHTML="Latitude: "+ position.coords.latitude +

"<br>Longitude: "+ position.coords.longitude;

}

</script>

5.HTML5  Audio(音频)、Video(视频)

 HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

<audiocontrols>

<sourcesrc="horse.ogg"type="audio/ogg">

<sourcesrc="horse.mp3"type="audio/mpeg">

您的浏览器不支持 audio 元素。

</audio>

 HTML5 规定了一种通过 video 元素来包含视频的标准方法。

<videowidth="320"height="240"controls>

<sourcesrc="movie.mp4"type="video/mp4">

<sourcesrc="movie.ogg"type="video/ogg">

您的浏览器不支持Video标签。

</video>

6.HTML5 Input 类型

 HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

<inputtype="range"name="points"min="1"max="10">

Search Google: <inputtype="search"name="googlesearch">

电话号码: <inputtype="tel"name="usrtel">

 

7.HTML5 表单元素

 HTML5 有以下新的表单元素:

标签描述

<datalist><input>标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

<keygen>><keygen> 标签规定用于表单的密钥对生成器字段。

<output><output> 标签定义不同类型的输出，比如脚本的输出。

 <datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<inputlist="browsers">

<datalistid="browsers">

<optionvalue="Internet Explorer">

<optionvalue="Firefox">

<optionvalue="Chrome">

<optionvalue="Opera">

<optionvalue="Safari">

</datalist>

 

8.HTML5 表单属性

 HTML5 的 <form> 和 <input>标签添加了几个新属性.

<form>新属性：

autocomplete、novalidate

<input>新属性：

autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step

 

9.HTML5 语义元素

 

 HTML5提供了新的语义元素来明确一个Web页面的不同部分:

<header>

<nav>

<section>

<article>

<aside>

<figcaption>

<figure>

<footer>

10.HTML5 Web 存储

 Web Storage DOM API 为Web应用提供了一个能够替代cookie的Javascript解决方案

sessionStorage—客户端数据存储，只能维持在当前会话范围内。

             sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

localStorage—客户端数据存储，能维持在多个会话范围内。

             localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。

对于大量复杂数据结构，一般使用IndexDB

 

11.HTML5 离线Web应用（应用程序缓存）

 HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。

应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们

速度 - 已缓存资源加载得更快

减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

HTML5 Cache Manifest 实例

下面的例子展示了带有 cache manifest 的 HTML 文档（供离线浏览）：

<!DOCTYPE HTML>

<htmlmanifest="demo.appcache">

<body>

The content of the document......

</body>

</html>

Manifest 文件

manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

manifest 文件可分为三个部分：

CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存

FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面

CACHE MANIFEST

# 2012-02-21 v1.0.0

/theme.css

/logo.gif

/main.js

NETWORK:

login.php

FALLBACK:

/html/ /offline.html

12.HTML5 Web Workers

 

 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）

 

13.HTML5 SSE

 Server-Sent 事件指的是网页自动获取来自服务器的更新。

以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。通过服务器发送事件，更新能够自动到达。

例子：Facebook/Twitter 更新、估价更新、新的博文、赛事结果等。

EventSource 对象用于接收服务器发送事件通知：

var source=newEventSource("demo_sse.php");

source.onmessage=function(event)

{

document.getElementById("result").innerHTML+=event.data +"<br>";

};

为了让上面的例子可以运行，您还需要能够发送数据更新的服务器（比如 PHP 和 ASP）。

<?php

header('Content-Type: text/event-stream');

header('Cache-Control: no-cache');

$time = date('r');

echo "data: The server time is: {$time}nn";

flush();

?>

 

14.HTML5 WebSocket

 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。

CSS3

CSS3选择器

选择器示例示例说明CSS

.class.intro选择所有class="intro"的元素1

#id#firstname选择所有id="firstname"的元素1

**选择所有元素2

elementp选择所有<p>元素1

element,elementdiv,p选择所有<div>元素和<p>元素1

element elementdiv p选择<div>元素内的所有<p>元素1

element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2

element+elementdiv+p选择所有紧接着<div>元素之后的<p>元素2

[attribute][target]选择所有带有target属性元素2

[attribute=value][target=-blank]选择所有使用target="-blank"的元素2

[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2

[attribute|=language][lang|=en]选择一个lang属性的起始值="EN"的所有元素2

:linka:link选择所有未访问链接1

:visiteda:visited选择所有访问过的链接1

:activea:active选择活动链接1

:hovera:hover选择鼠标在链接上面时1

:focusinput:focus选择具有焦点的输入元素2

:first-letterp:first-letter选择每一个<P>元素的第一个字母1

:first-linep:first-line选择每一个<P>元素的第一行1

:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2

:beforep:before在每个<p>元素之前插入内容2

:afterp:after在每个<p>元素之后插入内容2

:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2

element1~element2p~ul选择p元素之后的每一个ul元素3

[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3

[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3

[attribute*=value]a[src*="44lan"]选择每一个src属性的值包含子字符串"44lan"的元素3

:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3

:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3

:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3

:only-childp:only-child选择每个p元素是其父级的唯一子元素3

:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3

:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数3

:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3

:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素，从最后一个子项计数3

:last-childp:last-child选择每个p元素是其父级的最后一个子级。3

:root:root选择文档的根元素3

:emptyp:empty选择每个没有任何子级的p元素（包括文本节点）3

:target#news:target选择当前活动的#news元素（包含该锚名称的点击的URL）3

:enabledinput:enabled选择每一个已启用的输入元素3

:disabledinput:disabled选择每一个禁用的输入元素3

:checkedinput:checked选择每个选中的输入元素3

:not(selector):not(p)选择每个并非p元素的元素3

::selection::selection匹配元素中被用户选中或处于高亮状态的部分3

:out-of-range:out-of-range匹配值在指定区间之外的input元素3

:in-range:in-range匹配值在指定区间之内的input元素3

:read-write:read-write用于匹配可读及可写的元素3

:read-only:read-only用于匹配设置 "readonly"（只读） 属性的元素3

:optional:optional用于匹配可选的输入元素3

:required:required用于匹配设置了 "required" 属性的元素3

:valid:valid用于匹配输入值为合法的元素3

:invalid:invalid用于匹配输入值为非法的元素

 

CSS3 边框（Borders）

 用CSS3，你可以创建圆角边框，添加阴影框，并作为边界的形象而不使用设计程序

属性说明CSS

border-image设置所有边框图像的速记属性。3

border-radius一个用于设置所有四个边框- *-半径属性的速记属性3

box-shadow附加一个或多个下拉框的阴影3

div

{

border:2px solid;

border-radius:25px;

box-shadow:10px10px5px#888888;

border-image:url(border.png)3030 round;

}

CSS3 背景

 CSS3中包含几个新的背景属性，提供更大背景元素控制。

顺序描述CSS

background-clip规定背景的绘制区域。3

background-origin规定背景图片的定位区域。3

background-size规定背景图片的尺寸。3

div

{

background:url(img_flwr.gif);

background-repeat:no-repeat;

background-size:100%100%;

background-origin:content-box;

}

多背景

body

{

background-image:url(img_flwr.gif),url(img_tree.gif);

}

CSS3 渐变

CSS3 定义了两种类型的渐变（gradients）：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

background: linear-gradient(direction, color-stop1, color-stop2,...);

径向渐变（Radial Gradients）- 由它们的中心定义

background: radial-gradient(center, shape size, start-color,...,last-color);

CSS3 文本效果

 

属性描述CSS

hanging-punctuation规定标点字符是否位于线框之外。3

punctuation-trim规定是否对标点字符进行修剪。3

text-align-last设置如何对齐最后一行或紧挨着强制换行符之前的行。3

text-emphasis向元素的文本应用重点标记以及重点标记的前景色。3

text-justify规定当 text-align 设置为 "justify" 时所使用的对齐方法。3

text-outline规定文本的轮廓。3

text-overflow规定当文本溢出包含元素时发生的事情。3

text-shadow向文本添加阴影。3

text-wrap规定文本的换行规则。3

word-break规定非中日韩文本的换行规则。3

word-wrap允许对长的不可分割的单词进行分割并换行到下一行。3

 

CSS3 字体

 以前CSS3的版本，网页设计师不得不使用用户计算机上已经安装的字体。使用CSS3，网页设计师可以使用他/她喜欢的任何字体。当你发现您要使用的字体文件时，只需简单的将字体文件包含在网站中，它会自动下载给需要的用户。您所选择的字体在新的CSS3版本有关于@font-face规则描述。您"自己的"的字体是在 CSS3 @font-face 规则中定义的。

<style>

@font-face

{

font-family: myFirstFont;

src: url(sansation_light.woff);

}

div

{

font-family:myFirstFont;

}

</style>

CSS3 转换和变形

 

2D新转换属性

以下列出了所有的转换属性:

Property描述CSS

transform适用于2D或3D转换的元素3

transform-origin允许您更改转化元素位置

2D 转换方法

函数描述

matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。

translate(x,y)定义 2D 转换，沿着 X 和 Y 轴移动元素。

translateX(n)定义 2D 转换，沿着 X 轴移动元素。

translateY(n)定义 2D 转换，沿着 Y 轴移动元素。

scale(x,y)定义 2D 缩放转换，改变元素的宽度和高度。

scaleX(n)定义 2D 缩放转换，改变元素的宽度。

scaleY(n)定义 2D 缩放转换，改变元素的高度。

rotate(angle)定义 2D 旋转，在参数中规定角度。

skew(x-angle,y-angle)定义 2D 倾斜转换，沿着 X 和 Y 轴。

skewX(angle)定义 2D 倾斜转换，沿着 X 轴。

skewY(angle)定义 2D 倾斜转换，沿着 Y 轴。

 

3D转换属性

下表列出了所有的转换属性：

属性描述CSS

transform向元素应用 2D 或 3D 转换。3

transform-origin允许你改变被转换元素的位置。3

transform-style规定被嵌套元素如何在 3D 空间中显示。3

perspective规定 3D 元素的透视效果。3

perspective-origin规定 3D 元素的底部位置。3

backface-visibility定义元素在不面对屏幕时是否可见。3

3D 转换方法

函数描述

matrix3d(n,n,n,n,n,n,

n,n,n,n,n,n,n,n,n,n)

定义 3D 转换，使用 16 个值的 4x4 矩阵。

translate3d(x,y,z)定义 3D 转化。

translateX(x)定义 3D 转化，仅使用用于 X 轴的值。

translateY(y)定义 3D 转化，仅使用用于 Y 轴的值。

translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z)定义 3D 缩放转换。

scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)定义 3D 旋转。

rotateX(angle)定义沿 X 轴的 3D 旋转。

rotateY(angle)定义沿 Y 轴的 3D 旋转。

rotateZ(angle)定义沿 Z 轴的 3D 旋转。

perspective(n)定义 3D 转换元素的透视视图。

 

CSS3 过渡

 

过渡属性

下表列出了所有的过渡属性:

属性描述CSS

transition简写属性，用于在一个属性中设置四个过渡属性。3

transition-property规定应用过渡的 CSS 属性的名称。3

transition-duration定义过渡效果花费的时间。默认是 0。3

transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。3

transition-delay规定过渡效果何时开始。默认是 0。3

div

{

transition-property: width;

transition-duration:1s;

transition-timing-function: linear;

transition-delay:2s;

/* Safari */

-webkit-transition-property:width;

-webkit-transition-duration:1s;

-webkit-transition-timing-function:linear;

-webkit-transition-delay:2s;

}

 

CSS3 动画

 要创建CSS3动画，你需要了解@keyframes规则。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。

实例

当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变：

@keyframes myfirst

{

0%{background: red;}

25%{background: yellow;}

50%{background: blue;}

100%{background: green;}

}

下面的表格列出了 @keyframes 规则和所有动画属性：

属性描述CSS

@keyframes规定动画。3

animation所有动画属性的简写属性，除了 animation-play-state 属性。3

animation-name规定 @keyframes 动画的名称。3

animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3

animation-timing-function规定动画的速度曲线。默认是 "ease"。3

animation-delay规定动画何时开始。默认是 0。3

animation-iteration-count规定动画被播放的次数。默认是 1。3

animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal"。3

animation-play-state规定动画是否正在运行或暂停。默认是 "running"。3

 

div

{

animation-name: myfirst;

animation-duration:5s;

animation-timing-function: linear;

animation-delay:2s;

animation-iteration-count: infinite;

animation-direction: alternate;

animation-play-state: running;

/* Safari and Chrome: */

-webkit-animation-name: myfirst;

-webkit-animation-duration:5s;

-webkit-animation-timing-function: linear;

-webkit-animation-delay:2s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-direction: alternate;

-webkit-animation-play-state: running;

}

CSS3 多列

下表列出了所有 CSS3 的多列属性：

属性描述

column-count指定元素应该被分割的列数。

column-fill指定如何填充列

column-gap指定列与列之间的间隙

column-rule所有 column-rule-* 属性的简写

column-rule-color指定两列间边框的颜色

column-rule-style指定两列间边框的样式

column-rule-width指定两列间边框的厚度

column-span指定元素要跨越多少列

column-width指定列的宽度

columns设置 column-width 和 column-count 的简写

 

CSS3 盒模型

 在 CSS3 中, 增加了一些新的用户界面特性来调整元素尺寸，框尺寸和外边框，主要包括以下用户界面属性：

resize：none | both | horizontal | vertical | inherit

box-sizing: content-box | border-box | inherit

outline:outline-color outline-style outline-width outine-offset

resize属性指定一个元素是否应该由用户去调整大小。

box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容。

outline-offset 属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。

 

CSS3伸缩布局盒模型(弹性盒)

 CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

 下表列出了在弹性盒子中常用到的属性:

属性描述

display指定 HTML 元素盒子类型。

flex-direction指定了弹性容器中子元素的排列方式

justify-content设置弹性盒子元素在主轴（横轴）方向上的对齐方式。

align-items设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

flex-wrap设置弹性盒子的子元素超出父容器时是否换行。

align-content修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐

flex-flowflex-direction 和 flex-wrap 的简写

order设置弹性盒子的子元素排列顺序。

align-self在弹性子元素上使用。覆盖容器的 align-items 属性。

flex设置弹性盒子的子元素如何分配空间。

 

CSS3 多媒体查询

从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。

清单 1. 使用媒体类型

<linkrel="stylesheet"type="text/css"href="site.css"media="screen"/>

<linkrel="stylesheet"type="text/css"href="print.css"media="print"/>

清单 2. 媒体查询规则

@media all and(min-width:800px){...}

@media all 是媒体类型，也就是说，将此 CSS 应用于所有媒体类型。

(min-width:800px) 是包含媒体查询的表达式，如果浏览器的最小宽度为 800 像素，则会告诉浏览器只运用下列 CSS。

清单 3. and 条件

@media(min-width:800px)and(max-width:1200px)and(orientation:portrait){...}

清单 4. or 关键词

@media(min-width:800px)or(orientation:portrait){...}

清单 5. 使用 not

@media(not min-width:800px){...}

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

推荐阅读更多精彩内容

  • 江枫为何不娶邀月宫主？
    江枫为何不娶邀月宫主？ 这是幼年时看《绝代双骄》颇好奇和存疑的。 按门当户对的道理来讲，她是一个绝世美人，拥有绝顶...
    少叔夜阅读 8,267评论 0赞 1
  • 死在二十二的人
    最近老是在梦中见到一个人，然后她跟我讲故事。 她说，都说人在弥留之际才会想起一生中快乐的时光，我应该也快死了，因为...
    稻深阅读 298评论 0赞 0
  • 知识服务的未来（一）：学习的本质与特征
    缘起： 随着当下科技的迅猛发展，科技对现实生活的影响已经渗透进方方面面。人类迎来了一个信息大爆炸的时代，人人皆面临...
    伯尹阅读 1,510评论 0赞 5