CSS基础

1. CSS盒模型

1.1 认识盒模型

盒模型是CSS布局的最基本组成部分，它指定元素如何显示及在某种方式上如何相互交互。页面上的元素都是以一个矩形的表现形式存在的，每个矩形是由元素内容，内补丁（padding），边框（border），外补丁（margin）组成的。内补丁（padding）无论有多大，元素内容（content）的整体大小(宽高)却不会增大。那么内补丁（padding），边框（border），外补丁（margin）之间的关系是什么呢？看下面我自己做的实例。
我先把内补丁（padding），边框（border），外补丁（margin）这三个属性值设为0px，不让它们在盒模型中出现。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
    width: 200px;
    height: 30px;
    padding: 0px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>
</head>
<body>
<div>我是Adolph，</div>
<div>我喜欢前端，</div>
<div>我是一位前端小白。</div>
</body>
</html>

就会出现这样的结果：


接下来我修改内补丁 （padding）的属性值，将其属性值改为30px，将会出现什么效果呢？

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 0px none;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

会发现文字内容的空间增大，但是背景色还混在一起。那么也就理解了，如果给一个元素加背景色或背景图片，那么添加的背景色或背景图片也会出现在内补丁（padding）中。为了防止这种视觉上的混淆，我又改了边框（border）的属性值，改为边框粗细为10px，边框颜色为红色的实线边框。代码如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 0;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：


这次能够用红色边框分开元素内容，但是两个div之间的边框还是重合的。那我就用外边框（margin）来改变效果，实现每个元素看起来独立的效果。改变外边框（margin）的属性值，改为50px。代码如下：

<style>
div{
    width: 200px;
    height: 30px;
    padding: 30px;
    border: 10px solid #9d0000;
    margin: 50px;
    color: #ffffff;
    background: #00bdbd;
}
</style>

效果如下：


通过以上的实验过程，不难发现如果给任何一个元素加入背景色或背景图片，都会在内补丁（padding）区域出现，为了避免这种视觉的混淆，就利用边框（border）和外补丁（margin）对元素的周围创建一个隔离带，使用该元素的背景色或背景图片可能与其他元素混淆。这就是内补丁（padding），边框（border），外补丁（margin）这三个属性出现在内容周围，产生一个盒模型的基本作用。

2. CSS常见块元素 内联元素 其他可变元素

根据CSS规范的规定，每一个网页都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它默认display属性值为“block”，成为“块级”元素；而span元素的默认display属性值为“inline”，为“内联”元素。
块级元素会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整这个矩形的样子；内联元素则没有自己的独立空间，它是依附其他块级元素存在的，因此，对内联元素设置高度、宽度、内外边距等属性，都是无效的。

  • 常见块元素：
    • address – 地址
    • blockquote – 块引用
    • center – 举中对齐块
    • dir – 目录列表
    • div – 常用块级容易，也是css layout的主要标签
    • dl – 定义列表
    • fieldset – form控制组
    • form – 交互表单
    • h1 – 大标题
    • h2 – 副标题
    • h3 – 3级标题
    • h4 – 4级标题
    • h5 – 5级标题
    • h6 – 6级标题
    • hr – 水平分隔线
    • isindex – input prompt
    • menu – 菜单列表
    • noframes – frames可选内容，（对于不支持frame的浏览器显示此区块内容
    • noscript – 可选脚本内容（对于不支持script的浏览器显示此内容）
    • ol – 排序表单
    • p – 段落
    • pre – 格式化文本
    • table – 表格
    • ul – 非排序列表
  • 常见内联元素：
    • a – 锚点
    • abbr – 缩写
    • acronym – 首字
    • b – 粗体(不推荐)
    • bdo – bidi override
    • big – 大字体
    • br – 换行
    • cite – 引用
    • code – 计算机代码(在引用源码的时候需要)
    • dfn – 定义字段
    • em – 强调
    • font – 字体设定(不推荐)
    • i – 斜体
    • img – 图片
    • input – 输入框
    • kbd – 定义键盘文
    • label – 表格标签
    • q – 短引用
    • s – 中划线(不推荐)
    • samp – 定义范例计算机代码
    • select – 项目选择
    • small – 小字体文本
    • span – 常用内联容器，定义文本内区块
    • strike – 中划线
    • strong – 粗体强调
    • sub – 下标
    • sup – 上标
    • textarea – 多行文本输入框
    • tt – 电传文本
    • u – 下划线
    • var – 定义变量
  • 其他可变元素：
    • applet – java applet
    • button – 按钮
    • del – 删除文本
    • iframe – inline frame
    • ins – 插入的文本
    • map – 图片区块(map)
    • object – object对象
    • script – 客户端脚本

2.1 块级元素和内联元素的转化

前面说过CSS规范的规定，每个网页都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值。为了方便直观的了解块元素和内联元素互相的转化，我用简单的代码来实现效果。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 200px;
    height: 100px;
    border: 10px solid #9d0000;
}
.a{
    width: 500px;
    height: 500px;
    border: 5px solid #A770EF;
}
</style>
</head>
<body>
<div class="div">我是AOLPH,我喜欢前端很久了。</div>
<span class="a">我是AOLPH,我喜欢前端很久了。</span>
</html>

出现的效果如下：


接下来改变width和height，会发生什么？代码和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 200px;
    border: 10px solid #9d0000;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
}
</style>

以上的实验可以发现，块级元素能够改变宽高，而内联元素不能改变宽高。那么怎么样互相转换呢？以下还是用代码实现效果。代码和效果如下：

<style>
*{
    margin: 0px;padding: 0px;
}
div{
    width: 500px;
    height: 100px;
    border: 10px solid #9d0000;
    display: block-inline;
}
.a{
    width: 200px;
    height: 100px;
    border: 5px solid #A770EF;
    display: inline-block;
}
</style>

效果如下:


3. 关于CSS Reset和Normalize.Css

对于CSS Reset应该说它很早就出现了，根据网上大牛的介绍第一份CSS Reset是Tantek的undohtml.css。然而它的出现是为了清除所有浏览器的默认样式。它出现的原因也是由于早期的浏览器支持和理解的CSS规范不同，导致渲染页面时效果不一致，会出现很多兼容性问题。所以Reset就很粗暴的改变了浏览器默认样式。
Normalize.Css是Rest的替代品。我就运用一下大牛们的解释：

Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS Reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

对于我这个小白来说，我就是一点一点在大牛们的博客上了解CSS Reset和Normalize.CSS。关于CSS Reset和Normalize.CSS这里有大牛的博客，地址如下：https://segmentfault.com/a/1190000003021766

4.CSS选择符

CSS的选择符的分类：通配符，类选择符，包含选择符，子选择符，相邻选择符，属性选择符，ID选择符。

4.1 通配选择符

通配选择符其实就是一个星号，一般是用来对页面所有元素应用样式。实现代码如下：

*{
    margin: 10px;
    padding: 10px;

}/*将页面中所有内外补丁设置为10*/

在特殊情况下,通配符对特元素的所有后代元素应用样式。例如，将页面中strong标签内span标签的文字颜色改为红色。代码如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
p{
    color: #A770EF;
}
</style>
<body>
<p>我是ADOLPHHAN,<strong><span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
</body>

4.2 类选择符

类指的就是将一段程序编写成一个类，需要的时候就拿来调用，也可以重复调用。它的出现就可以在一个页面中重复使用，减少样式定义。在CSS中也一样，可以将一段样式定义为一个类，在需要的位置直接调用。实例代码如下：

<style>
*{
    margin: 10px;
    padding: 10px;

}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
p{
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.3 包含选择符

包含选择符又称为后代选择器，该选择符类型是作用于某个元素中的子元素的。并且包含选择符不只限用两层标签元素。下面我用实例证明，代码和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
/*strong *{
    color: #9d0000;
}*//*将strong标签内的span标签颜色改为红色*/
p strong span{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷体;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.4 子选择符

子选择符也称为子对象选择符，主要定义子元素对象，无法定义子元素以外的对象。选择符与选择符之间是用“>”符号连接的，否则不算是选择符。下面用实例证明，代码和效果如下：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong *{
    color: #9d0000;
}/*将strong标签内的span标签颜色改为红色*/
body>strong{
    font-weight: bold;
    font-size: 30px;
    font-family: 楷体;
    text-decoration: underline;
    color: #00bdbd;
}
.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}/*定义一个类*/
</style>

4.5 相邻选择符

相邻选择符只是将">"换成了"+"，和子选择符相似。但是它有着自己独特的特性，和子选择符又有着很大的不同。相邻选择符是定义父级以下某个元素之后的元素，并且相邻选择符定义的样式只会是紧紧相邻的两个标签元素。那么相邻选择符与子选择符相似又有很大的不同在哪呢？我可以用实例证明，代码和效果如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
strong+strong+strong{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定义一个类*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我热爱这个行业...<span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
<strong>1、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>2、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>3、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>4、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>5、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
</body>

4.6 ID选择符

ID选择符是以"#"为前缀的，它与类选择符类似。但是要注意，一个页面中使用ID选择符建议不要出现同名的ID，因为ID在JavaScript等脚本语言中运用较多，出现同名的ID容易导致JavaScript等脚本语言的判断错误。
下面我用代码实现效果：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
/*strong *{
    color: #9d0000;
}*//*将strong标签内的span标签颜色改为红色*/
#contact{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
/*.b{
    font-family: AIGDT;
    font-size: 20px;
    font-weight: bold;
    color: #A770EF;
}*//*定义一个类*/
</style>
</head>
<body>
<p>我是ADOLPHHAN,<strong>我热爱这个行业...<span>我喜欢网页制作,</span></strong>我热爱这个行业</p>
<strong id="contact">1、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
<strong>2、我是ADOLPHHAN,我喜欢网页制作,我热爱这个行业</strong>
</body>

4.7 选择符的组合关系

选择符的组合方式主要有针对性使用类选择符或者ID选择符，选择符群组及选择符组合这3种方式。
针对性使用类选择符或者ID选择符不用多说，前面已经很详细。选择符群组就是将多个相同定义的选择符合并。下面我用代码实现效果：

<style>
*{
    margin: 10px;
    padding: 10px;
}/*将页面中所有内外补丁设置为10*/
p,.class, #contact{
    font-family: 宋体;
    font-size: 20px;
    font-weight: bold;
    text-decoration: underline;
    color: #dec800;
}
</style>

5.伪类与伪对象

5.1 伪类

伪类就是指定一个或者多个与其相关的选择符的状态，伪类的形式是：**选择符：伪类{属性：属性值}。代码和效果如下：

<style type="text/css">
input:hover{
    background-color: #9d0000;
}
</style>
<form method="post" action="">
<input type="text" value=""/> <input type="text" value=""/>
</form>

5.2 伪对象

伪对象是指HTML的文档指定的信息之外，创建了文档的额外信息。伪对象的形式为：选择符：伪对象{属性：属性值}。代码和效果如下：

<style>
p[id^='mycode']{
    color: red;
}
p[value='1']{
    color: green;
}
p[class='b']{
    color: blue;
}
.b:before{
    content:'我是一个兵，来自老百姓'
}
</style>
<body>
<p id="mycode111">代码是一种工具，亦是思想的体现。</p>
<p value="1">越是在写前对代码的 整体结构 和 需求 越有清晰的认识，写出的代码越就是 可维护性高、更健壮。</p>
<p class="b">，发现粒子较多的时候CPU占用很高，</p>

6. CSS的单位和颜色

6.1 CSS单位

关于CSS单位,我从网上了解到，国内的设计师喜欢用PX，而国外的设计师通常用EM，那么PX和EM的区别在哪里：

  • PX特点
    • IE无法调整那些使用px作为单位的字体大小；
    • 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位；
    • Firefox能够调整px和em，rem，但是96%以上的中国网民使用IE浏览器(或内核)。
    • px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。(引自CSS2.0手册)
    • em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
    • 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
  • EM特点
    • em的值并不是固定的；
    • em会继承父级元素的字体大小。
      所以我们在写CSS的时候，需要注意两点：
    • body选择器中声明Font-size=62.5%；
    • 将你的原来的px数值除以10，然后换上em作为单位；
    • 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
    • 也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

6.2 CSS颜色

CSS颜色大全：http://www.cnblogs.com/axing/archive/2011/04/09/CSS.html

  • 可以用以下方法来规定 CSS 中的颜色：
    • 十六进制色
    • RGB 颜色
    • RGBA 颜色
    • HSL 颜色
    • HSLA 颜色
    • 预定义/跨浏览器颜色名
  • 十六进制颜色
    所有浏览器都支持十六进制颜色值。
    十六进制颜色是这样规定的：#RRGGBB，其中的 RR（红色）、GG（绿色）、BB（蓝色）十六进制整数规定了颜色的成分。所有值必须介于 0 与 FF 之间。
  • RGB 颜色
    所有浏览器都支持 RGB 颜色值。
    RGB 颜色值是这样规定的：rgb(red, green, blue)。每个参数 (red、green 以及 blue) 定义颜色的强度，可以是介于 0 与 255 之间的整数，或者是百分比值（从 0% 到 100%）。
    举例说，rgb(0,0,255) 值显示为蓝色，这是因为 blue 参数被设置为最高值（255），而其他被设置为 0。
    同样地，下面的值定义了相同的颜色：rgb(0,0,255) 和 rgb(0%,0%,100%)。

7. CSS布局

7.1 CSS相对定位

如果将元素框设置为相对定位，那么设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
更为简单的理解就比如对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。实现效果和代码如下：

<style>
*{
  margin: 0px;padding: 0px;
}
.a{
  width: 200px;
  height: 200px;
  background-color: #9d0000;
  position:relative;
  top: 200px;
  left: 200px;
}
.b{
  width: 200px;
  height: 200px;
  background-color: #4cae4c;
}
</style>
7.2 CSS绝对定位

如果设置为绝对定位，那么设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。实现效果和代码如下：

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
</style>

7.3 固定定位

设置为固定定位的效果和代码如下:

<style>
*{
    margin: 0px;padding: 0px;
}
.a{
    width: 200px;
    height: 200px;
    background-color: #9d0000;
    position:absolute;
    top: 200px;
    left: 200px;
}
.b{
    width: 200px;
    height: 200px;
    background-color: #4cae4c;
}
.d{
    position:fixed;
    right:100px;
    bottom:100px;
    background:indigo;
    width:50px;
    height:50px;
}
</style>


固定定位可以随着窗口的缩放移动：

8. C/S和B/S的区别

  • C/S结构就是最早使用客户机和服务器的软件系统体系结构。
  • B/S结构是随着Internet技术的发展,对C/S结构的一种变化或者改进结构。它的用户界面是通过WWW浏览器实现的，主要的事物逻辑在服务器端实现。B/S结构主要利用了发展的WWW浏览器技术,结合了浏览器的多种语言(JS、Server、JAVA、PHP、C++、Nodejs、C#）和ActiveX技术。
    了解更多的区别，去看看大牛的博客：http://www.cnblogs.com/xiaoshuai/archive/2010/05/25/1743741.html
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,390评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,821评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,632评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,170评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,033评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,098评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,511评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,204评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,479评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2赞 335

推荐阅读更多精彩内容

  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,703评论 1赞 92
  • HTML+CSS基础（CSS篇下）
    CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,259评论 0赞 3
  • CSS基础
    CSS 是什么 css(Cascading Style Sheets)，层叠样式表，选择器{属性:值；属性：值}h...
    崔敏嫣阅读 1,461评论 0赞 5
  • HTML与CSS基础
    Html 标签 斜体 粗体 单独的样式 引用文本 长文本引用 换行 空格 分割线 地址信息 单行代码 多行代码 无...
    SunnySky_阅读 543评论 0赞 5
  • 我呢
    总是说，世界上没有两片相同的叶子，总是说每个人都是独一无二的个体是无可取代的，但是，怎么突然，觉得自己是那么渺小，...
    劳拉小姐阅读 277评论 0赞 1