前端学习笔记一-html+css

一、html

1.1 排版标签

标题：<h1></h1>~<h6></h6>
段落：<p></p>
换行：<br/>
水平线：<hr/>
<div></div>
<span></span>

1.2 文本格式化标签

加粗：<b></b> <strong></strong> (推荐使用strong，因为语义化)
斜体：<i></i> <em></em> (推荐使用em，原因同上)
删除线：<s></s> <del></del> (推荐使用del，原因同上)
下划线：<u></u> <ins></ins> (推荐使用ins，原因同上)

1.3 base标签

整体设置所有链接的打开模式 <base target='_blank'>
是写到<head></head>中的

1.4 预格式化文本标签

<pre>...</pre>：会直接按照我们书写的格式显示，保留空格和换行。用得很少。

1.5 特殊字符(记住常用的即可)

  空格
< <
> >
& &

1.6 表格table

cellspacing：单元格与单元格之间的空间距离（默认不是0）
cellpadding：每个单元格内容与它的边沿之前的距离
caption： <caption>表格标题</caption>表格标题放在table内部

<table border="1" cellpadding="5" cellspacing="0" width="400" align="center">
       <caption><h3>小说排行榜</h3></caption>
       <tr>
           <td>11</td>
           <td>22</td>
       </tr>
</table>

单元格合并：
- 合并顺序：从上往下，从左至右
- 跨行合并：rowspan="合并的单元格的格子"
- 跨列合并：colspan="合并的列的个数"
- 合并三步曲：
  1. 先确定是跨行还是跨列合并
  2. 找到目标单元格（要被合并的第一个）并写上相应的合并方式属性、合并单元格数量值
  3. 删除多余的单元格
- 表格结构划分
  1.<thead></thead>：用于定义表格得头部，内部必须有tr标签
  2.<tbody></tbody>：用于定义表格的主体，数据本体
  3.<tfoot></tfoot>：脚注之类，用得很少

1.7 列表

自定义列表，虽然dt和dd是并列结构，但dd是围绕dt的，属于它上面的dt类。一个dt可能对应多个dd

<dl>
    <dt>名词1</dt>
    <dd>名词1解释a</dd>
    <dt>名词2</dt>
    <dd>名词2解释a</dd>
    <dd>名词2解释b</dd>
</dl>

1.8 表单

按钮：
1.<input type="button" value="按钮"/>：普通按钮，必须有value值才有文字显示，否则显示空白按钮
2.<input type="submit"/>：提交按钮，默认文字是【提交】
3.<input type="reset" value="修改默认名称"/>：重置按钮，默认文字是【重置】
4.<input type="image" src="images/xx.jpg"/>：图片按钮，必须有src属性
5.<input type="file"/>：文件域，用途是上传文件
label标签：
1.作用：点击label标签的时候，和它绑定的input获得焦点。
2.如何绑定：
- 方法一：用<label>用户名：<input type="text" value=""/></label>
- 方法二： <label for="name">用户名：</label><input type="text" value="" id="name"/>
form表单域：
<form action="提交url地址" method="提交方式" name="表单名称"></form>

<form action="data.php" method="get" name="loginForm">
    <input type="text" name="user"/>
    <input type="password" name="psw"/>
    <input type="submit"/>//点击后会执行提交（把表单form中已输入的数据以method的提交方式提交到action的地址），然后清空表单
    <input type="reset"/>   //点击后会清空表单
</form>

二、css

2.1 内部样式表

规范写法是放在</head>中的最后，<style type="text/css"></style>
在html5中，type="text/css"可以省略

2.2 外部样式表（外链式）

标准格式： <link rel="stylesheet" type="text/css" href="style.css" />
也是放在<head>中，rel="stylesheet"是指它和当前页面的关系是用来定义该页样式的层叠样式表，而在html5中，type="text/css"同样可以省略

2.3 尽量不使用无具体语义的标签选择器

如<div> <span>(一般只是容器，不像p有表示段落的意义，li表示列表的子项)

2.4 长度单位

- 相对长度单位：

px：像素，最常用
em：其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）
rem：参考对象为根元素<html>的font-size
- 绝对长度单位：pt（点）

2.5 font-famliy设置中文字体时使用Unicode编码更甚于英文名称，兼容性更好

2.6 font-weight

值400等于normal，700等于bold

2.7 font综和性写法

font: font-style font-weight font-size/line-height font-family;
举例：
font: normal 400 12px/26px "微软雅黑"
必须有font-size（字号）和font-family（字体）属性值，其他可以省略
font: 14px "微软雅黑"

2.8 颜色十六进制

#rrggbb：按顺序前两位、中间两位、最后两位分别表示红绿蓝，范围是00～FF，最浅到最深，混合出来的颜色，因此#FF0000表示纯红色（红色100%）
三个区域内的两个值两两相同的话就可以只简写以为，如上面的红色可以写成#F00

2.9 颜色RGB代码

color:rgb(red,green,blue)：取值范围是255～0 相当于100%～0% （最大值～最小值）
rgb(255,0,0)等于rgb(100%,0%,0%)等于#FF0000

2.10 行间距

行高测量

line1.png

line2.png

行高默认是文字本身的高度，设置成文字加上上下边距等于盒子高度的话就能使得文字垂直居中。

属性值单位px和em用得比较多。一般比字号大7、8像素比较合适
比如字号16px，line-height: 24px

2.11 装饰线text-decoration

属性值有：

none：取消下划线（最常用）
underline：下划线（常用）
line-through：贯穿线，穿过文本
overline：上划线

2.12 emmer语法小技巧

生成标签：输入标签名回车即可（一边编辑器自带该功能/插件并且会提示）
具体类型加:，如input:s会自动生成<input type="submit" value="">
生成多个可以加上*数量，如：div*4 => 4个<div></div>
父子级关系 ul>li
兄弟关系 div+p
可以连写 dl>dt+dd=><dl> <dt></dt> <dd></dd> </dl>
ul>li*2=><ul> <li></li> <li></li> </ul>
生成带类名或id名的div .demo => <div class="demo"></div>
#demo => <div id="demo"></div>
p.demo => <p class="demo"></p>
如果生成的div类名是有顺序的，可以用自增符号$
demo$*3=><div class="demo1"></div><div class="demo2"></div><div class="demo3"></div>
非常利于提升效率和格式标准化，因此推荐使用

2.13 复合选择器

后代选择器 父级子级 { } 只要发生了嵌套，内层的标签就属于外层的子级别，符合条件的子级都会起作用
子元素选择器（直接后代）父级>子级 { } 下一级即直接后代元素才起作用
交集选择器 标签选择器.类名选择器 如p.demo { } 即符合是p标签又符合有类名.demo，即类名为demo的p标签元素会起作用
并集选择器 选择器1,选择器2,选择器3... { } 集体声明
链接伪类选择器 :就是伪类选择器。
a:link a:visited a:hover a:active 尽量按照这样的顺序
但实际开发中，很少写全，一般都是写默认的和:hover a{ } a:hover{ }

2.14 标签显示模式

块级元素（block-level）：独占一行，可以控制宽高、内边距和外边距，宽度默认是100%。是一个容器及盒子，（容器级）里面可以放行内元素和块级元素。

注意：h、p、dt标签内不能放块级元素，它们都是文字类块级标签*

行内元素（inline-level）：宽高直接设置是无效的；默认宽度是它本身内容的宽度；只能容纳文本或者其他行内元素
行内块元素（inline-block）：<img/> <input/> <td>，可以设置它们的宽高和对齐属性；和相邻行内元素（或行内块元素）在一行上，但它们之间会有缝隙；默认宽度是它本身内容的宽度；宽高、行高、内边距和外边距都可以控制。
父级设置text-align:center可以使行内元素、块级行内元素以及文字水平居中

2.15 background

background-image:url(images/pic.jpg) 推荐背景图片url内不要加" "
同时写的情况，background-image优先级高于background-color，即背景色叠在图片层的下面，不平铺的情况能看见背景色
background-positon: x坐标 y坐标;坐标值可以是是方位名词（top/right/bottom/left）或者精确单位(百分比或绝对单位如px)。如果两个值都是方位名词，则两者顺序不重要，但还是推荐先x后y的写法，如'right center'。如果只指定了一个方位名词，如background-positon: left;，那另一个就默认center。
如果两个值是精确单位，那第一个就是距离盒子最左边（x轴起始位置）的距离，第二个就是距离盒子最上面（y轴起始位置）的距离。如果只指定了第一个值，第二个就代表垂直居中。
如果两个值是精确单位和方位名词混用，第一个一定是表示x（水平位置），第二个一定是y（纵向位置）。如10px center
一般超大背景图的做法：

body{
    height:3000px;
    overflow:auto;
    background-image:url(images/bg.jpg);
    background-repeat:no-repeat;
    background-positon:center top;
    background-attachment: fixed;
}

背景附着：背景是固定的还是滚动的
background-attachment: scroll || fixed 默认是滚动的，设置成fixed适用于背景图不随容器对象内容滚动的场景，如上例
背景简写：background:color url repeat attachment position
举例：background:#ccc url(images/bg.jpg) no-repeat fixed center top;
没有强制的顺序和必须写的属性值，很多都可以省略，但出于可读性推荐以上顺序。

2.16 CSS三大特性

层叠性
样式冲突，就近原则。那个样式离结构更近，就执行哪个样式。
继承性
子标签会继承父标签的部分样式：text- font- line-开头的，以及color属性
优先级（权重）
如果选择器相同，执行层叠性
如果选择器不同，就按权重来执行

1.权重计算公式（权重排行从小到大）
| 标签选择器 | 计算权重公式 |

| 继承或者 * | 0,0,0,0 |
| 每个元素（标签选择器） | 0,0,0,1 |
| 每个类，伪类 | 0,0,1,0 |
| 每个ID | 0,1,0,0 |
| 每个行内样式 style="" | 1,0,0,0 |
| 每个!important 重要的 | ∞ 无穷大 |

2.权重叠加
即把所有基础选择器的权重叠加起来，才得出最终的权重
- div ul li ------> 0,0,0,3
- .nav ul li ------> 0,0,1,2
- a:hover -----—> 0,0,1,1
- .nav a ------> 0,0,1,1
  注意：数位之间没有进制比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0，所以不会存在10个div能赶上一个类选择器的情况。
  如果权重相同，执行就近原则

2.17 CSS盒子模型（Box Model）

表格边框
border-collapse: collapse：合并相邻边框
table,th,td{ border-collapse:collapse }
内边距
没有指定宽度（width）的情况，盒子不会被加上的padding撑开而变大，实际宽度仍然和父级一样宽
外边距
(1)相邻外边距塌陷：如果两个相邻的盒子上面的盒子有下外边距，下面的盒子有上外边距，它们两个的垂直外间距是这两个间距的较大那个值，而不是两者之和。
解决方案：尽量只给上面的盒子添加下外边距或者下面的添加上外间距，不要都加。
(2)嵌套外边距塌陷：如果父级盒子没有上内边距（padding-top）及边框，给子元素设定了上外边距的话，父级的上外边距会和子级盒子的这个外边距产生合并成两者中的较大者(即合并成父级盒子的上外边距，子级上外边距为0)。
解决方案：给父级盒子添加overflow: hidden;

但是如果子级盒子有设置浮动的话，就不会产生嵌套外边距塌陷

盒子模型布局稳定性
优先使用顺序：width > padding > margin
圆角边框（css3）border-radius：半圆形边框只要取盒子的一半

2.18 photoshop使用小技巧

crtl + R ：打开标尺
crtl + + ：放大图片
按住空格键，可以拖动视图
crtl + D ：取消选区
选中图层---图层菜单---新建基于图层的切片

2.19 CSS书写规范

/*选择器后加一个空格*/
.selecter {
    width: 200px;/*属性名后加一个空格*/
    height: 100px;/*属性定义都另起一行，不要写在一行*/
}
/*并集选择器独占一行*/
.selecter,
goods,
page {
}
/*选择器的嵌套不要大于三级*/

2.20 浮动float-浮漏特口诀

为什么块级元素排版需要浮动而不是转化成行内块级元素，因为inline-block的元素之间会有很难去掉和无法改变尺寸的间隔缝隙，而且只能左对齐。
浮动之浮-漂浮在普通流（标准流）的上面（脱标）

浮动脱标
浮动之漏-把自己原来的位置腾给下面标准流的盒子
浮动之特-改变display属性，类似转成了互相之间没有缝隙的行内块（inline-block）

重要的导航栏都要采取li包含a的结构，不然搜索引擎会觉得有堆砌关键字的问题，从而影响网站排名

子级设置了浮动，如果父级盒子有内边距或边框，那么子级不会与父级的边框重叠，也不会压过父级的内边距

父子盒子关系示意图.png

-清除浮动的方法：
（1）额外标签法：在父级内最后一个浮动元素后面添加一个<div style="clear: both;"></div>。缺点是添加额外的标签，结构化差。
（2）父级添加overflow: hidden。缺点是有局限性，会把原本需要溢出显示的元素隐藏掉。
（3）使用:after伪元素，给浮动元素的父级盒子加上我们预先定义好的clearfix类

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {/*ie6\7专属*/
    *zoom: 1;
}

（4）使用双伪元素：同样给浮动元素的父级盒子加上我们预先定义好的clearfix类

.clearfix:before,.clearfix:after { 
    content: "";
    display: table; 
}
.clearfix:after {
   clear: both;
}
.clearfix {
    *zoom: 1;
}

优点：相较伪元素代码更简洁

切图插件：Cutterman

2.21 CSS书写顺序

建议遵循以下顺序：
-布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
-自身属性：width / height / margin / padding / border / background
-文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-其他属性：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

2.22 定位（position）

三种布局机制的上下顺序：
标准流在最底层（海底）----浮动盒子在中间层（海面）----定位盒子上最上层（天空）
定位 = 定位模式 + 边偏移（方位名词属性）
边偏移常用属性值：

相对定位relative：相对于它原来在标准流的位置来说的（自恋型）
效果图：

相对定位案例

相对定位的特点：（务必记住）
（1）相对于自己原来在标准流中位置来移动的
（2）原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
绝对定位absolute：是元素以带有定位的父级元素来移动位置（拼爹型）
（1）完全脱标 —— 完全不占位置；
（2）父元素没有定位，则以浏览器为准定位（Document 文档）。

绝对定位_父级无定位

（3）父元素要有定位：将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先，即未必需要是直接父元素）进行定位。

绝对定位_父级有定位

绝对定位的特点：（务必记住）
（1）绝对是以带有定位的父级元素来移动位置（拼爹型）如果父级都没有定位，则以浏览器文档为准移动位置
（2）不保留原来的位置，完全是脱标的。
绝对定位的盒子要和父级搭配一起来使用。

定位口诀 —— 子绝父相 —— 子级是绝对定位，父级要用相对定位。

结论：父级要占有位置，子级要任意摆放，这就是子绝父相的由来。

固定定位fixed：固定定位是绝对定位的一种特殊形式：（认死理型）
（1） 完全脱标 —— 完全不占位置；
（2）只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
- 跟父元素没有任何关系；单独使用
- 不随滚动条滚动。
堆叠顺序（z-index）

加了定位的盒子，默认后来者居上，后面的盒子会压住前面的盒子。
应用 z-index 层叠等级属性可以调整盒子的堆叠顺序。

z-index 的特性如下：
（1） 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
（2）如果属性值相同，则按照书写顺序，后来居上；

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

定位改变display属性

display 是显示模式，可以改变显示模式有以下方式:

可以用inline-block 转换为行内块
可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以，一个行内的盒子，如果设置了浮动/固定定位/绝对定位，那么不用转换，就可以给这个盒子直接设置宽度和高度等。另外行内块元素的默认宽度就是内容宽度，没有内容就无法显示。

浮动元素、绝对定位(固定定位）元素的都不会触发外边距合并的问题。（我们以前是用padding border overflow解决的）

2.23 圆角矩形设置4个角

圆角矩形可以为4个角分别设置圆度，但是是有顺序的，border后面的属性名记住先写上下，再写左右，然后从左上角开始顺时针按顺序来写，养成习惯

border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;

我们也可以按照简写的形式，然后从左上角开始顺时针分别写每个角的数值，具体如下:

border-radius: 左上角 右上角 右下角 左下角;

实现贴合版心的固定定位的一个小技巧:

dingwei.png

2.24 隐藏和显示元素使用display和visibility的区别

display
属性值：block | none
隐藏状态不保留位置，使用较多
visibility
属性值：visible | hidden
隐藏状态保留位置，使用较少

2.25 用户界面样式

鼠标样式cursor
move : 移动（常应用于放大镜特效）
text : 文本（表示可输入）
not-allowed : 禁止（表示不能再点击）
轮廓线outline
元素外围的一圈轮廓，一般表单元素获得焦点时会显示出来，起到突出元素的作用。但是实际开发中由于体验并不好，我们一般会把这个样式去掉。
outline: 0或outline: none
一般都会如下加在公共统一样式中

input, textarea {
    outline: none;
}

防止拖拽
resize: none 防止用户拖拽文本域（textarea）

2.25 vertical-align 垂直对齐

属性值有: baseline(默认) | middle | top | bottom
只针对行内元素或行内块元素，在块级元素如div内设置无效。通常（特别是行内块元素）用来控制图片/表单与文字的对齐。

默认基线对齐

<div><!--默认是基线对准-->
    <img src="xxx.png" alt="" style="vertical-align: baseline"/>
    我是文字
</div>
<div><!--中线对准最常用-->
    <input type="text" style="vertical-align: middle"/>
    我是文字
</div>

由于图片默认是基线对齐，放在盒子中会撑开盒子底部（给基线之外的文字预留空间），因此用vertical-align可以解决这个bug（方案一，常用）。或者让图片转为块级元素也可以解决 img {display: blockl}（方案二）

2.26 文字溢出省略号显示（三步曲）

（1）先强制文本一行显示white-space: nowrap;
（2）超出的部分隐藏overflow: hidden;
（3）用省略号代替超出的部分文字text-overflow: ellipsis;

2.27 CSS精灵技术（sprite）

为了有效减少服务器接收和发送请求的次数，提高页面的加载速度
写背景position样式时建议用Fireworks工具，比PS方便

2.28 CSS滑动门技术

特殊形状的背景图能够自由拉伸滑动，以适应元素内部不固定宽度的文本内容
一般经典布局

<li>
    <a href="#">/*a设置左侧背景*/
        <span></span>/*span设置左侧背景*/
    </a>
</li>

a {
    /*因为我们是滑动门，左右推拉跟文字内容多少有关系，此时需要用文字撑开盒子， 就要用到行内块*/
    display: inline-block;
    height: 33px;
    background: url(images/to.png) no-repeat;
    margin: 10px 20px;
    padding-left: 15px;
    color: #fff;
}
a span {
     display: inline-block;
     height: 33px;
     /*一定注意 span 需要背景图片 右对齐*/
     background: url(images/to.png) no-repeat right;
     padding-right: 15px;
}

2.29 margin 负值

消除相邻盒子的边框叠加

div li{//淘宝做法，浮动的盒子紧贴在一起，前面的盒子往左移1px，后面的盒子也会移贴近它然后再左移1px
    float: left;
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #ccc
}
div li:hover {
    position: relative;//定位的盒子层级默认是在标准流和浮动层上面的，所以因为margin是负值，li的边框原本是会被后面一个li的边框挡住（右边的那条），但给鼠标移上那个层加上定位后它就变成最上显示了
    border: 1px solid #F00;
    //如果li本身就有定位属性，那么给鼠标经过的CSS加上z-index就可以了
    /*z-index: 1;*/
}

2.30 CSS 三角形

如果一个盒子宽高都是0，那给单边边框颜色就可以模拟三角形效果

p {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px;
    boder-color: #F40 transparent transparent transparent;
    /*以下样式照顾低版本浏览器*/
    font-size: 0;
    line-height: 0;
}

最后编辑于：2020.03.09 20:04:08

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