整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
信我或關注微信號：獅范兒，回復：學習，獲取免費學習資源包。
在我們平時網頁中，想必大家一定用過border，可以根據border給我們提供的各種屬性實現盒子的邊框效果，那么今天就給大家分享一下邊框的應用。
01
常規姿勢
在CSS1中就定義了邊框樣式屬性：border設置全部或指定具體邊框樣式。具體包括指定樣式：寬度：width、樣式：style（none、solid、dotted、dashed等）、顏色：color。可以通過border統一設置邊框樣式，也可以通過border-left:width style color獨立設置邊框樣式。這部分相對比較簡單，下面我們來使用div示例及樣式展示一下基本設置方法：
02
特殊姿勢
我們都知道，標準盒子模型的大小會受content（width,height）、padding、border的影響，所以，即使一個盒子未設置內容大小，只要有邊框或內邊距，盒子也是會有大小的。我們就從這里出發，假若盒子未設置寬度和高度，我們給盒子增加了邊框大小為10px,給每邊邊框設置不同的顏色來看一下：
假使只有上邊框有顏色，其他邊框的顏色均為透明：
此時我們就會得到一個三角小圖標，是不是感覺很神奇。
再比如，我們給盒子設置width，再來觀察下，你就會發現你得到了一個梯形。
03
借助其他樣式合并輸出姿勢
border邊框還能與border-radius一起來做出我們希望效果。例如：
再做一個月亮給你呀：
再送你一朵小花花：
最后做一個火熱的愛心送給你呀~~
私信我或關注微信號：獅范兒，回復：學習，獲取免費學習資源包。
. CSS指的是下列( B )的縮寫。
A. Computer Style Sheets
B. Cascading Style Sheets
C. Creative Style Sheets
D. Colorful Style Sheets
2在HTML文檔中.應該在下列哪個部分引用外部樣式表? (D)
A.文檔的末尾
B.<title>部分
C.<body>部分
D.<head>部分
3.在以下的語句中，正確引用外部樣式表的語句是（B）
A. <style src=" mystyle. css">
B. <link rel= "stylesheet" type=" text/css" href= "mystyle. css" >
C. <stylesheet> mystyle.css</stylesheet>
D. <link src=" mystye. css">
4. 下列哪個屬性是用來定義內聯樣式的? (D )
A.font
B.class
C.styles
D.style
5.下列正確地在CSS文件中插人注釋的語句是(C )
A. // this is a comment
B. // this is a comment //
C./* this is a comment * /
D. 'this is a comment
6.下列符合CSS語法的正確語句是( C )。
A.body :color = black
B.{body;color:black}
C.body {color: black;}
D.{body :color= black}
7. 下列代碼中能夠將所有p 標記內文字加粗的是(D)。
A. <p style =" text-size : bold" >
B. <p style =" font-size :bold">
C. p{text-size : bold}
D. p{font-weight :bold}
8.下列CSS屬性中，控制文本尺寸的屬性是( A )。
A. font-size
B. text-style
C. font-style
D.text-size9
9.在CSS的長度單位中,1 pc 等于多少pt? ( C)
A.8
B.10
C.12
D.14
10. 改變某個元素的文本顏色的CSS屬性是(C )。
A. text-color
B. Fgcolor
C. color
D. text-color
11.下列可用于改變頁面背景顏色的屬性是(B )。
A. bgcolor
B. background-color
C. color
D. backcolor
12.下列語句中，顯示沒有下畫線的超鏈接的語句是( A) 。
A. a{ text-decoration : none }
B. a{text-decoration : no underline}
C. a {underline :none}
D. a {decoration:no underline}
13.下列哪個樣式能夠顯示這樣一個邊框:上邊框 10像素、下邊框5像素，左邊框20像素，右邊邊框1像素（D）
A. border-width:10px 5px 20px 1px
B. border-width:10px 20px 5px 1px
C. border-width:5px 20px 10px 1px
D. border-width:10px 1px 5px 20px
14.下列哪個語句是設置活動狀態超鏈接顏色的?(D)
A. a:link { color: #FF0000 }
B. a:visited{color: #00FF00C}
C. a:hover { color: #FFCC00 }
D. a:active {color: #0000FF}
15.CSS主要用下列哪個HTML標記構建頁面布局?(B)
A. <dir>
B. <div>
C. <dif>
D. <dis>
計算機二級Web（4）：CSS基礎 （下）
計算機二級Web（4）：CSS基礎 （上）
一步：繪制出一個小正方形
1、html代碼
<div class="ico"> </div>
2、css代碼
.ico{ width:50px;height:50px; background:red; }產生結果：
第二步：給小正方形加上不同的邊框顏色
1、css樣式
.ico{width:50px; height:50px; background:red; /*新增內容*/ border:20px solid blue;}產生的結果：
第三步：給上邊框單獨加上一個顏色
1、css樣式
.ico{width:50px;height:50px; background:red; border:20px solid #6600ff;/*新增內容*/border-top:20px solid #000000;}產生的結果：
第四步：把長方形的寬度和高度從原來的50px 改為0px
1、css樣式
.ico{/*--修改部分*/width:0px; height:0px; background:red; border:20px solid #6600ff; border-top:20px solid #000000;}產生的結果：
第五步：把邊框的顏色設置為透明的，只留上邊框的顏色為黑色
1、css樣式
.ico{width:0px;height:0px; background:red; /*修改的樣式*/border:20px solid transparent;;border-top:20px solid #000000;}產生的結果：
解釋：當邊框變為transparent透明后，出現紅色的區塊，是因為我們在構建長方形時加紅色的背景 background:red，最后一步，去掉background:red；就可以了
第六步：把background:red；去掉
.ico{width:0px;height:0px; /*background:red;*/ border:20px solid transparent;border-top:20px solid #000000;}產生的結果：
終于一個完整的三角形制作出來了，寫的步聚有點多，主要是想讓大家看到這個三角形是如何演變而來的。
如果沒有看懂，或有代碼方面問題的，可以加群：611428142 來聽我講課吧
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
