2. 程式人生 > >前端基礎之CSS-Day13

前端基礎之CSS-Day13

阿新 • • 發佈：2017-12-31
r語 基於 float 不但 contain 自身 luci 子div cpp

1、CSS 語法

1.1、CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

    selector {
              property: value;
              property: value;
         ...  property: value
     
      }

例如：

h1 {color:red; font-size:14px;}

技術分享圖片

2、css的四種引入方式

2.1、行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優勢，不推薦使用。

<p style="hello yuan</p>

2.2、嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：

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

2.3、鏈接式

將一個.css文件引入到HTML文件中

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

2.4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法如下：    

<style type="text/css">
 
          @import"mystyle.css"; 此處要註意.css文件的路徑
 
</style>　

註意：

  導入式會在整個網頁裝載完後再裝載CSS文件，因此這就導致了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用鏈接式時與導入式不同的是它會以網頁文件主體裝載前裝載CSS文件，因此顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是鏈接式的優點。

3、css選擇器

3.1、基本選擇器

技術分享圖片

3.2、組合選擇器

E,F   多元素選擇器，同時匹配所有E元素或F元素，

E和F之間用逗號分隔      :div,p { color:#f00; }
 
E F   後代元素選擇器，匹配所有屬於E元素後代的F元素，

E和F之間用空格分隔 :li a { font-weight:bold;｝
 
E > F   子元素選擇器，匹配所有E元素的子元素

F            :div > p { color:#f00; }
  
E + F   毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素

F  :div + p { color:#f00; } 
 
E ~ F   普通兄弟選擇器（以破折號分隔）                 
:.div1 ~ p{font-size: 30px; }

註意，關於標簽嵌套：

一般，塊級元素可以包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。需要註意的是，p標簽不能包含塊級標簽。

3.3、屬性選擇器

E[att]          匹配所有具有att屬性的E元素，不考慮它的值。（註意：E在此處可以省略。
                比如“[cheacked]”。以下同。）   p[title] { color:#f00; }
 
 
E[att=val]      匹配所有att屬性等於“val”的E元素   div[class=”error”] { color:#f00; }
 
 
E[att~=val]     匹配所有att屬性具有多個空格分隔的值、其中一個值等於“val”的E元素
                td[class~=”name”] { color:#f00; }
 
E[attr^=val]    匹配屬性值以指定值開頭的每個元素                    
                div[class^="test"]{background:#ffff00;}
 
E[attr$=val]    匹配屬性值以指定值結尾的每個元素    div[class$="test"]{background:#ffff00;}
 
E[attr*=val]    匹配屬性值中包含指定值的每個元素    div[class*="test"]{background:#ffff00;}

3.4、偽類

anchor偽類：專用於控制鏈接的顯示效果(只適用於a標簽)
a:link（沒有接觸過的鏈接）,用於定義了鏈接的常規狀態。

a:hover（鼠標放在鏈接上的狀態）,用於產生視覺效果。

a:visited（訪問過的鏈接）,用於閱讀文章，能清楚的判斷已經訪問過的鏈接。

a:active（在鏈接上按下鼠標時的狀態）,用於表現鼠標按下時的鏈接狀態。

偽類選擇器 : 偽類指的是標簽的不同狀態:

           a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態

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

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

a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */

a:active {color: #0000FF} /* 選定的鏈接 */ 格式: 標簽:偽類名稱{ css代碼; }
示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        a:link{
            color: green;
        }
        a:hover{
            color: red;
        }
        a:active{
            color: gold;
        }
        a:visited{
            color: rebeccapurple;
        }

    </style>
</head>
<body>
<a href="">hello world</a>
</body>
</html>

3.5、before after偽類

:before    p:before       在每個<p>元素之前插入內容     
:after     p:after        在每個<p>元素之後插入內容     

例：p:before{content:"hello";color:red;display: block;}
選擇器的優先級　
示例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:after{
            content: "hello p";
            color: red;
            display: block;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<p>i am p</p>
</body>
</html>
註意：

操作標簽必須是懸浮標簽的子元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
        .c2{
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .box:hover .c1{/*註意：操作標簽必須是懸浮標簽
        的子集，如果將懸浮標簽換成c2將不會出現該效果*/
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="c1"></div>
    <div class="c2"></div>
</div>
</body>
</html>

4、css的繼承

繼承是CSS的一個主要特征，它是依賴於祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

這段文字都繼承了由body {color:red;}樣式定義的顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

body{color:red;}       <p>hellostone</p>



p{color:green}
發現只需要給加個顏色值就能覆蓋掉它繼承的樣式顏色。
由此可見：任何顯示申明的規則都可以覆蓋其繼承樣式。　

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

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

5、css的優先級

所謂CSS優先級，即是指CSS樣式在瀏覽器中被解析的先後順序。

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高  style=""－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。  #id －－－－－－－100

3 統計選擇符中的CLASS屬性個數。  .class －－－－－－10

4 統計選擇符中的HTML標簽名個數。  p －－－－－-－1

按這些規則將數字符串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較。

優先級一樣的按照順序離標簽近以下覆蓋上

需要註意的地方：

　　1、文內的樣式優先級為1000，所以始終高於外部定義。

　　2、有!important聲明的規則高於一切。

　　3、如果!important聲明沖突，則比較優先權。

　　4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。

　　5、由繼承而得到的樣式沒有specificity的計算，它低於一切其它規則(比如全局選擇符*定義的規則)。

小結：

優先級由高到低：

（1）有！important情況最大

（2）內嵌：1000 id=100 class="10" ele:1,加一下最後的優先級，誰大聽誰

（3）if優先級相同，按順序來：下覆蓋上。

5.1、css屬性操作

css text

文本顏色：color

顏色屬性被用來設置文字的顏色。

顏色是通過CSS最經常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如:  red
p { color: rebeccapurple;  }

水平對齊方式

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

left      把文本排列到左邊。默認值：由瀏覽器決定。
right    把文本排列到右邊。
center 把文本排列到中間。
justify 實現兩端對齊文本效果。

5.2、文本其它屬性

font-size: 10px;

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-decoration:none       text-decoration 屬性用來設置或刪除文本的裝飾。主要是用來刪除鏈接的下劃線

font-family: ‘Lucida Bright‘

font-weight: lighter/bold/border/

font-style: oblique

text-indent: 150px;      首行縮進150px

letter-spacing: 10px;  字母間距

word-spacing: 20px;  單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫

6、背景屬性

6.1、屬性介紹

background-color
background-image
background-repeat
background-position

background-color: cornflowerblue
 
background-image: url(‘1.jpg‘);
 
background-repeat: no-repeat;(repeat:平鋪滿)
 
background-position: right top（20px 20px）;
簡寫

background:#ffffff url(‘1.png‘) no-repeat right top;
邊框屬性

6.2、邊框屬性介紹

border-width
border-style (required)
border-color
border-style: solid;
  
border-color: chartreuse;
  
border-width: 20px;
簡寫：border: 30px rebeccapurple solid;
邊框-單獨設置各邊

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

6.3、列表屬性

list-style-type         設置列表項標誌的類型。
list-style-image    將圖象設置為列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
 
list-style          簡寫屬性。用於把所有用於列表的屬性設置於一個聲明中
ist-style-type屬性指定列表項標記的類型：

ul { list-style-type: square; }
使用圖像來替換列表項的標記:

ul {
     list-style-image: url(‘‘);
            }

6.4、dispaly屬性

none

block

inline

inline-block

none(隱藏某標簽)

p{display:none;}
註意與visibility:hidden的區別：

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

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

block(內聯標簽設置為塊級標簽)

span {display:block;}
註意：一個內聯元素設置為display:block是不允許有它內部的嵌套塊元素。　
inline(塊級標簽設置為內聯標簽)
li {display:inline;}
inline-block
display:inline-block可做列表布局，其中的類似於圖片間的間隙小bug可以通過如下設置解決：
#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

7、外邊距(margine)和內邊距(padding)

7.1、盒子模型

技術分享圖片

margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
padding:           用於控制內容與邊框之間的距離；   
Border(邊框):     圍繞在內邊距和內容外的邊框。
Content(內容):   盒子的內容，顯示文本和圖像。
margine(外邊距)

7.2、單邊外邊距屬性：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

簡寫屬性　

margin:10px 20px 20px 10px；

    上邊距為10px
    右邊距為20px
    下邊距為20px
    左邊距為10px

margin:10px 20px 10px;

    上邊距為10px
    左右邊距為20px
    下邊距為10px

margin:10px 20px;

    上下邊距為10px
    左右邊距為20px

margin:25px;

    所有的4個邊距都是25px

7.3、居中應用

margin: 0 auto;
padding(內邊距)

單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

設置同margine；

7.4、思考1:body的外邊距

邊框在默認情況下會定位於瀏覽器窗口的左上角，但是並沒有緊貼著瀏覽器的窗口的邊框，這是因為body本身也是一個盒子（外層還有html），在默認情況下，   body距離html會有若幹像素的margin，具體數值因各個瀏覽器不盡相同，所以body中的盒子不會緊貼瀏覽器窗口的邊框了，為了驗證這一點，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}
>>>>解決方法：

body{
    margin: 0;
}

7.5、思考2：margin collapse（邊界塌陷或者說邊界重疊）

  • 兄弟div：
    上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裏最大值作為顯示值

  • 父子div：
    if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個標簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；

解決方法：

overflow: hidden;　

7.6、float屬性

基本浮動規則

先來了解一下block元素和inline元素在文檔流中的排列方式。

　　block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；

　　inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。

常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麽A元素會跟隨在上一個元素的後邊(如果一行放不下這兩個元素，那麽A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那麽A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。 浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。

非完全脫離文檔流

左右結構div盒子重疊現象，一般是由於相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導致DIV不是在同個“平面”上，但內容不會造成覆蓋現象，只有DIV形成覆蓋現象。

解決方法：

要麽都不使用浮動；要麽都使用float浮動；要麽對沒有使用float浮動的DIV設置margin樣式。

父級坍塌現象

例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container產生了重疊，但文本內容沒有發生覆蓋，只有div發生覆蓋現象。這個原因是因為第一個大盒子裏的子元素使用了浮動，脫離了文檔流，導致.container沒有被撐開。box3認為.container沒有高度（未被撐開），因此跑上去了。

解決方法：

1、固定高度

給.container設置固定高度，一般情況下文字內容不確定多少就不能設置固定高度，所以一般不能設置“.container”高度(當然能確定內容多高，這種情況下“.container是可以設置一個高度即可解決覆蓋問題。

或者給.container加一個固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

但是這樣限定固定高度會使頁面操作不靈活，不推薦！

2、清除浮動(推薦)。

clear語法：
clear : none | left | right | both

取值：
none : 默認值。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象

但是需要註意的是：clear屬性只會對自身起作用，而不會影響其他元素。

把握住兩點：

  • 1、元素是從上到下、從左到右依次加載的。

  • 2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

  • 3、overflow:hidden

    overflow：hidden的含義是超出的部分要裁切隱藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明確設定包含容器高度的情況下，它要計算內容的全部高度才能確定在什麽位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

7.7、position(定位)

7.7.1、static

static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。

7.7.2、position: relative／absolute

relative: 相對定位。

相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

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

7.7.3、absolute: 絕對定位。

定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設置了position屬性，例如position:relative;，那麽子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那我子元素就設置position:absolute;父元素設置position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。

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

總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。

7.7.4、position:fixed

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 註意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。

1、默認的高度和寬度問題

（1）父子都是塊級元素

這時，子元素設置為了父元素width的100%，那麽子元素的寬度也是500px；

　　但是如果我們把子元素的width去掉之後，就會發現子元素還是等於父元素的width。也就是說，對於塊級元素，子元素的寬度默認為父元素的100%。

當我們給子元素添加padding和margin時，可以發現寬度width是父元素的寬度減去子元素的margin值和padding值。

　　毫無疑問，如果去掉子元素的height，就會發先子元素的高度為0，故height是不會為100%的，一般我們都是通過添加內容（子元素）將父元素撐起來。

（2）父：塊級元素 子：內聯元素

如果內聯元素是不可替換元素（除img，input以外的一般元素），元素是沒有辦法設置寬度的，也就談不上100%的問題了。 即內聯元素必須依靠其內部的內容才能撐開。

如果內聯元素是可替換元素（img，input，本身可以設置長和寬），不管怎麽設置父元素的寬度和高度，而不設置img的寬和高時，img總是表現為其原始的寬和高。

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        img{
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img class="son" src="s1.jpg"></img>
    </div>
</body>
</html>

由此我們可以發現，雖然沒有設置寬度，但是表現在瀏覽器上為160px，它並沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。 同樣， 如果只設置width，那麽height也會等比例改變。 如果我們把img的width設置為100%，就可以發現其寬度這時就和父元素的寬度一致了。而我們一般的做法時，首先確定img的父元素的寬度和高度，然後再將img的寬度和高度設置位100%，這樣，圖片就能鋪滿父元素了。

好文要頂 關註我 收藏

前端基礎之CSS-Day13

相關推薦

前端基礎之CSS-Day13

r語 基於 float 不但 contain 自身 luci 子div cpp 1、CSS 語法 1.1、CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。 selector { property: value;

前端基礎之CSS

strong 解耦 技術分享 查找 lan span htm src body CSS：對html標簽進行批量渲染的，一般分兩步 1、進行查找標簽 2、操作標簽； 1、查找標簽： 2、操作標簽： css樣式層疊的引入方式： 1、行內引入：只能對單一標簽進行CSS

前端基礎之css復習

play 平鋪 city port 空格 ul li input 現實 進行 !/usr/bin/env python# -*- coding: utf-8 -*-#前端基礎之CSS#CSS 語法#CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。‘‘‘

python學習_day52_前端基礎之CSS布局3

兩個 表示 sans ucid grand -i 參照物 原始的 doctype 一、定位屬性position 1、相對定位relative 　　相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著

CSS之旅:前端基礎之CSS

dot bms 布局 兩個 vbr 元素定位 padding 占滿 one CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。 CSS語

前端—CSS基礎 前端基礎之CSS

前端基礎之CSS   CSS介紹 CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。 當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。 CSS語法 CSS例項 每

軟件測試必備-前端知識點之css基礎及ps的用法

tro inf 軟件測試 blog gpo color 自己 ont 測量 CSS 一、 css定義 css樣式表、層疊樣式表，級聯樣式表 二、 css基礎語法 1、 寫style標簽，放在head標簽裏面的最後位置 2、 自己寫的css代碼，放在style標簽

前端開發之CSS基礎知識02

類選擇器 bsp top osi 文本 層疊 das chm rgba 重要： 行內元素中只能容納文本或其他的行內元素 a標簽例外 文字類型的塊標簽，不要放其他塊元素 如 P H1 CSS規範： .demo {} 空格 font-size: 12px; 空格 .

前端基礎HTML基礎之CSS

一、id選擇器、class選擇器、標籤選擇器、屬性選擇器、組合選擇器 　　設定css樣式有三種，第一種是通過在head中style定義選擇器，寫css樣式 　　第二種通過在標籤中新增屬性的方式定義css樣式 style=“background-color：black” 　　第三中方式通過定義css樣式表

前端基礎之html

html meta pic working -s 標題欄 塊級元素 加載 客戶端 css樣式 HTML 初識 web服務本質 import socket def main(): sock = socket.socket(socket.AF_I

前端基礎之JavaScript

內置 html網頁 網頁 解釋 它的 style java htm 解釋器 一、JavaScript概念 JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。 它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶

前端基礎學習css

前端基礎學習css一、偽類anchor用於控制鏈接效果a:link (沒有訪問過的鏈接)，定義鏈接的常規狀態a:hover(鼠標放在鏈接上的狀態)，用於控制顯示效果 （常用）a:visited(訪問過的鏈接) ，能清楚判斷訪問過的鏈接a:active(在鼠標按下時的狀態)例子：Title.{

前端基礎之JavaScript-day14

script 支持 rar 日期和時間 動態類型語言 第14天 mat switch 整體 寫在前面 上課第14天，打卡： 　　　　唯心不易，堅持！ 參考：http://www.cnblogs.com/yuanchenqi/articles/6893904.

前端基礎之jQuery

它的 是否 屬性選擇器 mat fadein form 內部 ops -html 概述 jQuery是目前使用最廣泛的javascript函數庫。據統計，全世界排名前100萬的網站，有46%使用jQuery，遠遠超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。 jQ

前端基礎之JavaScript對象

定義 local 表示 ret 整體 fine call array 期望 一.簡單介紹 　　在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量 　　以創建對象的方式定義變量 　　var aa=Num

【WEB前端系列之CSS】CSS3動畫之Tranition

transform log 值變化 mozilla 大眾 適應 int 處理 中一 前言 css中的transition允許css的屬性值在一定的時間區間內平滑的過渡。這種效果可以在鼠標點擊、獲得焦點、被點擊或對元素任何改變中觸發，並圓滑的以動畫效果改變CSS的屬性值。語法

前端基礎之JavaScript重點之DOM&BOM

接收 eight 顯示 prev doc 事情 event對象 iou 關閉 重點來了 : BOM對象 window對象 : 所有瀏覽器都支持window對象. 概念上講 : 一個html文檔對應一個window對象. 功能上講 : 控制瀏覽器窗口的. 使用上講 : wi

進擊的Python【第十六章】：Web前端基礎之jQuery

name cat 隱藏 function wid get val 綁定 des 進擊的Python【第十六章】：Web前端基礎之jQuery 一、什麽是 jQuery ？ jQuery是一個JavaScript函數庫。 jQuery是一個輕量級的"寫的少，做的多"的Java

前端基礎之 html

ctype 取值 解析 adding 成對 不同 clas dbo eight ---恢復內容開始--- web服務本質 html 定義 　　超文本標記語言。是通過標簽語言來標記要顯示的網頁中的各個部分。一套瀏覽器認識的規則。 結構 　　1.<html><

python學習_day54_前端基礎之js（2）

data 截取 定義 得到 let 結果 是什麽 index 插入 　　在JavaScript中除了null和undefined以外其他的數據類型都被定義成了對象，也可以用創建對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScri