CSS常用樣式及示例

本文轉載自查看原文 2016-08-20 09:31 5125 前端

　　　　　　　　　　CSS常用樣式及示例

一、簡介

層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現 HTML（標准通用標記語言的一個應用）或 XML（標准通用標記語言的一個子集）等文件樣式的計算機語言。

CSS目前最新版本為 CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人群，有較強的易讀性。

二、常用示例

1.存在形式

a:直接在div中設置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <!--設置背景顏色，文本顏色-->
 9     <div style="background-color: red;color: black">88</div>
10 </body>
11 </html>

結果：

b:放置在HTML頭部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         div{
 8             background-color: red;
 9             color: black;
10         }
11     </style>
12 </head>
13 <body>
14     <div >88</div>
15 </body>
16 </html>

結果為：

c:存放在文件中

定義CSS文件Commons

引入文件：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="Commons.css">#引用文件
 7 </head>
 8 <body>
 9     <div >88</div>
10 </body>
11 </html>

結果：

優先級:

css標簽內-->文件頭部-->文件，依次從高到低。這里不展示示例，可以自己動手查看結果。

2.CSS標簽選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         /*<!--標簽選擇器-->*/
 8         div{
 9             color: green;
10         }
11         /*ID選擇器*/
12         #i1{
13             font-size: 56px;
14         }
15         /*class選擇器*/
16         .c1{
17             background-color: white;
18         }
19         /*層級選擇器*/
20         .c1 div p .c3{
21            color: red;
22             font-size: 56px;
23         }
24         /*組合選擇器*/
25         .c4,.c5,.c6{
26             background-color: rebeccapurple;
27         }
28         /*屬性選擇器*/
29         .c1[alex='123']{
30             color: red;
31 
32         }
33     </style>
34 </head>
35 <body>
36     <div class="c4"></div>
37     <div class="c5"></div>
38     <div class="c6"></div>
39     <hr/>
40     <!--/*class選擇器*/-->
41     <span class="c1">1</span>
42     <span class="c1">2</span>
43     <span class="c1">3</span>
44     <!--/*ID選擇器*/-->
45     <a id="i1">baidu</a>
46     <hr/>
47      /*<!--標簽選擇器-->*/
48     <div>99</div>
49     <div>99</div>
50     <div>99</div>
51     <div>99</div>
52     <div class="c1">test
53         <div>
54             <p>
55             <!--<p>  /*層級選擇器*/-->
56                 <span class="c3">888888888888</span>
57             </p>
58         </div>
59     </div>
60           /*屬性選擇器*/
61     <div class="c1" alex="123" > alex--test</div>
62     <div class="c1" > alex--test</div>
63 </body>
64 </html>

顯示結果：

3.基本樣式

3.1顯示背景顏色

 1 <html>
 2 <head>
 3 
 4 <style type="text/css">
 5 
 6 body {background-color: yellow}
 7 h1 {background-color: #00ff00}
 8 h2 {background-color: transparent}
 9 p {background-color: rgb(250,0,255)}
10 
11 p.no2 {background-color: gray; padding: 20px;}
12 
13 </style>
14 
15 </head>
16 
17 <body>
18 
19 <h1>這是標題 1</h1>
20 <h2>這是標題 2</h2>
21 <p>這是段落</p>
22 <p class="no2">這個段落設置了內邊距。</p>
23 
24 </body>
25 </html>

結果：

3.2設置文本顏色

 1 <html>
 2 <head>
 3 <meta charset="utf-8" />
 4 <style type="text/css">
 5 span.highlight
 6 {
 7 background-color:yellow
 8 }
 9 </style>
10 </head>
11 
12 <body>
13 <p>
14 <span class="highlight">這是文本。</span> 這是文本。 這是文本。 <span class="highlight">這是文本。</span>
15 </p>
16 </body>
17 </html>

結果：

3.3設置背景圖片(背景圖片重復)

 1 <html>
 2 <head>
 3 <meta charset="utf-8" />
 4 <style type="text/css">
 5 body {background-image:url(2.jpg);
 6       }
 7 </style>
 8 </head>
 9 
10 <body>
11 <p>
12 <span class="highlight">這是文本。</span> 這是文本。 這是文本。 <span class="highlight">這是文本。</span>
13 </p>
14 </body>
15 </html>

3.4背景圖片不重復

 1 <html>
 2 <head>
 3 <meta charset="utf-8" />
 4 <style type="text/css">
 5 body {background-image:url(2.jpg);
 6       background-repeat:no-repeat }
 7 </style>
 8 </head>
 9 
10 <body>
11 <p>
12 <span class="highlight">這是文本。</span> 這是文本。 這是文本。 <span class="highlight">這是文本。</span>
13 </p>
14 </body>
15 </html>

3.5圖片頁面固定

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 body
 5 { 
 6   background-image:url('/i/eg_bg_03.gif');
 7   background-repeat:no-repeat;
 8   background-attachment:fixed;
 9   background-position:center;
10 }
11 </style>
12 </head>
13 
14 <body>
15 <body>
16 <p><b>提示：</b>您需要把 background-attachment 屬性設置為 "fixed"。</p>
17 </body>
18 </body>
19 </html>

3.6使用%設置固定圖片大小

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 body
 5 { 
 6 background-image: url('/i/eg_bg_03.gif');
 7 background-repeat: no-repeat;
 8 background-attachment:fixed;
 9 background-position: 30% 20%; 
10 }
11 </style>
12 </head>
13 
14 <body>
15 <p><b>注釋：</b>為了在 Mozilla 中實現此效果，background-attachment 屬性必須設置為 "fixed"。</p>
16 </body>
17 </html>

3.7 將背景屬性放在一個申明里面

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 body
 5 { 
 6 background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 <p>這是一些文本。</p>
13 <p>這是一些文本。</p>
14 <p>這是一些文本。</p>
15 <p>這是一些文本。</p>
16 <p>這是一些文本。</p>
17 <p>這是一些文本。</p>
18 <p>這是一些文本。</p>
19 <p>這是一些文本。</p>
20 
21 </body>
22 
23 </html>

3.8設置文本顏色及文本背景顏色

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 body {color:red}
 5 h1 {color:#00ff00}
 6 p.ex {color:rgb(0,0,255)}
 7 span.highlight
 8 {
 9 background-color:yellow
10 }
11 </style>
12 </head>
13 
14 <body>
15 <p>
16 <span class="highlight">這是文本。</span> 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 這是文本。 <span class="highlight">這是文本。</span>
17 </p>
18 <h1>這是 heading 1</h1>
19 <p>這是一段普通的段落。請注意，該段落的文本是紅色的。在 body 選擇器中定義了本頁面中的默認文本顏色。</p>
20 <p class="ex">該段落定義了 class="ex"。該段落中的文本是藍色的。</p>
21 </body>
22 </html>

3.9設置字體大小

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 h1 {font-size: 300%}
 5 h2 {font-size: 200%}
 6 p {font-size: 100%}
 7 </style>
 8 </head>
 9 
10 <body>
11 <h1>This is header 1</h1>
12 <h2>This is header 2</h2>
13 <p>This is a paragraph</p>
14 </body>
15 
16 </html>

3.10將邊框屬性寫在同一個申明里

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p 
 5 {
 6 border: medium double rgb(250,0,255)
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 <p>Some text</p>
13 </body>
14 
15 </html>

3.11設置四邊框樣式

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p.dotted {border-style: dotted}
 5 p.dashed {border-style: dashed}
 6 p.solid {border-style: solid}
 7 p.double {border-style: double}
 8 p.groove {border-style: groove}
 9 p.ridge {border-style: ridge}
10 p.inset {border-style: inset}
11 p.outset {border-style: outset}
12 </style>
13 </head>
14 
15 <body>
16 <p class="dotted">A dotted border</p>
17 
18 <p class="dashed">A dashed border</p>
19 
20 <p class="solid">A solid border</p>
21 
22 <p class="double">A double border</p>
23 
24 <p class="groove">A groove border</p>
25 
26 <p class="ridge">A ridge border</p>
27 
28 <p class="inset">An inset border</p>
29 
30 <p class="outset">An outset border</p>
31 </body>
32 
33 </html>

3.12設置每一邊的邊框

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p.soliddouble {border-style: solid double}
 5 p.doublesolid {border-style: double solid}
 6 p.groovedouble {border-style: groove double}
 7 p.three {border-style: solid double groove}
 8 </style>
 9 </head>
10 
11 <body>
12 <p class="soliddouble">Some text</p>
13 
14 <p class="doublesolid">Some text</p>
15 
16 <p class="groovedouble">Some text</p>
17 
18 <p class="three">Some text</p>
19 </body>
20 
21 </html>

3.13設置下邊框顏色(左右上類似)

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p 
 5 {
 6 border-style:solid;
 7 border-bottom-color:#ff0000;
 8 }
 9 </style>
10 </head>
11 
12 <body>
13 <p>This is some text in a paragraph.</p>
14 </body>
15 
16 </html>

3.14設置外邊距(厘米，像素，%都可以)

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p.leftmargin {margin-left: 2cm}
 5 </style>
 6 </head>
 7 
 8 <body>
 9 <p>這個段落沒有指定外邊距。</p>
10 <p class="leftmargin">這個段落帶有指定的左外邊距。</p>
11 </body>
12 
13 </html>

3.15設置內邊距（厘米，像素，%都可以）

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 td
 5 {
 6 padding-bottom: 10%
 7 }
 8 </style>
 9 </head>
10 <body>
11 
12 <table border="1">
13 <tr>
14 <td>
15 這個表格單元擁有下內邊距。
16 </td>
17 </tr>
18 </table>
19 
20 </body>
21 </html>

3.14合並表格邊框

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html>
 3 <head>
 4 <style type="text/css">
 5 table
 6   {
 7   border-collapse:collapse;
 8   }
 9 
10 table, td, th
11   {
12   border:1px solid black;
13   }
14 </style>
15 </head>
16 
17 <body>
18 <table>
19 <tr>
20 <th>Firstname</th>
21 <th>Lastname</th>
22 </tr>
23 <tr>
24 <td>Bill</td>
25 <td>Gates</td>
26 </tr>
27 <tr>
28 <td>Steven</td>
29 <td>Jobs</td>
30 </tr>
31 </table>
32 <p><b>注釋：</b>如果沒有規定 !DOCTYPE，border-collapse 屬性可能會引起意想不到的錯誤。</p>
33 </body>
34 </html>

3.16把段落元素設置為內聯元素

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p {display: inline}
 5 div {display: none}
 6 </style>
 7 </head>
 8 
 9 <body>
10 <p>本例中的樣式表把段落元素設置為內聯元素。</p>
11 
12 <p>而 div 元素不會顯示出來！</p>
13 
14 <div>div 元素的內容不會顯示出來！</div>
15 </body>
16 </html>

3.17把 span 元素設置為塊級元素

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 span
 5 {
 6 display: block
 7 }
 8 </style>
 9 </head>
10 <body>
11 
12 <span>本例中的樣式表把 span 元素設置為塊級元素。</span>
13 <span>兩個 span 元素之間產生了一個換行行為。</span>
14 
15 </body>
16 </html>

3.18浮動簡單應用

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 img 
 5 {
 6 float:right
 7 }
 8 </style>
 9 </head>
10 
11 <body>
12 <p>在下面的段落中，我們添加了一個樣式為 <b>float:right</b> 的圖像。結果是這個圖像會浮動到段落的右側。</p>
13 <p>
14 <img src="/i/eg_cute.gif" />
15 This is some text. This is some text. This is some text.
16 This is some text. This is some text. This is some text.
17 This is some text. This is some text. This is some text.
18 This is some text. This is some text. This is some text.
19 This is some text. This is some text. This is some text.
20 This is some text. This is some text. This is some text.
21 This is some text. This is some text. This is some text.
22 This is some text. This is some text. This is some text.
23 This is some text. This is some text. This is some text.
24 This is some text. This is some text. This is some text.
25 </p>
26 </body>
27 
28 </html>

3.19創建水平菜單

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 ul
 5 {
 6 float:left;
 7 width:100%;
 8 padding:0;
 9 margin:0;
10 list-style-type:none;
11 }
12 a
13 {
14 float:left;
15 width:7em;
16 text-decoration:none;
17 color:white;
18 background-color:purple;
19 padding:0.2em 0.6em;
20 border-right:1px solid white;
21 }
22 a:hover {background-color:#ff3300}
23 li {display:inline}
24 </style>
25 </head>
26 
27 <body>
28 <ul>
29 <li><a href="#">Link one</a></li>
30 <li><a href="#">Link two</a></li>
31 <li><a href="#">Link three</a></li>
32 <li><a href="#">Link four</a></li>
33 </ul>
34 
35 <p>
36 在上面的例子中，我們把 ul 元素和 a 元素浮向左浮動。li 元素顯示為行內元素（元素前后沒有換行）。這樣就可以使列表排列成一行。ul 元素的寬度是 100%，列表中的每個超鏈接的寬度是 7em（當前字體尺寸的 7 倍）。我們添加了顏色和邊框，以使其更漂亮。
37 </p>
38 
39 </body>
40 </html>

3.20相對定位

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 h2.pos_left
 5 {
 6 position:relative;
 7 left:-20px
 8 }
 9 h2.pos_right
10 {
11 position:relative;
12 left:20px
13 }
14 </style>
15 </head>
16 
17 <body>
18 <h2>這是位於正常位置的標題</h2>
19 <h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
20 <h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
21 <p>相對定位會按照元素的原始位置對該元素進行移動。</p>
22 <p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p>
23 <p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p>
24 </body>
25 
26 </html>

3.21絕對定位

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 h2.pos_abs
 5 {
 6 position:absolute;
 7 left:100px;
 8 top:150px
 9 }
10 </style>
11 </head>
12 
13 <body>
14 <h2 class="pos_abs">這是帶有絕對定位的標題</h2>
15 <p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p>
16 </body>
17 
18 </html>

3.22固定定位

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 p.one
 5 {
 6 position:fixed;
 7 left:5px;
 8 top:5px;
 9 }
10 p.two
11 {
12 position:fixed;
13 top:30px;
14 right:5px;
15 }
16 </style>
17 </head>
18 <body>
19 
20 <p class="one">一些文本。</p>
21 <p class="two">更多的文本。</p>
22 
23 </body>
24 </html>

3.23標簽內頁面固定

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div style="height: 500px;width: 400px;border: 1px solid red;position: relative">
 9 
10         <div style="height: 200px;background-color: red;">
11             <div style="position: absolute;bottom: 0;right: 0;">111</div>
12         </div>
13     </div>
14 </body>
15 </html>

3.24元素不可見

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 h1.visible {visibility:visible}
 5 h1.invisible {visibility:hidden}
 6 </style>
 7 </head>
 8 
 9 <body>
10 <h1 class="visible">這是可見的標題</h1>
11 <h1 class="invisible">這是不可見的標題</h1>
12 </body>
13 
14 </html>

3.25改變光標

 1 <html>
 2 
 3 <body>
 4 <p>請把鼠標移動到單詞上，可以看到鼠標指針發生變化：</p>
 5 <span style="cursor:auto">
 6 Auto</span><br />
 7 <span style="cursor:crosshair">
 8 Crosshair</span><br />
 9 <span style="cursor:default">
10 Default</span><br />
11 <span style="cursor:pointer">
12 Pointer</span><br />
13 <span style="cursor:move">
14 Move</span><br />
15 <span style="cursor:e-resize">
16 e-resize</span><br />
17 <span style="cursor:ne-resize">
18 ne-resize</span><br />
19 <span style="cursor:nw-resize">
20 nw-resize</span><br />
21 <span style="cursor:n-resize">
22 n-resize</span><br />
23 <span style="cursor:se-resize">
24 se-resize</span><br />
25 <span style="cursor:sw-resize">
26 sw-resize</span><br />
27 <span style="cursor:s-resize">
28 s-resize</span><br />
29 <span style="cursor:w-resize">
30 w-resize</span><br />
31 <span style="cursor:text">
32 text</span><br />
33 <span style="cursor:wait">
34 wait</span><br />
35 <span style="cursor:help">
36 help</span>
37 </body>
38 
39 </html>

3.26清除元素

<html>

<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>

<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>

</html>

3.27設置元素形狀

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 img 
 5 {
 6 position:absolute;
 7 clip:rect(0px 50px 200px 0px)
 8 }
 9 </style>
10 </head>
11 
12 <body>
13 <p>clip 屬性剪切了一幅圖像：</p>
14 <p><img border="0" src="/i/eg_bookasp.gif" width="120" height="151"></p>
15 </body>
16 
17 </html>

3.28使用滾動條顯示溢出文本內容

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 div 
 5 {
 6 background-color:#00FFFF;
 7 width:150px;
 8 height:150px;
 9 overflow: scroll
10 }
11 </style>
12 </head>
13 
14 <body>
15 <p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
16 
17 <div>
18 這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。默認值是 visible。
19 </div>
20 </body>
21 
22 </html>

3.29瀏覽器自動處理元素文本溢出

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 div 
 5 {
 6 background-color:#00FFFF;
 7 width:150px;
 8 height:150px;
 9 overflow: auto
10 }
11 </style>
12 </head>
13 
14 <body>
15 <p>如果元素中的內容超出了給定的寬度和高度屬性，overflow 屬性可以確定是否顯示滾動條等行為。</p>
16 
17 <div>
18 這個屬性定義溢出元素內容區的內容會如何處理。如果值為 scroll，不論是否需要，用戶代理都會提供一種滾動機制。因此，有可能即使元素框中可以放下所有內容也會出現滾動條。默認值是 visible。
19 </div>
20 </body>
21 
22 </html>

3.30將一個元素放置在另一個元素背后

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 img.x
 5 {
 6 position:absolute;
 7 left:0px;
 8 top:0px;
 9 z-index:-1
10 }
11 </style>
12 </head>
13 
14 <body>
15 <h1>這是一個標題</h1>
16 <img class="x" src="/i/eg_mouse.jpg" /> 
17 <p>默認的 z-index 是 0。Z-index -1 擁有更低的優先級。</p>
18 </body>
19 
20 </html>

3.31使用固定值設置圖像邊緣

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 img
 5 {
 6 position:absolute;
 7 top:0px
 8 }
 9 </style>
10 </head>
11 <body>
12 
13 <h1>This is a Heading</h1>
14 <img class="normal" src="/i/eg_smile.gif" />
15 <p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
16 
17 </body>
18 </html>

3.32CSS偽類

 1 <html>
 2 <head>
 3 
 4 <style type="text/css">
 5 a:link {color: #FF0000}
 6 a:visited {color: #00FF00}
 7 a:hover {color: #FF00FF}
 8 a:active {color: #0000FF}
 9 </style>
10 
11 </head>
12 
13 <body>
14 
15 <p><b><a href="/index.html" target="_blank">這是一個鏈接。</a></b></p>
16 <p><b>注釋：</b>在 CSS 定義中，a:hover 必須位於 a:link 和 a:visited 之后，這樣才能生效！</p>
17 <p><b>注釋：</b>在 CSS 定義中，a:active 必須位於 a:hover 之后，這樣才能生效！</p>
18 
19 </body>
20 </html>

示例2：

 1 <html>
 2 <head>
 3 <style type="text/css">
 4 a.one:link {color: #ff0000}
 5 a.one:visited {color: #0000ff}
 6 a.one:hover {color: #ffcc00}
 7 
 8 a.two:link {color: #ff0000}
 9 a.two:visited {color: #0000ff}
10 a.two:hover {font-size: 150%}
11 
12 a.three:link {color: #ff0000}
13 a.three:visited {color: #0000ff}
14 a.three:hover {background: #66ff66}
15 
16 a.four:link {color: #ff0000}
17 a.four:visited {color: #0000ff}
18 a.four:hover {font-family: monospace}
19 
20 a.five:link {color: #ff0000; text-decoration: none}
21 a.five:visited {color: #0000ff; text-decoration: none}
22 a.five:hover {text-decoration: underline}
23 </style>
24 </head>
25 
26 <body>
27 <p>請把鼠標移動到這些鏈接上，以查看效果：</p>
28 
29 <p><b><a class="one" href="/index.html" target="_blank">這個鏈接改變顏色</a></b></p>
30 <p><b><a class="two" href="/index.html" target="_blank">這個鏈接改變字體大小</a></b></p>
31 <p><b><a class="three" href="/index.html" target="_blank">這個鏈接改變背景顏色</a></b></p>
32 <p><b><a class="four" href="/index.html" target="_blank">這個鏈接改變字體系列</a></b></p>
33 <p><b><a class="five" href="/index.html" target="_blank">這個鏈接改變文本裝飾</a></b></p>
34 </body>
35 
36 </html>

CSS遮罩層示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5  <title>DIV CSS遮罩層</title>
 6  <script language="javascript" type="text/javascript">
 7  function showdiv() {
 8  document.getElementById("bg").style.display ="block";
 9  document.getElementById("show").style.display ="block";
10  }
11  function hidediv() {
12  document.getElementById("bg").style.display ='none';
13  document.getElementById("show").style.display ='none';
14  }
15 </script>
16  <style type="text/css">
17  *#bg{ display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}*/
18  *#show{display: none; position: absolute; top: 25%; left: 22%; width: 53%; height: 49%; padding: 8px; border: 8px solid #E8E9F7; background-color: white; z-index:1002; overflow: auto;}*/
19  </style>
20  </head>
21  <body>
22  <input id="btnshow" type="button" value="Show" onclick="showdiv();"/>
23  <div id="bg"></div>
24  <div id="show">測試
25  <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
26  </div>
27  </body>
28  </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS邊框及常用樣式 css常用公共樣式常用公共的css的樣式 CSS常用樣式（四）之animation 常用css樣式(布局) CSS/CSS3常用的樣式常用的reset.css樣式 CSS 常用樣式 – 背景屬性 css常用樣式整理_css屬性大全 CSS/CSS3常用的樣式兼容，樣式總結