CSS

# CSS

## 概述

- CSS 指层叠样式表 (*C*ascading *S*tyle *S*heets)

- 样式定义*如何显示* HTML 元素

- 样式通常存储在*样式表*中

- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

- *外部样式表*可以极大提高工作效率

- 外部样式表通常存储在 *CSS 文件*中

- 多个样式定义可*层叠*为一

## CSS样式

### 行内样式

应用内嵌样式到各个网页元素

```HTML

<p style="background: red">

    I love China!

</p>

```

### 内页样式

再网页上创建嵌入的样式表

```HTML

<head>

    <style type="text/css">

        p {background: green;}

    </style>

</head>

<body>

    <p> I love China!</p>

</body>

```

### 外部样式

将网页连接到外部样式表

1. 建立一个css文件

2. 在`HTML`文件的`<head>`中写`<link rel="stylesheet" href="stule.css">`

3. 在css中编写

```HTML

<link rel="stylesheet" href="code.css">

```

## CSS3 选择器

在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。

"CSS" 列指示该属性是在哪个 CSS 版本中定义的。

|                  选择器                  |        例子          |                      例子描述                      | CSS  |

| :--------------------------------------: | :-------------------: | :-------------------------------------------------: | :--- |

|    <font color='red'>.class</font>      |        .intro        |          选择 class="intro" 的所有元素。          | 1    |

|      <font color='red'>#id</font>      |      #firstname      |          选择 id="firstname" 的所有元素。          | 1    |

|        <font color='red'>*</font>        |          *          |                  选择所有元素。                    | 2    |

|    <font color='red'>element</font>    |          p          |                选择所有 <p> 元素。                | 1    |

| <font color='red'>element,element</font> |        div,p        |        选择所有 <div> 元素和所有 <p> 元素。        | 1    |

| <font color='red'>element element</font> |        div p        |        选择 <div> 元素内部的所有 <p> 元素。        | 1    |

| <font color='red'>element>element</font> |        div>p        |      选择父元素为 <div> 元素的所有 <p> 元素。      | 2    |

| <font color='red'>element+element</font> |        div+p        |    选择紧接在 <div> 元素之后的所有 <p> 元素。      | 2    |

|              [*attribute*\]              |      [target]        |          选择带有 target 属性所有元素。            | 2    |

|          [*attribute*=*value*\]          |    [target=_blank]    |          选择 target="_blank" 的所有元素。          | 2    |

|        [*attribute*~=*value*\]          |    [title~=flower]    |    选择 title 属性包含单词 "flower" 的所有元素。    | 2    |

|        [*attribute*\|=*value*\]        |      [lang\|=en]      |      选择 lang 属性值以 "en" 开头的所有元素。      | 2    |

|      <font color='red'>:link</font>      |        a:link        |              选择所有未被访问的链接。              | 1    |

|    <font color='red'>:visited</font>    |      a:visited      |              选择所有已被访问的链接。              | 1    |

|    <font color='red'>:active</font>    |      a:active        |                  选择活动链接。                    | 1    |

|    <font color='red'>:hover</font>      |        a:hover        |            选择鼠标指针位于其上的链接。            | 1    |

|    <font color='red'>:focus</font>      |      input:focus      |            选择获得焦点的 input 元素。            | 2    |

|              :first-letter              |    p:first-letter    |            选择每个 <p> 元素的首字母。            | 1    |

|              :first-line                |    p:first-line      |              选择每个 <p> 元素的首行。              | 1    |

|              :first-child              |    p:first-child    |    选择属于父元素的第一个子元素的每个 <p> 元素。    | 2    |

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

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

|            :lang(*language*)            |      p:lang(it)      | 选择带有以 "it" 开头的 lang 属性值的每个 <p> 元素。 | 2    |

|          *element1*~*element2*          |        p~ul          |        选择前面有 <p> 元素的每个 <ul> 元素。        | 3    |

|        [*attribute*^=*value*\]          |    a[src^="https"]    |  选择其 src 属性值以 "https" 开头的每个 <a> 元素。  | 3    |

|        [*attribute*$=*value*\]          |    a[src$=".pdf"]    |  选择其 src 属性以 ".pdf" 结尾的所有 <a> 元素。    | 3    |

|        [*attribute**=*value*\]          |    a[src*="abc"]    |  选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。  | 3    |

|              :first-of-type              |    p:first-of-type    |  选择属于其父元素的首个 <p> 元素的每个 <p> 元素。  | 3    |

|              :last-of-type              |    p:last-of-type    |  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。  | 3    |

|              :only-of-type              |    p:only-of-type    |  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。  | 3    |

|              :only-child                |    p:only-child      |    选择属于其父元素的唯一子元素的每个 <p> 元素。    | 3    |

|            :nth-child(*n*)              |    p:nth-child(2)    |  选择属于其父元素的第二个子元素的每个 <p> 元素。  | 3    |

|          :nth-last-child(*n*)          |  p:nth-last-child(2)  |          同上，从最后一个子元素开始计数。          | 3    |

|            :nth-of-type(*n*)            |  p:nth-of-type(2)    |  选择属于其父元素第二个 <p> 元素的每个 <p> 元素。  | 3    |

|          :nth-last-of-type(*n*)          | p:nth-last-of-type(2) |        同上，但是从最后一个子元素开始计数。        | 3    |

|              :last-child                |    p:last-child      |    选择属于其父元素最后一个子元素每个 <p> 元素。    | 3    |

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

|                  :empty                  |        p:empty        |  选择没有子元素的每个 <p> 元素（包括文本节点）。  | 3    |

|                :target                  |    #news:target      |            选择当前活动的 #news 元素。            | 3    |

|                :enabled                |    input:enabled    |            选择每个启用的 <input> 元素。            | 3    |

|                :disabled                |    input:disabled    |            选择每个禁用的 <input> 元素            | 3    |

|                :checked                |    input:checked    |          选择每个被选中的 <input> 元素。          | 3    |

|            :not(*selector*)            |        :not(p)        |            选择非 <p> 元素的每个元素。            | 3    |

|              ::selection                |      ::selection      |            选择被用户选取的元素部分。              | 3    |

## CSS三大特性

### 层叠性

层叠性是指当一个标签被设置了多个重复的样式的时候，一个属性会覆盖另外一个属性。

层叠性主要遵循的原则是<font color='red'>就近原则</font>，在不考虑优先级的情况下，在多个样式中最终生效的样式是离标签最近的样式。这里要注意<font color='red'>只覆盖同样的不可重复的样式属性，不会覆盖不重复的属性，不重复的属性会合并下来</font>

```HTML

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        div{

            background-color: red;

        }

        div{

            background-color: blue;

        }

    </style>

</head>

<body>

    <div>123</div>  <!-- 最终背景颜色是蓝色 -->

    <div style="background-color: green;">123</div>  <!-- 最终背景颜色是绿色 -->

</body>

</html>

```

![image-20201223152737197](css.assets/image-20201223152737197.png)

### 继承性

- 继承性是指当子标签没有设置样式时，会继承父标签的样式。

- 比如一个子标签没有设置背景颜色，那么子标签会继承父标签的背景颜色。

可继承的属性比如有<font color='red'>字体类属性</font>（字体颜色、字体大小之类的）、<font color='red'>文本类属性</font>（行高之类的）、<font color='red'>背景类属性</font>（背景颜色之类的）（要注意<font color='red'>子标签不会继承父标签的宽度、高度、边距属性</font>）

```HTML

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        div{

            font-size:70px;

            background-color: #CCC;

            color:skyblue;

        }

    </style>

</head>

<body>

    <div>

        <p>p继承div的样式</p>

    </div>

</body>

</html>

```

![image-20201223152904867](css.assets/image-20201223152904867.png)

### 优先级

- 优先级：<font color='red'>!important>行内样式>id选择器>类选择器>标签选择器>通配符>继承 </font>【优先级高的规则会忽视层叠性，忽视就近原则来定义样式。比如定义了!important，即使行内样式离得近，最终生效的还是!important标注的属性】

- - !important是css的一种语法，定义在样式属性后面，代表这个属性不会被覆盖，最终生效的属性一定是!important标注的属性。[![image](css.assets/1053079-20180501154823992-2001739410.png)](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154823658-883822458.png)

```HTML

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

    <style>

        /* 从上到下，依次注释选择器来测试优先级 */

        div{

            color:green!important;

        }

        #id1{

            color:red;

        }

        .class{

            color: blue;

        }

        div{

            color:purple;

        }

    </style>

</head>

<body>

    <div>!import优先级</div>

    <div style="color:red">行内样式优先级</div>

    <div id="id1">id选择器优先级</div>

    <div class="c1">类选择器优先级</div>

    <div>标签选择器优先级</div>

</body>

</html>

```

#### 权重计算方法

##### 规则

- 权重使用四个数字来衡量(x,x,x,x)【CSS2使用三位】

- 继承的权重为<font color='orange'>(0,0,0,0)</font>

- 标签选择器的权重为<font color='orange'>(0,0,0,1)</font>

- 类、伪类选择器的权重为<font color='orange'>(0,0,1,0)</font>

- id选择器选择器的权重为<font color='orange'>(0,1,0,0)</font>

- 行内样式的权重为<font color='orange'>(1,0,0,0)</font>

- <font color='orange'>!important</font>的权重无限大

##### 计算方法

- 多个选择器混杂时，权重之和也是用四个数字来组成，每一位的值为多个选择器四个数字的每位之和，比如<font color='orange'>div:first-child</font>的权重为<font color='orange'>(0,0,0,1)+(0,0,1,0)=(0,0,1,1)</font>，比如<font color='orange'>div ul li </font>为<font color='orange'>(0,0,0,3)</font>,比如<font color='orange'>a:hover</font>为<font color='orange'>(0,0,1,1)</font>

- <font color='red'>权重之和的数制是不会进位的，再多的标签选择器权重加和也抵不过一个类选择器。</font>

- 多个选择器之间的顺序是无关的，不影响权重之和。

- 对于并集选择器来说不是权重的加和，因为理论上它还是独立的，它只相当于将多个选择器的相同内容归于一个并集选择器中，理论上每一个选择器还是独立的。[![image](css.assets/1053079-20180501154824593-1122794927.png)](https://images2018.cnblogs.com/blog/1053079/201805/1053079-20180501154824334-1990617461.png)

## CSS常用单位

### px

px 是图像显示的基本单元，是 viewport 像素，是相对单位。同样都是 1px，在不同设备上的显示有可能是不一样的。

### rem

rem 是相对于根元素 `<html>` 的 font-size 来计算的，比如说你设置了<font color='orange'>1.2rem</font>，根元素的<font color='orange'>font-size是100px</font>，那么这个元素动态算出来的px数就是120px。不同宽度，设置不同px，这样就可以适配所有宽度的设备了。

###  em

em 是相对于父元素的 font-size 来计算的。

###  vw，vh，vmin，vmax

（1）vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域（不包括工具栏和按钮）。

（2）具体描述如下：

- vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）

- vh：视窗高度的百分比

- vmin：当前 vw 和 vh 中较小的一个值

- vmax：当前 vw 和 vh 中较大的一个值

（3）vmin、vmax 用处

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

（4）浏览器兼容性

    （1）桌面 PC

- Chrome：自 26 版起就完美支持（2013年2月）

- Firefox：自 19 版起就完美支持（2013年1月）

- Safari：自 6.1 版起就完美支持（2013年10月）

- Opera：自 15 版起就完美支持（2013年7月）

- IE：自 IE10 起（包括 Edge）到现在还只是部分支持（不支持 vmax，同时 vm 代替 vmin）

​    （2）移动设备

- Android：自 4.4 版起就完美支持（2013年12月）

- iOS：自 iOS8 版起就完美支持（2014年9月）

（5）用途

- 设置元素的尺寸，字体大小

- 设置遮罩层的尺寸

###  百分号 %

% 是相对于父元素的尺寸来计算的。

## 元素的常用属性

### 1、字体属性：(font)

- **大小 ：font-size**

x-large (特大) xx-small;(极小) 一般中文用不到， 还可以使用单位来表示：ps em rem

- **样式：font-style**

oblique （偏斜体) italic(斜体) normal(正常)

-  **行高：line-height**

normal(正常) 单位：PX、EM

- **粗细：font-weight**

bold(粗体) lighter(细体) normal(正常) 还可使用数值100-900，定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。

-  **修饰：text-decoration**

underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)

常用字体： (font-family) "Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sansserif, Verdana

### 2、背景属性： (background)

- **背景颜色**

这个属性接受任何合法的颜色值，

1、三基色比例表示， #RRGGBB，前两位是红色，中间2位是绿色，后两位是蓝色，最小是0，最 大是F。

2、rgba表示方式，rgb(255,0,0)或者rgb(100%,0,0)表示红色，可以传第四个参数代表透明度

3、英文单词 background-color: #FFFFFF background-color: rgb(255,0,0,.5) background-color: red

-  **图片**

{background-image: url();}

- **重复**

{background-repeat: no-repeat;}

-  **滚动**

background-attachment:

fixed(固定) scroll(滚动)

- **位置**

  background-position

  left(水平) top(垂直)

- **简写方法**

  {background:#000 url(..) repeat fixed left top;}

/简写·这个在阅读代码中经常出现，要认真的研究/、

```css

body

{

    background-image:url('gradient2.png');

    background-repeat:repeat-x;

}

```

### 3、列表属性： (List-style)

- **类型：list-style-type:**

  disc(圆点) circle;(圆圈) square(方块) decimal;(数字) lower-roman(小罗码数字) upper-roman ower-alpha（希腊 upper-alpha

- **位置：list-style-position **

  outside(外) inside

- **图像：list-style-image:**

  url(..);

### 4、边框属性：

-  (**Border) 边框类型：border-style**

​ dotted(点线) dashed(虚线) solid（实线） double(双线) groove(槽线) ridge(脊状) inset (凹陷) outset;

- **边框宽度：border-width**

- **边框颜色：border-color**

- **简写方法：border：1px solidcolor;**

### 5、区块属性： (Block)

- **字间距 ：letter-spacing**

可以使用px等单位

- 端对齐：text-align

left;(左对齐) right;(右对齐) center(居中)

- **缩进：text-indent**

  数值px

- 垂直对齐 ：vertical-align: baseline

  (基线) sub(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

- **词间距：word-spacing**

  数值

- **显示：display（重要）**

  none(不显示)

  inline(默认：内联元素)

  block(块)

  inline-block（行内块元素）

  list-item;(列表项)

**块级元素(block)特性：**

- 总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

- 宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

**内联元素(inline)特性：**

- 和相邻的内联元素在同一行;

- 宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的 top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

**块级元素主要有：**

- div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , ol , p , table , ul , li

**内联元素主要有：**

- a , i , img , input , select , span , strong ,textarea

### 6、盒子模型（box）

对于块状元素，多个元素套在一起就像几个盒子套在一起，怎么紧凑的排版是个问题。

- **宽：width**

  表示内容区域的宽度

- **高：**

  height 表示内容区域的宽度

- **外边距：**

  margin margin-top： 本元素顶部距离上一个元素的距离

  margin-bottom：本元素低部距离上一个元素的距离

  margin-left：本元素左侧部距离上一个元素的距离

  margin-right：本元素右侧距离上一个元素的距离

  合并写： margin: 上 右 下 左 margin:10px 10px 10px 10px;

  还可以是 margin: 上下 左右 margin:10px 10px;

  左右居中 margin:0 auto; 或者 margin: auto;

  垂直居中后边说。

- **内边距：padding**

padding-top：本元素顶部空出的距离

padding-bottom：本元素低部空出的距离

padding-left：本元素左侧部空出的距离

padding-right：本元素右侧空出的距离

合并写： padding: 上 右 下 左 padding:10px 10px 10px 10px;

还可以是 padding: 上下 左右 padding:10px 10px;

- **box-sizing**：定义如何计算元素的宽度和高度:是否应该包含填充和边框

  默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着：当您设置元素的宽度/高度时，元素通常看起来比 您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。

  content-box：More Actionscontent-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应 用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。

  border-box：元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定 的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

  inherit：规定应从父元素继承 box-sizing 属性的值。

### 7、定位属性： (Position)

文档流是指在网页中将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流.(自 己的理解是从头到尾按照文档的顺序，该在什么位置就在什么位置，自上而下，自左到右的顺序),这是普 通流的说法。

- **定位：Position: static：**

  文档流定位，默认的。

  absolute：绝对定位

  relative;： 相对定位

  fixed: 固定定位

- **可见性：visibility**

  inherit（继承父元素）;

  visible（可见）

  hidden（隐藏）

- **溢出：overflow visible**

  （可见） hidden（隐藏） scroll（滚动）;

### 8、浮动

#### （1）定义浮动：float

left（左浮动） right（右浮动）

浮动的问题

浮动元素会脱离了文档流，造成父元素的高度坍塌，所以包围图片和文本的 div 不占据空间。于是使用 了浮动的元素，后边紧跟其他元素会错乱，就要清除浮动。

#### （2）清除浮动

1、通过属性clear:both;达到清除浮动的目的；

元素浮动后，只需要在浮动元素添加多一个块级元素，并添加clear: both;属性，便可以达到清除浮动的 目的。

```html

<style type="text/css">

    li {

        list-style: none;

        height: 100px;

        width: 100px;

        float: left;

        background: red;

        margin-left: 20px;

    }

    ul{

        background: pink;

    }

</style>

<ul class="cc">

    <li></li>

    <li></li>

    <div style="clear: both;"></div>

</ul>

```

2、通过给父级元素添加伪类after，达到清除浮动的目的；

这种方式也是使用clear: both;的方式达到效果，只是变相的使用了伪类after，使得页面结构更简洁，也 是常用的清理浮动的方式。

```html

<style type="text/css">

    li {

        list-style: none;

        height: 100px;

        width: 100px;

        float: left;

        background: red;

        margin-left: 20px;

    }

    .cc:after {

        content: '';

        height: 0;

        line-height: 0;

        display: block;

        visibility: hidden;

        clear: both;

    }

    ul{

        background: pink;

    }

</style>

<ul class="cc">

    <li></li>

    <li></li>

</ul>

```

3、使用双伪类；

此方式和三原理一样，代码更简洁。

```html

<style type="text/css">

    li {

        list-style: none;

        height: 100px;

        width: 100px;

        float: left;

        background: red;

        margin-left: 20px;

    }

    .cc:after,

    .cc:before {

        content: "";

        display: block;

        clear: both;

    }

    ul {

        background: pink;

    }

</style>

<ul class="cc">

    <li></li>

    <li></li>

</ul>

```

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

推荐阅读更多精彩内容

  • css
    课程目标: 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握C...
    前端陈陈陈阅读 273评论 0赞 1
  • 前端之路——笔记（基础css）
    学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,311评论 2赞 66
  • CSS相关
    1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种？ CSS样式加载一共有四种方式： 1、行...
    没糖_cristalle阅读 713评论 0赞 0
  • css基础
    # CSS样式规则overflow 使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进...
    低调迷人的反派角色阅读 1,005评论 0赞 1
  • CSS学习一
    学习目标： > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种选择器...
    ZPNGU阅读 1,203评论 0赞 0