CSS筆記

引入

外部樣式表
<head>  
    <link rel="stylesheet" href="base.css">  
</head>
內部樣式表
<head>  
    <style>  
        body{background-color: red;}  
        p{margin-left: 20px;}  
    </style>  
</head>
內嵌樣式
<p style="color:red;margin-left:20px;">  
    this is a paragraph  
</p>

此方式不利于后期維護，較少使用此方法。

語法

選擇器
屬性聲明=屬性名:屬性值
注釋 /* */

@規則

@media 有動態樣式時使用
@keyframes 動畫過程
@font-face 引入外部字體

簡單選擇器

選擇p標簽：
p{color:blue;}

類選擇器

.className
為標簽賦予類
<p class="first">段落一</p>
可在CSS中用
.first{color:blue;}
來為這一類標簽實現同樣地樣式
類選擇器以“.”開頭，可使用字母、數字、-、_，必須以字母開頭，在同一個文件中可出現多次。

id選擇器

idName

<p id="second">sdfjalsg</p>

second{color:blue;}

屬性選擇器

使用標簽內的屬性來選擇。
[屬性值]{樣式}
[type=button]{樣式}
[class~=sports]{樣式}　　　　表示class中有sports的所有類
[href^="#"]{樣式}　　選擇以#開頭的鏈接
[href$=pdf]{樣式}　　選擇以pdf結尾的鏈接
[href*="sports.com"]{樣式}　　選擇包含“sports.com”的鏈接

偽類選擇器

<a >亞馬遜中國</a>
使用偽類選擇器
a:link{color:gray;} 選擇href中有值的元素
a:visited{color:red;} 點擊過后
a:hover 鼠標放在此處時
a:active 點擊時的樣式
:enabled 可用
:disabled 不可用
:checked 多選框中已選擇的部分
:empty 選擇空元素
:root 選擇根標簽
:not()
:target
:lang()

偽元素選擇器

::first-letter{}
::first-line{}
::selection{} 被選中內容的樣式

組合選擇器
后代選擇器和子選擇器

<div class="txt">
<h3><a href="">電臺名稱</a></h3>
<div class="author">
<a href="">作者名稱</a>
<i class="vip"></i>
</div>
<div class="info">
<p>共58期</p>
<p>訂閱2533次</p>
</div>
<p>1</p>
<p>2</P>
</div>
.main a{樣式} 選擇main這個類之內的所有a元素
.main>a{樣式} 選擇main這個類之內第一級的a元素
div+p{樣式} 選擇與div相鄰的p元素
div~p{} 選擇div后面所有的p元素

選擇器分組

p,h3,a{} 選擇這三個元素

文本

字體
font:12px/2 arial;

此處表示字體是Arial，12像素大，行高是12px的2倍。

水平對齊

text-align:left|right|center|justify
左對齊、右對齊、居中、兩端對齊。

垂直對齊

vertical-align:baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
對應：基線、下標、上標、在此行最高點、在文本最高點、居中、此行最低點、文本最低點、行高百分比、以base line為基準向上移動的像素數量。

首行縮進

text-indent:<length> | <percentage>
寫2em即兩個字符，10px即縮進10像素，20%即縮進文本容器寬度的20%。
設置為極大的負值可以將文本隱藏。

white-space

定義空格、換行、tab是否保留。
white-space:normal | nowrap | pre | pre-wrap | pre-line
normal 空格、tab會被合并，換行被取消。
nowrap 在normal基礎上，強制不換行直到遇到
標簽。
pre 保留換行、空格、tab，不換行。
pre-wrap 保留空白符序列，正常換行。
pre-line 合并空白符，保留換行。
inherit 從父元素繼承white-space屬性值。

文本換行

word-wrap:normal | break-word
默認，允許單詞換行。（對英文）
word-break:normal | keep-all | break-all
默認，不打斷單詞換行，任意單詞均可以換行。

文本特效
陰影

text-shadow:none | [<length>{2,3}&&<color>?]#
text-shadow:1px 2px 3px #f00;
X軸偏移1px，Y軸偏移2px，模糊半徑3px，陰影顏色#f00.

下劃線

text-decoration:none | [underline || overline || line-through]
下劃線、上劃線、中劃線。（這三個可以同時存在）

溢出字符隱藏

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
表示文本溢出時用省略號表示，多出的字符隱藏，并且不換行。

定義鼠標形狀

cursor:[<uri>,]*[auto | default | none | help | pointer | zoom-in | zoom-out | move]
default:指針
none:消失
help:帶問號的指針
pointer：手形
zoom-in:放大鏡
zoom-out:縮小鏡
move:十字箭頭
cursor:url(cur.cur),pointer; 寫兩個，以防所設置圖無法顯示。

inherit

強制繼承父元素的屬性。

盒模型

盒模型概念

CSS盒模型是CSS規范的一個模塊，它定義了一個長方形的盒子，每個盒子擁有各自的內邊距和外邊距，并根據視覺格式化模型來對元素進行布局。

width

width:<length> | <percentage> | auto | inherit
使用像素個數或百分比定義（相對父元素的值）。
max-width設置最大寬度，min-width設置最小寬度

height

大體與width類似

padding

padding:[<length> | <percentage>]{1,4} | inherit
賦予4個值時，按順序分別是上(T)、右(R)、下(B)、左(L)的填充(順時針方向)。
.sample1{padding: 40px 30px 20px 10px;}
.sample2{padding-top: 40px;padding-right: 30px;padding-bottom: 20px;padding-left: 10px;}
上面這兩條padding的定義實現的效果是一樣的。
margin/border也具有類似的特點。

縮寫：對面相等，后者省略；4面相等，只寫一個。
padding:20px;　　padding:20px 20px 20px 20px;
padding:20px 10px;　padding:20px 10px 20px 10px;
padding:20px 10px 30px;　padding:20px 10px 30px 10px;

margin

用來設置所有四個（上下左右）方向的外邊距屬性，除了有一個默認值auto外其余語法與padding相同
只有一個值時，這個值會被指定給全部的四個邊.
兩個值時，第一個值被匹配給上和下, 第二個值被匹配給 左和右.
三個值時，第一個值被匹配給上,第二個值被匹配給 左和右, 第三個值被匹配給下.
四個 值時，會依次按 上、右、下、左 的順序匹配 (即順時針順序).

margin合并
相鄰元素的邊距值會被合并成較大者。

border

CSS的border屬性是一個用于設置各種單獨的邊界屬性的簡寫屬性。border可以用于設置一個或多個以下屬性的值： border-width, border-style, border-color。

border: [border-width ||border-style ||border-color |inherit] ;

border-radius
overflow

overflow:visible | hidden | csroll | auto
默認是顯示的，hidden會隱藏超出部分，scroll將使區塊可以滾動，auto會自動在內容超出區域時增加滾動功能。

可以使用overflow-x和overflow-y分別設置水平和垂直方向上的多余內容顯示方式。

box-sizing

默認情況width和height設置的是content-box的屬性
content-box
border-box

box-shadow
box-shadow:none | <shadow>[,<shadow>]*  
<shadow>:inset? &&<length>{2,4} && <color>?

舉例：box-shadow:4px 5px 3px 0px black;
表示水平向右便宜4px，垂直向下偏移5px，陰影邊緣的3px（邊緣向外1.5，向內1.5）會模糊，陰影大小0px。
當不設置顏色時，陰影顏色與文字相同。

box-shadow:3px 3px 5px 2px, inset 0px 0px 5px purple;

內外陰影可以疊加,使用逗號隔開。
陰影只是修飾，不占用空間。

outline

描繪輪廓。不占用空間。位置在border以外。
outline:[<outline-width>||<outline-style>||<outline-color>] | inherit

outline-width:<length> | thin | medium | thick | inherit (后面幾個不常用，一般只用<length>)
outline-style:solid | dashed | dotted |...| inherit
outline-color:<color> | invert | inherit

width、height、padding、margin(水平居中)、border、border-radius、overflow、box-sizing、box-shadow、outline

背景

background-color

背景顏色設置。transparent表示全透明。

background-image

<bg-image>[,<bg-image>]*
url("http://.....")
background-image:url(red.png),url(blue.png)
兩個背景圖會都出現，靠前寫的會在上面一層。

background-repeat

<repeat-style>[,<repeat-style>]*
<repeat-style>=repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
沿x軸、y軸平鋪，space表示平鋪圖形之間有空隙，round表示通過縮放使圖案充滿區域。
舉例：
background-image:url(red.png)
background-repeat:space;

background-attachment

用來設置背景圖是否跟隨頁面滾動。

background-attachment:scroll | local | fixed

scroll表示背景圖不跟著內容滾動，local即背景圖會跟著滾動。

background-position

background-position:

按鈕
linear-gradient

線性漸變。

radial-gradient
background-origin
background-origin:border-box | padding-box | content-box

即設置背景的邊界在容器的哪個盒模型邊界。

background-clip

設置背景顯示的區域。
background-clip:border-box | padding-box | content-box

background-size
<bg-size>[,<bg-size>]*  
<bg-size>=[<length> | <percentage> | auto]{1,2} | cover | contain

可設置為像素數，百分比，或其他關鍵字。百分比是相對容器來說的。cover表示背景充滿容器，contain表示背景填滿容器但是不超過容器。

布局

布局簡介、display(水平居中、居中導航)、position(輪播頭圖、固定頂欄、遮罩、三行自適應布局)、float(兩列布局)、flex(三行兩列自適應)

display

設置元素的顯示方式。
display:block | inline | inline-block | none

display:block

默認是父元素的寬度，可設置寬高，換行顯示。
默認display:block元素——div,p,h1-h6,ul,form...

display:inline

默認寬度是內容寬度，不可設置寬高，同行顯示。
默認行級元素：span,a,label,cite,em...

display:inline-block

默認寬度為內容寬度，可設置寬高，同行顯示，整塊換行。
默認行內塊級：input,textarea,select,button...

display:none

設置元素不顯示。
使用visibility:hidden也可以隱藏元素，但是后續元素并不會顯示在隱藏元素的位置，只是空出來這一塊。

塊級元素居中

margin:auto

居中導航

在容器處設置 text-align:center,每個導航項設置為inline-block

position

設置定位方式
top,right,bottom,left(用來定位元素邊緣各方向對參照物邊緣的距離）
z-index
定義元素在z軸的排序，默認值是0。
z-index棧
父元素的z-index值優先級更高。

position:static | relative | absolute | fixed
position:relative

相對定位，仍在文檔流中，其參照物為元素本身。使用場景：絕對定位元素的參照物。

position:absolute

絕對定位：元素默認寬度是內容寬度，脫離文檔流顯示，其參照物是第一個定位祖先/根元素。

布局：輪播頭圖
position:fixed

固定定位：默認寬度是內容寬度，脫離文檔流。參照物為視窗（當前瀏覽器窗口）

布局：固定頂欄
.top{position:fixed;top:0;width:100%;height:50px;}

將頂欄固定在視窗的頂部。

布局：遮罩
.mask{position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 100%;background-color: #000;opacity: 0.3;}

說明：定位在左上角，寬高值設置成100%覆蓋全屏，然后設置了顏色和透明度。

布局：三行自適應布局
.head{position: absolute;top: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}
.body{position: absolute;top: 100px;left: 0;bottom: 100px;right: 0;overflow: auto;}
.content{height: 2000px;}
.foot{position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;background-color: #ccc;}

頂欄在top處，頁腳固定在bottom，同時設置內容區top/left/bottom/right屬性，撐開頁面，使頂欄和頁腳放在兩頭。

float
float：left|right|none|inherit

默認寬度是內容寬度，脫離文檔流，會向指定的方向一直移動。float的元素在同一文檔流。

float元素半脫離文檔流

對于元素脫離文檔流，對內容在文檔流。

<style>
    body{width: 300px;padding: 5px;line-height: 1.6;border: 1px dashed blue;}
    .sample{height: 100px;margin-right: 5px;padding: 0 5px;line-height: 100px;background-color: pink}
    .sb{background-color: #eee;}

    .sb{outline: 1px dashed red;}

    .sample{float: left;}
</style>

<body>
    <div class="sample">float: left;</div>
    <div class="sb">A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). </div>
</body>

可以看到sample元素對于sb元素是脫離文檔流的，但是內容并不脫離文檔流。

clear
clear:both | left | right | none | inherit

清除浮動效果。

.clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
.clear
布局：兩列布局
<style>
    html, body, .body, .main, .side{margin: 0;padding: 0;height: 100%;}
    .body{width: 960px;margin: 0 auto;}
    .main{background-color: pink;}
    .side{background-color: #eee;}

    .main{float: left;width: 660px;}
    .side{float: right;width: 300px;}
    .clearfix:after{content:'.';display: block;clear: both;height: 0;overflow: hidden;visibility: hidden;}
</style>


<body>
<div class="body clearfix">
    <div class="main">main</div>
    <div class="side">side</div>
</div>
</body>

flex

display：flex

在文檔流中的子元素才是彈性元素。

flex-direction
flex-direction: row|row-reverse|column|column-reverse

安行彈性排列、反向行方向、列方向、反向列

flex-wrap
flex-wrap: wrap|wrap-reverse

換行、反向換行

order
.item2{order: 1;}
.item1{order: 10;}
.item3{order: -1;}

定義元素順序，不是絕對值。定義的值越小則元素越靠前。

彈性
flex-basis
flex-basis:main-size|<width>

設置flex item的初始寬/高。

flex-grow
flex-grow:<number>
initial:0

設置元素分配剩余空間的比例

flex-shrink
flex-shrink:<number>
initial:1（默認值）

當空間不足時，用flex-shrink設置各個元素分攤的縮小比例。設置數值越大，縮小的越多。

flex
flex:<'flex-grow>'||<'flex-shrink'>||<'flex-basis'>
initial:0 1 main-size(默認值)
對齊
justify-content
justify-content:flex-start|flex-end|center|space-between|space-around

用來元素在有剩余空間時的對齊效果。（主軸）

align-items

設置輔軸的對齊方式。

align-items:flex-start|flex-end|center|baseline|stretch

分別表示上對齊、下對齊、居中、基線和拉伸。

align-self
align-self:auto|flex-start|flex-end|center|baseline|stretch

設置單個元素在輔軸的對齊方式

align-content
align-content:flex-start|flex-end|center|space-between|space-around|stretch

設置cross-axis方向（輔軸）上多行的對齊方式

三行兩列自適應布局

flex ie9及以下不支持，目前主要用于移動web頁面中

變形

transform
transform:none|<transform-function>
transform:rotate 旋轉
transform:rotate(<angle>)

定義元素旋轉的角度（順時針方向）。

transform:translate 平移
transform:translate（x軸值，Y軸值）

當使用百分比填寫時，是相對元素原來的位置移動百分比。

transform:scale 縮放
transform:scale（橫向值，縱向值）

設置元素放大倍數（小于1時縮小）當只填寫一個值時，兩個值都是所寫的那個。

transform:skew 縮放
transform:skew(ax[,ay])

元素在X軸和Y軸方向以指定的角度傾斜。如果ay未提供，在Y軸上沒有傾斜。

transform-origin

定義變形的坐標原點，相對于原來元素的位置。默認值是元素的中心點。只寫一個值的時候表示只移動x軸方向。

perspective

立體透視效果。

.m-demo-1 pre{transform:rotateY(45deg);}
.m-demo-1{perspective:2000px;}

沿Y軸旋轉，值越小透視效果越明顯。

.m-demo-1{perspective:500px;perspective-origin:50% 50%;}
.m-demo-1 pre{transform:rotateY(45deg);}

perspective-origin用來定義透視的觀察角度。

transform:translate3d

定義元素在3D空間的三個方向移動的值。也可以使用translateZ單獨定義Z軸縮放。

transform: scale3d

三個方向的縮放比例。也可以使用scaleZ單獨定義Z軸縮放。(縮放Z軸本身)

transform:rotate3d
transform:rotate3d(0,0,1,45deg);

以0,0,1和原點的連線為軸旋轉45度。

transform-style

transform-style屬性指定了，該元素的子元素是（看起來）位于三維空間內，還是在該元素所在的平面內被扁平化。

transform-style: preserve-3d
transform-style: flat

默認是flat。

backface-visibility

關鍵字，指定元素背面是否可見，可為以下值：
visible 表示背面可見，允許顯示正面的鏡像。
hidden 表示背面不可見。

動畫

transition-property

定義動畫內容

.m-demo:hover pre{left:500px;color:#000;}
.m-demo-1 pre{transition-property:none;}
.m-demo-2 pre{transition-property:all;}
.m-demo-3 pre{transition-property:left;}
.m-demo-4 pre{transition-property:left,color;padding:20px 0;line-height:30px;}
transition-duration

定義動畫時長

.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-duration:0s;top:0;}
.m-demo pre:nth-child(2){transition-duration:1s;top:150px;}
.m-demo pre:nth-child(3){transition-duration:2s;top:300px;}
.m-demo pre:nth-child(4){transition-duration:3s;top:450px;}
transition-timing-function
.m-demo{width:600px;height:700px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-timing-function:ease;top:0;}
.m-demo pre:nth-child(2){transition-timing-function:linear;top:150px;}
.m-demo pre:nth-child(3){transition-timing-function:ease-out;top:300px;}
.m-demo pre:nth-child(4){transition-timing-function:cubic-bezier(0.8,0,0,0.8);top:450px;padding:30px 0;line-height:20px;font-size:12px;}
.m-demo pre:nth-child(5){transition-timing-function:steps(3,start);top:600px;padding:30px 0;line-height:20px;font-size:16px;}
transition-delay
.m-demo{width:600px;height:550px;outline:2px dashed;margin:20px auto;}
.m-demo pre{transition:2s;width:100px;height:100px;padding:0;line-height:100px;border-radius:50%;text-align:center;font-size:20px;}
.m-demo:hover pre{left:500px;color:#000;}
.m-demo pre:nth-child(1){transition-delay:0s;top:0;}
.m-demo pre:nth-child(2){transition-delay:1s;top:150px;}
.m-demo pre:nth-child(3){transition-delay:2s;top:300px;}
.m-demo pre:nth-child(4){transition-delay:3s;top:450px;}

動畫效果延遲觸發。

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
    沈念sama閱讀 228,646評論 6贊 533
  • 死咒
    序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
    沈念sama閱讀 98,595評論 3贊 418
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
    開封第一講書人閱讀 176,560評論 0贊 376
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長。 經常有香客問我，道長，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 63,035評論 1贊 314
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
    茶點故事閱讀 71,814評論 6贊 410
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
    開封第一講書人閱讀 55,224評論 1贊 324
  • 城市分裂傳說
    那天，我揣著相機與錄音，去河邊找鬼。 笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。 我是一名探鬼主播，決...
    沈念sama閱讀 43,301評論 3贊 442
  • 雙鴛鴦連環套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
    開封第一講書人閱讀 42,444評論 0贊 288
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
    沈念sama閱讀 48,988評論 1贊 335
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,804評論 3贊 355
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,998評論 1贊 370
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
    沈念sama閱讀 38,544評論 5贊 360
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
    茶點故事閱讀 44,237評論 3贊 347
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,665評論 0贊 26
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,927評論 1贊 287
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。 一個月前我還...
    沈念sama閱讀 51,706評論 3贊 393
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
    茶點故事閱讀 47,993評論 2贊 374

推薦閱讀更多精彩內容

  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,325評論 0贊 11
  • （這是15年初學css時記的筆記） 選擇器 簡單選擇器 標簽選擇器 直接把標簽名加前面。 類選擇器 用.+ cla...
    burningalive閱讀 970評論 0贊 0
  • CSS（Cascading Style Sheets），層疊樣式表。 基本格式 CSS注釋 引入樣式表 行內樣式表...
    猛獨閱讀 293評論 1贊 0
  • CSS學習筆記 HTML與CSS布局 1、html布局標簽： 推薦使用有具體語義的標簽，而不是一味的使用div。 ...
    林云流水閱讀 388評論 0贊 1
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定（選定）要進行樣式設定的標簽（元素）”。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,610評論 0贊 6