02、前端基礎(chǔ)之CSS

[toc]

CSS介紹

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素鹿响。

當(dāng)瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）谷饿。

CSS語法

CSS實例

每個CSS樣式由兩個組成部分：選擇器和聲明惶我。聲明又包括屬性和屬性值。每個聲明之后用分號結(jié)束各墨。

CSS語法

CSS注釋

/*這是注釋*/

注釋是代碼之母指孤。--摘自哪吒語錄

CSS的幾種引入方式

行內(nèi)樣式

行內(nèi)式是在標(biāo)記的style屬性中設(shè)定CSS樣式。不推薦大規(guī)模使用贬堵。

<p style="color: red">Hello world.</p>

內(nèi)部樣式

嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head></head>標(biāo)簽對的<style></style>標(biāo)簽對中恃轩。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中，然后在頁面進行引入即可黎做。推薦使用此方式叉跛。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器

p {color: "red";}

ID選擇器

#i1 {
  background-color: red;
}

類選擇器

.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}

注意：

樣式類名不要用數(shù)字開頭（有的瀏覽器不認(rèn)）。

標(biāo)簽中的class屬性如果有多個蒸殿，要用空格分隔筷厘。

通用選擇器

* {
  color: white;
}

組合選擇器

后代選擇器

/*li內(nèi)部的a標(biāo)簽設(shè)置字體顏色*/
li a {
  color: green;
}

兒子選擇器

/選擇所有父級是 <div> 元素的 <p> 元素/

div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇所有緊接著<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1后面所有的兄弟p標(biāo)簽*/
#i1~p {
  border: 2px solid royalblue;
}

屬性選擇器

/*用于選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}

/*用于選取帶有指定屬性和值的元素宏所。*/
p[title="213"] {
  color: green;
}

不怎么常用的屬性選擇器

/*找到所有title屬性以hello開頭的元素*/
[title^="hello"] {
  color: red;
}

/*找到所有title屬性以hello結(jié)尾的元素*/
[title$="hello"] {
  color: yellow;
}

/*找到所有title屬性中包含（字符串包含）hello的元素*/
[title*="hello"] {
  color: red;
}

/*找到所有title屬性(有多個值或值以空格分割)中有一個值為hello的元素：*/
[title~="hello"] {
  color: green;
}

分組和嵌套

分組

當(dāng)多個元素的樣式相同的時候酥艳，我們沒有必要重復(fù)地為每個元素都設(shè)置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統(tǒng)一設(shè)置元素樣式爬骤。

例如：

div, p {
  color: red;
}

上面的代碼為div標(biāo)簽和p標(biāo)簽統(tǒng)一設(shè)置字體為紅色充石。

通常，我們會分兩行來寫霞玄，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器可以混合起來使用骤铃，比如：.c1類內(nèi)部所有p標(biāo)簽設(shè)置字體顏色為紅色。

.c1 p {
  color: red;
}

偽類選擇器

/* 未訪問的鏈接 */
a:link {
  color: #FF0000
}

/* 已訪問的鏈接 */
a:visited {
  color: #00FF00
} 

/* 鼠標(biāo)移動到鏈接上 */
a:hover {
  color: #FF00FF
} 

/* 選定的鏈接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

偽元素選擇器

first-letter

常用的給首字母設(shè)置特殊樣式：

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每個<p>元素之前插入內(nèi)容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每個<p>元素之后插入內(nèi)容*/
p:after {
  content:"[?]";
  color:blue;
}

==before和after多用于清除浮動坷剧。==

選擇器的優(yōu)先級

CSS繼承

繼承是CSS的一個主要特征惰爬，它是依賴于祖先-后代的關(guān)系的。繼承是一種機制惫企，它允許樣式不僅可以應(yīng)用于某個特定的元素撕瞧，還可以應(yīng)用于它的后代。例如一個body定義了的字體顏色值也會應(yīng)用到段落的文本中。

body {
  color: red;
}

此時頁面上所有標(biāo)簽都會繼承body的字體顏色风范。然而CSS繼承性的權(quán)重是非常低的咨跌，是比普通元素的權(quán)重還要低的0沪么。

我們只要給對應(yīng)的標(biāo)簽設(shè)置字體顏色就可覆蓋掉它繼承的樣式硼婿。

p {
  color: green;
}

此外，繼承是CSS重要的一部分禽车，我們甚至不用去考慮它為什么能夠這樣寇漫，但CSS繼承也是有限制的。有一些屬性不能被繼承殉摔，如：border, margin, padding, background等州胳。

選擇器的優(yōu)先級

我們上面學(xué)了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素并且為其設(shè)置樣式逸月，那瀏覽器根據(jù)什么來決定應(yīng)該應(yīng)用哪個樣式呢栓撞？

其實是按照不同選擇器的權(quán)重來決定的，具體的選擇器權(quán)重計算方式如下圖：

選擇器的優(yōu)先級

除此之外還可以通過添加 !import方式來強制讓樣式生效碗硬，但并不推薦使用瓤湘。因為如果過多的使用!import會使樣式文件混亂不易維護。

萬不得已可以使用!import

CSS屬性相關(guān)

寬和高

width屬性可以為元素設(shè)置寬度恩尾。

height屬性可以為元素設(shè)置高度弛说。

塊級標(biāo)簽才能設(shè)置寬度，內(nèi)聯(lián)標(biāo)簽的寬度由內(nèi)容來決定翰意。

字體屬性

文字字體

font-family可以把多個字體名稱作為一個“回退”系統(tǒng)來保存木人。如果瀏覽器不支持第一個字體，則會嘗試下一個冀偶。瀏覽器會使用它可識別的第一個值醒第。

簡單實例：

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

如果設(shè)置成inherit表示繼承父元素的字體大小值。

字重（粗細）

font-weight用來設(shè)置字體的字重（粗細）进鸠。

值	描述
normal	默認(rèn)值稠曼，標(biāo)準(zhǔn)粗細
bold	粗體
bolder	更粗
lighter	更細
100~900	設(shè)置具體粗細，400等同于normal堤如，而700等同于bold
inherit	繼承父元素字體的粗細值

文本顏色

顏色屬性被用來設(shè)置文字的顏色蒲列。

顏色是通過CSS最經(jīng)常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的==透明度/不透明度==搀罢，它的范圍為0.0到1.0之間蝗岖。

文字屬性

文字對齊

text-align 屬性規(guī)定元素中的文本的水平對齊方式。

值	描述
left	左邊對齊默認(rèn)值
right	右對齊
center	居中對齊
justify	兩端對齊

文字裝飾

text-decoration 屬性用來給文字添加特殊效果榔至。

值	描述
none	默認(rèn)抵赢。定義標(biāo)準(zhǔn)的文本。
underline	定義文本下的一條線。
overline	定義文本上的一條線铅鲤。
line-through	定義穿過文本下的一條線划提。
inherit	繼承父元素的text-decoration屬性的值。

常用的為去掉a標(biāo)簽?zāi)J(rèn)的自劃線：

a {
  text-decoration: none;
}

首行縮進

將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
 背景重復(fù)
 repeat(默認(rèn)):背景圖片平鋪排滿整個網(wǎng)頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

支持簡寫：

background:#ffffff url('1.png') no-repeat right top;

使用背景圖片的一個常見案例就是很多網(wǎng)站會把很多小圖標(biāo)放在一張圖片上邢享，然后根據(jù)位置去顯示圖片鹏往。減少頻繁的圖片請求。

參考鏈接點我

一個有趣的例子：

鼠標(biāo)滾動背景不動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>滾動背景圖示例</title>
    <style>
        * {
            margin: 0;
        }
        .box {
            width: 100%;
            height: 500px;
            background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center;
            background-attachment: fixed;
        }
        .d1 {
            height: 500px;
            background-color: tomato;
        }
        .d2 {
            height: 500px;
            background-color: steelblue;
        }
        .d3 {
            height: 500px;
            background-color: mediumorchid;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="box"></div>
    <div class="d2"></div>
    <div class="d3"></div>
</body>
</html>

邊框

邊框?qū)傩?/h4>

border-width
border-style
border-color

#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

通常使用簡寫方式：

#i1 {
  border: 2px solid red;
}

邊框樣式

值	描述
none	無邊框骇塘。
dotted	點狀虛線邊框伊履。
dashed	矩形虛線邊框。
solid	實線邊框款违。

除了可以統(tǒng)一設(shè)置邊框外還可以單獨為某一個邊框設(shè)置樣式唐瀑，如下所示：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

border-radius

用這個屬性能實現(xiàn)圓角邊框的效果。

將==border-radius==設(shè)置為長或高的一半即可得到一個圓形插爹。

display屬性

用于控制HTML元素的顯示效果哄辣。

值	意義
display:"none"	HTML文檔中元素存在，但是在瀏覽器中不顯示赠尾。一般用于配合JavaScript代碼使用力穗。
display:"block"	默認(rèn)占滿整個頁面寬度，如果設(shè)置了指定寬度萍虽，則會用margin填充剩下的部分睛廊。
display:"inline"	按行內(nèi)元素顯示，此時再設(shè)置元素的width杉编、height超全、margin-top、margin-bottom和float屬性都不會有什么影響邓馒。
display:"inline-block"	使元素同時具有行內(nèi)元素和塊級元素的特點嘶朱。

display:"none"與visibility:hidden的區(qū)別：

visibility:hidden:可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間光酣。也就是說疏遏，該元素雖然被隱藏了，但仍然會影響布局救军。

display:none: 可以隱藏某個元素财异，且隱藏的元素不會占用任何空間。也就是說唱遭，該元素不但被隱藏了戳寸，而且該元素原本占用的空間也會從頁面布局中消失。

CSS盒子模型

margin: 用于控制元素與元素之間的距離拷泽；margin的最基本用途就是控制元素周圍空間的間隔疫鹊，從視覺角度上達到相互隔開的目的袖瞻。
padding: 用于控制內(nèi)容與邊框之間的距離；
Border(邊框): 圍繞在內(nèi)邊距和內(nèi)容外的邊框拆吆。
Content(內(nèi)容): 盒子的內(nèi)容聋迎，顯示文本和圖像。

CSS盒子模型

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內(nèi)填充

.padding-test {
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 15px;
  padding-left: 20px;
}

推薦使用簡寫：

.padding-test {
  padding: 5px 10px 15px 20px;
}

順序：上右下左

補充padding的常用簡寫方式：

提供一個枣耀，用于四邊霉晕；
提供兩個，第一個用于上－下奕枢，第二個用于左－右娄昆；
如果提供三個，第一個用于上缝彬，第二個用于左－右，第三個用于下哺眯；
提供四個參數(shù)值谷浅，將按上－右－下－左的順序作用于四邊；

float

在 CSS 中奶卓，任何元素都可以浮動一疯。

浮動元素會生成一個塊級框，而不論它本身是何種元素夺姑。

關(guān)于浮動的兩個特點：

浮動的框可以向左或向右移動墩邀，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中盏浙，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣眉睹。

三種取值

left：向左浮動

right：向右浮動

none：默認(rèn)值，不浮動

參考示例

clear

clear屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素废膘。

值	描述
left	在左側(cè)不允許浮動元素竹海。
right	在右側(cè)不允許浮動元素。
both	在左右兩側(cè)均不允許浮動元素丐黄。
none	默認(rèn)值斋配。允許浮動元素出現(xiàn)在兩側(cè)。
inherit	規(guī)定應(yīng)該從父元素繼承 clear 屬性的值灌闺。

注意：clear屬性只會對自身起作用艰争，而不會影響其他元素。

父標(biāo)簽塌陷問題

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

overflow溢出屬性

值	描述
visible	默認(rèn)值桂对。內(nèi)容不會被修剪甩卓，會呈現(xiàn)在元素框之外。
hidden	內(nèi)容會被修剪接校，并且其余內(nèi)容是不可見的猛频。
scroll	內(nèi)容會被修剪狮崩，但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。
auto	如果內(nèi)容被修剪鹿寻，則瀏覽器會顯示滾動條以便查看其余的內(nèi)容睦柴。
inherit	規(guī)定應(yīng)該從父元素繼承 overflow 屬性的值。

overflow（水平和垂直均設(shè)置）
overflow-x（設(shè)置水平方向）
overflow-y（設(shè)置垂直方向）

圓形頭像示例

圓形頭像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圓形的頭像示例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      background-color: #eeeeee;
    }
    .header-img {
      width: 150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    .header-img>img {
      max-width: 100%;
    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="https://q1mi.github.io/Blog/asset/img/head_img.jpg" alt="">
</div>

</body>
</html>

定位（position）

static

static 默認(rèn)值毡熏，無定位坦敌，不能當(dāng)作絕對定位的參照物，并且設(shè)置標(biāo)簽對象的left痢法、top等值是不起作用的的狱窘。

relative（相對定位）

相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物财搁。有趣的是蘸炸，即使設(shè)定了元素的相對定位以及偏移值，元素還占有著原來的位置尖奔，即占據(jù)文檔流空間搭儒。對象遵循正常文檔流，但將依據(jù)top提茁，right淹禾，bottom，left等屬性在正常文檔流中偏移位置茴扁。而其層疊通過z-index屬性定義铃岔。

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

absolute（絕對定位）

定義：設(shè)置為絕對定位的元素框從文檔流完全刪除峭火，并相對于最近的已定位祖先元素定位毁习，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊（即body元素）躲胳。元素原先在正常文檔流中所占的空間會關(guān)閉蜓洪，就好像該元素原來不存在一樣。元素定位后生成一個塊級框坯苹，而不論原來它在正常流中生成何種類型的框隆檀。

重點：如果父級設(shè)置了position屬性，例如position:relative;粹湃，那么子元素就會以父級的左上角為原始點進行定位恐仑。這樣能很好的解決自適應(yīng)網(wǎng)站的標(biāo)簽偏離問題，即父級為自適應(yīng)的为鳄，那我子元素就設(shè)置position:absolute;父元素設(shè)置position:relative;裳仆，然后Top、Right孤钦、Bottom歧斟、Left用百分比寬度表示纯丸。

另外，對象脫離正常文檔流静袖，使用top觉鼻，right，bottom队橙，left等屬性進行絕對定位坠陈。而其層疊通過z-index屬性定義。

fixed（固定）

fixed：對象脫離正常文檔流捐康，使用top仇矾，right，bottom解总，left等屬性以窗口為參考點進行定位贮匕，當(dāng)出現(xiàn)滾動條時，對象不會隨著滾動倾鲫。而其層疊通過z-index屬性定義粗合。注意點：一個元素若設(shè)置了 position:absolute | fixed; 則該元素就不能設(shè)置float。這是一個常識性的知識點乌昔，因為這是兩個不同的流，一個是浮動流壤追，另一個是“定位流”磕道。但是 relative 卻可以。因為它原本所占的空間仍然占據(jù)文檔流行冰。

在理論上溺蕉，被設(shè)置為fixed的元素會被定位于瀏覽器窗口的一個指定坐標(biāo)，不論窗口是否滾動悼做，它都會固定在這個位置疯特。

示例代碼：

返回頂部按鈕樣式示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>返回頂部示例</title>
  <style>
    * {
      margin: 0;
    }

    .d1 {
      height: 1000px;
      background-color: #eeee;
    }

    .scrollTop {
      background-color: darkgrey;
      padding: 10px;
      text-align: center;
      position: fixed;
      right: 10px;
      bottom: 20px;
    }
  </style>
</head>
<body>
<div class="d1">111</div>
<div class="scrollTop">返回頂部</div>
</body>
</html>

z-index

#i2 {
  z-index: 999;
}

設(shè)置對象的層疊順序，數(shù)值大的會覆蓋在數(shù)值小的標(biāo)簽之上肛走。z-index 僅能在定位元素上奏效漓雅。

自定義模態(tài)框示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>自定義模態(tài)框</title>
  <style>
    .cover {
      background-color: rgba(0,0,0,0.65);
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 998;
    }

    .modal {
      background-color: white;
      position: fixed;
      width: 600px;
      height: 400px;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -300px;
      z-index: 1000;
    }
  </style>
</head>
<body>

<div class="cover"></div>
<div class="modal"></div>
</body>
</html>

opacity

用來定義透明效果。取值范圍是0~1朽色，0是完全透明邻吞，1是完全不透明。

綜合示例

頂部導(dǎo)航菜單

頂部導(dǎo)航菜單示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>li標(biāo)簽的float示例</title>
  <style>
    /*清除瀏覽器默認(rèn)外邊距和內(nèi)填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a標(biāo)簽?zāi)J(rèn)的下劃線*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*刪除列表默認(rèn)的圓點樣式*/
      margin: 0; /*刪除列表默認(rèn)的外邊距*/
      padding: 0; /*刪除列表默認(rèn)的內(nèi)填充*/
    }
    /*li元素向左浮動*/
    li {
      float: left;
    }

    li > a {
      display: block; /*讓鏈接顯示為塊級標(biāo)簽*/
      padding: 0 15px; /*設(shè)置左右各15像素的填充*/
      color: #b0b0b0; /*設(shè)置字體顏色*/
      line-height: 40px; /*設(shè)置行高*/
    }
    /*鼠標(biāo)移上去顏色變白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮動 解決父級塌陷問題*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 頂部導(dǎo)航欄 開始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服務(wù)</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">優(yōu)品</a></li>
  </ul>
</div>
<!-- 頂部導(dǎo)航欄 結(jié)束 -->
</body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末葫男，一起剝皮案震驚了整個濱河市抱冷，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌梢褐，老刑警劉巖旺遮，帶你破解...
沈念sama閱讀 217,907評論 6贊 506
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件赵讯，死亡現(xiàn)場離奇詭異，居然都是意外死亡耿眉，警方通過查閱死者的電腦和手機边翼，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,987評論 3贊 395
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門鹿驼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來梅桩，“玉大人，你說我怎么就攤上這事准浴∥骺” “怎么了斤寇？”我有些...
開封第一講書人閱讀 164,298評論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長拥褂。經(jīng)常有香客問我娘锁，道長，這世上最難降的妖魔是什么饺鹃？我笑而不...
開封第一講書人閱讀 58,586評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任莫秆，我火速辦了婚禮，結(jié)果婚禮上悔详，老公的妹妹穿的比我還像新娘镊屎。我一直安慰自己，他們只是感情好茄螃，可當(dāng)我...
茶點故事閱讀 67,633評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布缝驳。她就那樣靜靜地躺著，像睡著了一般归苍。火紅的嫁衣襯著肌膚如雪用狱。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 51,488評論 1贊 302
城市分裂傳說
那天拼弃，我揣著相機與錄音夏伊，去河邊找鬼。笑死吻氧，一個胖子當(dāng)著我的面吹牛溺忧，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播医男，決...
沈念sama閱讀 40,275評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼砸狞，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了镀梭？” 一聲冷哼從身側(cè)響起刀森，我...
開封第一講書人閱讀 39,176評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎报账，沒想到半個月后研底，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體埠偿，經(jīng)...
沈念sama閱讀 45,619評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,819評論 3贊 336
?白月光啟示錄
正文我和宋清朗相戀三年榜晦，在試婚紗的時候發(fā)現(xiàn)自己被綠了冠蒋。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 39,932評論 1贊 348
活死人
序言：一個原本活蹦亂跳的男人離奇死亡乾胶，死狀恐怖抖剿，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情识窿，我是刑警寧澤斩郎，帶...
沈念sama閱讀 35,655評論 5贊 346
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站喻频，受9級特大地震影響缩宜，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜甥温，卻給世界環(huán)境...
茶點故事閱讀 41,265評論 3贊 329
男人毒藥：我在死后第九天來索命
文/蒙蒙一锻煌、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧姻蚓，春花似錦宋梧、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,871評論 0贊 22
一樁弒父案乃秀，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至圆兵，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間枢贿，已是汗流浹背殉农。一陣腳步聲響...
開封第一講書人閱讀 32,994評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留局荚，地道東北人超凳。一個月前我還...
沈念sama閱讀 48,095評論 3贊 370
代替公主和親
正文我出身青樓，卻偏偏與公主長得像耀态，于是被迫代替她去往敵國和親轮傍。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,884評論 2贊 354

02、前端基礎(chǔ)之CSS

CSS介紹

CSS語法

CSS實例

CSS注釋

CSS的幾種引入方式

行內(nèi)樣式

內(nèi)部樣式

外部樣式

CSS選擇器

基本選擇器

元素選擇器

ID選擇器

類選擇器

通用選擇器

組合選擇器

后代選擇器

兒子選擇器

毗鄰選擇器

弟弟選擇器

屬性選擇器

分組和嵌套

分組

嵌套

偽類選擇器

偽元素選擇器

first-letter

before

after

選擇器的優(yōu)先級

CSS繼承

選擇器的優(yōu)先級

CSS屬性相關(guān)

寬和高

字體屬性

文字字體

字體大小

字重（粗細）

文本顏色

文字屬性

文字對齊

文字裝飾

首行縮進

背景屬性

邊框

border-radius

display屬性

CSS盒子模型

margin外邊距

padding內(nèi)填充

float

三種取值

clear

父標(biāo)簽塌陷問題

overflow溢出屬性

圓形頭像示例

定位（position）

static

relative（相對定位）

absolute（絕對定位）

fixed（固定）

z-index

opacity

綜合示例

頂部導(dǎo)航菜單

推薦閱讀更多精彩內(nèi)容