CSS入门笔记 － 初识CSS


＊＊＊＊＊＊＊＊＊＊ 未经本人允许，严禁转载任何网站 ＊＊＊＊＊＊＊＊＊＊

引言

本人在慕课网学习HTML+CSS基础课程，记录一些文字，方便自己回忆，也希望对大家有所帮助

上次给大家带来了html部分的笔记，大家的反馈让我非常开心😄。

这次给大家带来css部分的第一篇笔记，由于本人比较蠢，学的很慢，而且css部分内容非常的细、广，需要不断code，才能体会其中细节，因此这次暂时只能带来本人已经整理好一部分，以供大家一同进步。

另外有一个求助，Atom中Toc插件生成页面，无法在Github或者简书中使用，希望有知道解决方法的高手，能够给予帮助

CSS入门笔记 － 初识CSS

1 - 认识CSS样式

CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等用于设置页面的表现。CSS3 并不是一个完整的独立版本而是将不同的功能拆分成独立模块（例如，选择器模块，盒模型模块），这有利于不同功能的及时更新与发布也利于浏览器厂商的实际使用。

2 - 为何使用CSS？

CSS帮助您将文档信息的内容 和如何展现它的细节相分离。众所周知，如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来，以便您能够：

  • 避免重复
  • 更容易维护
  • 为不同的目的，使用不同的样式而内容相同

例如:
您的网站可能有成千上万的页面外观相似。使用CSS，您可以将样式信息存储在公共的文件中以供所有的页面共用。

当用户显示页面时，用户的浏览器将样式信息和页面内容一同加载。

当用户打印页面时，您可以提供不同的样式信息，以便于打印出来的页面更易于阅读。

总之，在HTML中，您使用标记语言来描述文档的内容而不是它的样式。您可以使用CSS来指定它的样式而不是它的内容。

3 - CSS语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

选择器：指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成红色，而其他的元素（如ol）不会受到影响。

声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p {
    color:red;
    text-align:center;
}

CSS 注释
注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束, 实例如下:

/* p标签的样式 */
p {
    text-align:center; /* 文本居中 */
    color:black;
    font-family:arial;
}

4 - CSS样式引入

CSS样式可以写在哪些地方呢？从CSS 样式代码插入的形式来看基本可以分为以下3种：

  • 内联式css样式
  • 嵌入式CSS样式
  • 外部式CSS样式

4.1 - 内联式css样式

内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>
注意要写在元素的开始标签里，下面这种写法是错误的：
<p>这里文字是红色。</p style="color:red">
并且css样式代码要写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
<p style="color:red;font-size:12px">这里文字是红色。</p>

4.2 - 嵌入式css样式

嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：

<style type="text/css">
span {
    color:red;
}
</style>

嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。

4.3 - 外部式css样式

外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
<link href="base.css" rel="stylesheet" type="text/css" />

注意：

  1. css样式文件名称以有意义的英文字母命名，如 main.css.
  2. rel="stylesheet" type="text/css" 是固定写法不可修改。
  3. <link>标签位置一般写在<head>标签之内。

4.4 - 三种方法的优先级

内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面,<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）

5 － css选择器

什么是选择器？
每一条css样式声明（定义）由两部分组成，形式如下：

选择器{
    样式;
}

在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。比如右侧代码编辑器中第7行代码中的“body”就是选择器。

5.1 － 简单选择器

简单选择器可组合使用。

5.1.1 － 标签选择器

标签选择器其实就是html代码中的标签。如右侧代码编辑器中的<html>、<body>、<h1>、<p>、<img>。例如下面代码：

p{font-size:12px;line-height:1.6em;}

上面的css样式代码的作用：为p标签设置12px字号，行间距设置1.6em的样式。

5.1.2 － 类选择器

类选择器在css样式编码中是最常用到的
.className 以 . 开头，名称可包含字母，数字，-，_，但必须以字母开头。它区分大小写并可出现多次。
语法：
.类选器名称{css样式代码;}

注意：

  1. 英文圆点开头
  2. 其中类选器名称可以任意起名（但不要起中文噢）

使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
<span>胆小如鼠</span>
第二步：使用class="类选择器名称"为标签设置一个类，如下：
<span class="stress">胆小如鼠</span>
第三步：设置类选器css样式，如下：

/*类前面要加入一个英文圆点*/
.stress {
    color:red;
}

5.1.3 － ID选择器

#idName以 # 开头且只可出现一次，其命名要求于 .className 相同。在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：

  1. 为标签设置id="ID名称"，而不是class="类名称"。
  2. ID选择符的前面是井号（#）号，而不是英文圆点（.）。
  3. ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
  4. 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。

栗子：

<div>
  <p id="special">Sample Paragraph</p>
</div>

<style type="text/css">
  #special {
    color: red;
  }
</style>

5.1.4 － 通配符选择器

通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
* {color:red;}

5.1.5 － 属性选择器

对带有指定属性的 HTML 元素设置样式。
可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
注释：只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。

  • [attr] 或 [attr=val] 来选择相应的元素。#nav{...} 既等同于 [id=nav]{...}。IE7+
  • [attr~=val] 可选用与选择包含 val 属性值的元素，像class="title sports" 与 class="sports"。.sports{...} 既等同于 [class~=sports]{...} IE7+
  • [attr|=val] 可以选择val开头及开头紧接-的属性值。IE7+
  • [attr^=val] 可选择以val开头的属性值对应的元素，如果值为符号或空格则需要使用引号 ""。IE7+
  • [attr$=val] 可选择以val结尾的属性值对应的元素。IE7+
  • [attr*=val] 可选择以包含val属性值对应的元素。IE7+

下面的选择器，强烈建议写代码尝试，效果更加直观，或者查看w3school的属性选择器部分进行学习

1 属性选择器
下面的例子为带有 title 属性的所有元素设置样式：

[title] {
    color:red;
}

2 属性和值选择器
下面的例子为 title="MyBlog" 的所有元素设置样式：

[title=MyBlog] {
    border:5px solid blue;
}

3 属性和值选择器 - 多个值
下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值：

[title~=hello] {
    color:red;
}

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值：

[lang|=en] { color:red; }

4 设置表单的样式
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用：

input[type="text"]
{
  width:150px;
  display:block;
  margin-bottom:10px;
  background-color:yellow;
  font-family: Verdana, Arial;
}

input[type="button"]
{
  width:120px;
  margin-left:35px;
  display:block;
  font-family: Verdana, Arial;
}

5.1.6 － 伪类选择符

更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
a:hover{color:red;}
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入 鼠标滑过字体 颜色变为红色特效。
常用伪类选择器：

  • :link IE6+
  • :visited IE7+
  • :hover IE6中仅可用于链接
  • :active IE6/7中仅可用于链接
  • :enabled IE9+
  • :disabled IE9+
  • :checked IE9+
  • :first-child IE8+
  • :last-child IE9+
  • :nth-child(even) 可为 odd even 或数字 IE9+
  • :nth-last-child(n) n从 0 开始计算 IE9+
  • :only-child 仅选择唯一的元素 IE9+
  • :only-of-type IE9+
  • :first-of-type IE9+
  • :last-of-type IE9+
  • :nth-of-type(even) IE9+
  • :nth-last-of-type(2n) IE9+

不常用伪类选择器：

  • :empty 选中页面中无子元素的标签 IE9+
  • :root 选择 HTML 根标签 IE9+
  • :not() 参数为一般选择器 IE9+
  • :target 被锚点选中的目标元素 IE9+
  • :lang() 选中语言值为某类特殊值的元素 IE7+

注意：
element:nth-of-type(n) 指父元素下第 n 个 element 元素，element:nth-child(n) 指父元素下第 n 个元素且元素为 element，若不是，选择失败。具体细节请在使用时查找文档。

/* 伪类属性定义有顺序要求！ */
  a:link {
    color: gray;
  }
  a:visited {
    color:red;
  }
  a:hover {
    color: green;
    /* 鼠标悬停 */
  }
  a:active {
    color: orange;
    /* 鼠标点击 */
  }

5.2 － 其他选择器

5.2.1 - 组合选择器

  • 后代选择器 .main h2 {...}，使用 表示 IE6+
  • 子选择器 .main>h2 {...}，使用>表示 IE7+
  • 兄弟选择器 h2+p {...}，使用+表示 IE7+
  • h2~p {...}，使用~表示（此标签无需紧邻）IE7+

5.2.2 - 选择器分组

你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）

/* 下面两组样式声明效果一致 */
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}

h1, h2, h3 {color: red;}

6 - CSS中的继承、优先、层级

6.1 - 继承

CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。

p{color:red;}

<p>想当年，我是一个<span>强壮</span>的男人。</p>

输入上面代码，p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;

子元素继承父元素的样式，但并不是所有属性都是默认继承的。通过文档中的 inherited: yes 来判断属性是否可以自动继承。

自动继承属性：

  • color
  • font
  • text-align
  • list-style
  • ...

非继承属性：

  • background
  • border
  • position
  • ...

6.2 - 优先

有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：

p{color:red;}
.first{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。

CSS Specificity Calculator 可以在这里找到。更多关于 CSS 优先级别的信息可以在这里（英文）找到。

计算方法：

  • a = 行内样式
  • b = id 选择器的数量
  • c = 类、伪类的属性选择器的数量
  • d = 标签选择器和伪元素选择器的数量
    注意：从上到下优先级一次降低，且优先级高的样式会将优先级低的样式覆盖。大致公式（并不准确）如下。
    value = a * 1000 + b * 100 + c * 10 + d

例如下面的代码：

p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
a,#footer .note p{color:yellow;} /*权值为100+10+1+1=112*/

注意：还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。

改变优先级方法:

  • 改变样式声明先后顺序
  • 提升选择器优先级
  • !important（慎用）!important优先级样式是个例外，权值高于用户自己设置的样式。

6.3 - 层叠

我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有 相同权重值 怎么办？

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

如下面代码:

p{color:red;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>

最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

7 - CSS文本

7.1 - 字体

7.1.1 － 改变字号
font-size: <absolute-size> | <relative-size> | <length> | <percentage> | inherit
<absolute-size>有 small large medium
<relative-size>有 smaller larger
示范：

  font-size 12px
  p#sample0
    font-size 16px
  p#sample1
    font-size 2em
  p#sample2
    font-size 200%

以上两值在开发中并不常用。2em 与 200% 都为父元素默认大小的两倍（参照物为父元素的字体大小 12px）。

7.1.2 - 改变字体
font-family: [ <family-name> | <generic-family> ]
<generic-family>可选选项，但具体使用字体由浏览器决定

  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace

示范：
font-family: arial, Verdana, sans-serif;
注意：优先使用靠前的字体

通用字体系列
一直存在混乱的字体命名问题，实际上相同的字体可能有很多不同的称呼，不过 CSS 迈出了勇敢的一步，力图帮助用户代理把这种混乱状况理清楚。

我们所认为的“字体”可能有许多字体变形组成，分别用来描述粗体、斜体文本，等等。例如，你可能已经对字体 Times 很熟悉。不过，Times 实际上是多种变形的一个组合，包括 TimesRegular、TimesBold、TimesItalic、TimesOblique、TimesBoldItalic、TimesBoldOblique，等等。Times 的每种变形都是一个具体的字体风格（font face），而我们通常认为的 Times 是所有这些变形字体的一个组合。换句话说，Times 实际上是一个字体系列（font family），而不只是单个的字体，尽管我们大多数人都认为字体就是某一种字体。

除了各种特定字体系列外（如 Times、Verdana、Helvetica 或 Arial），CSS 还定义了 5 种通用字体系列：

  • Serif 字体
    这些字体成比例，而且有衬线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。例如，小写 i 和小写 m 的宽度就不同。
    衬线是每个字符笔划末端的装饰，比如小写 l 顶部和底部的短线，或大写 A 两条腿底部的短线 
Serif 字体的例子包括
- Times
- Georgia
- New Century Schoolbook
- ...
  • Sans-serif 字体
    这些字体是成比例的，而且没有上下短线，这种字体系列在计算机屏幕上更容易识读.
Sans-serif 字体的例子包括
- Helvetica
- Geneva
- Verdana
- Arial
- Univers
- ...
  • Monospace 字体
    Monospace 字体并不是成比例的。它们通常用于模拟打字机打出的文本、老式点阵打印机的输出，甚至更老式的视频显示终端。采用这些字体，每个字符的宽度都必须完全相同，所以小写的 i 和小写的 m 有相同的宽度。这些字体可能有上下短线，也可能没有。如果一个字体的字符宽度完全相同，则归类为 Monospace 字体，而不论是否有上下短线。
Monospace 字体的例子包括 :
- Courier
- Courier New
- Andale Mono
- ...
  • Cursive 字体
    这些字体试图模仿人的手写体。通常，它们主要由曲线和 Serif 字体中没有的笔划装饰组成。例如，大写 A 再其左腿底部可能有一个小弯，或者完全由花体部分和小的弯曲部分组成。
Cursive 字体的例子包括:
- Zapf Chancery
- Author
- Comic Sans
- ...
  • Fantasy 字体
    这些字体无法用任何特征来定义，只有一点是确定的，那就是我们无法很容易地将其规划到任何一种其他的字体系列当中。
这样的字体包括 :
- Western
- Woodblock
- Klingon
- ...

7.1.3 - 加粗字体
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
示范：

font-weight: normal;
font-weight: bold;

7.1.4 - 倾斜字体
font-style: normal | italic | oblique | inherit
italic 使用字体中的斜体，而 oblique 在没有斜体字体时强制倾斜字体。

7.1.5 - 更改行距
line-height: normal | <number> | <length> | <percentage>
normal 值为浏览器决定，在1.1至1.2之间（通常设置值为1.14左右）
示范：

/* length 类型 */
line-height: 40px;
line-height: 3em;
/* percentage 类型 */
line-height: 300%;
/* number 类型 */
line-height: 3;

注意：当line-height为 number 类型时，子类直接继承其数值（不计算直接继承）。 而当为 percentage 类型时，子类则会先计算再显示（先计算后继承）。

7.1.6 - 字间距（字母间距）
letter-spacing: normal | <length>
其用于设置字间距或者字母间距，此属性适用于中文或西文中的字母。 如果需要设置西文中词与词的间距或标签直接的距离则需要使用 word-spacing。word-spacing: normal | <length>

7.1.7 - 改变文字颜色
color: <color>
示范：

element { color: red; }
element { color: #f00; }
element { color: #ff0000; }
element { color: rgb(255,0,0); }
element { color: rgb(100%, 0%, 0%); }
element { color: hsl(0, 100%, 50%); }

/* 50% translucent */
element { color: rgba(255, 0, 0, 0.5); }
element { color: hsla(0, 100%, 50%, 0.5); }

/* 全透明 */
element { color: transparent' }
element { color: rgba(0, 0, 0, 0); }

7.2 - 对齐方式

7.2.1 - 文字居中

text-align: start | end | left | right | center | justify | match-parent | start end
注意：默认为文本左对齐。

7.2.2 - 文本垂直对齐
vertical-align: baseline | sub | super | text-top | text-bottom | middle | top | bottom | <percentage> | <length>
注意：<percentage>的参照物为line-height

7.2.3- 文本缩进
text-indent: <length> | <percentage> && [ hanging || each-line ]
注意：缩进两个字可使用 text-indent: 2em;

7.3 - 格式处理

7.3.1 - 保留空格格式
white-space: normal | pre | nowrap | pre-wrap | pre-line
注意：pre行为同 <pre> 一致。

New lines Spaces and tabs Text wrapping
normal Collapse Collapse Wrap
nowrap Collapse Collapse No wrap
pre Preserve Preserve No wrap
pre-wrap Preserve Preserve Wrap
pre-line Preserve Collapse Wrap

7.3.2 - 文字换行
word-wrap: normal | break-word
注意：允许长单词自动换行。
word-break: normal | break-all | keep-all
注意：break-all 单词中的任意字母间都可以换行。

7.4 - 文本装饰

7.4.1 - 文字阴影
text-shadow:none | <shadow-t>#或 text-shadow:none | [<length>{2,3}&&<color>?]#

p {
  text-shadow: 1px 1px 1px #000,
               3px 3px 5px blue;
}
  • value = The X-coordinate X 轴偏移像素
  • value = The Y-coordinate Y 轴偏移像素
  • value = The blur radius 阴影模糊半径
  • value = The color of the shadow 阴影颜色（默认为文字颜色）

7.4.2 - 文本装饰（下划线等）
text-decoration: <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'>

h1.under {
    text-decoration: underline;
}
h1.over {
    text-decoration: overline;
}
p.line {
    text-decoration: line-through;
}
p.blink {
    text-decoration: blink;
}
a.none {
    text-decoration: none;
}
p.underover {
    text-decoration: underline overline;
}

7.5 － 高级设置

7.5.1 - 省略字符
text-overflow: [ clip | ellipsis | <string> ]{1,2}

/* 常用配合 */
text-overflow: ellipsis;
overflow: hidden; /* 溢出截取 */
white-space: nowrap; /* 禁止换行 */

7.5.2 - 更换鼠标形状

cursor: [[<funciri>,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ]] | inherit+

常用属性
cursor: [<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]

  • <uri> 图片资源地址代替鼠标默认形状
  • <default> 默认光标
  • <none> 隐藏光标
  • <pointer> 手型光标
  • <zoom-in>
  • <zoom-out>
  • <move>

示范：

cursor: pointer;
cursor: url(image-name.cur), pointer;
/* 当 uri 失效时或者则会起作用 */

7.5.3 - 强制继承
inherit 会强制继承父元素的属性值。

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

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,630评论 1赞 92
  • DIV+CSS学习笔记总结篇
    转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    程序员poetry阅读 16,461评论 32赞 459
  • Html&CSS（二）
    本文主要是起笔记的作用，内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,551评论 0赞 30
  • 你们恋爱了这么久，为什么还是会分手？
    1.小兰是班上的班花，小武是校篮球队队长。他俩初中萌生情意，高中互赠真心，大学也一起牵手走过四年。是同学们口中的明...
    珍妮LEE阅读 619评论 0赞 1
  • 忽悠式、见解式和标准式
    2013-05-25 忽悠式、见解式和标准式 ——小城散漫表达系列之“各种式” 火山 社会人的存在无非有三种形式，...
    朱明云阅读 318评论 0赞 2