上海HTML5開發培訓機構大咖分享html虛線邊框設置教程

習HTML時有時候我們需要用代碼設置邊框或虛線邊框的樣式，那該怎么設置呢？下面上海非凡進修學院HTML5開發培訓機構大咖分享下html虛線邊框設置教程，會對幾個不同標簽加虛線邊框效果樣式，同學們可以根據示例靈活掌握與應用到自己DIV+CSS布局中。

為了對html不同標簽加邊框虛線，我們選擇幾個常用標簽對齊設置邊框虛線效果。

1、html常用標簽

div標簽

span

ul li

table tr td

2、實例用到CSS屬性單詞

border

width

height

3、實現虛線的CSS重點介紹

border為邊框屬性，如果要實現對象邊框效果，要設置邊框寬度、邊框顏色、邊框樣式（實線還是虛線）

border:1px dashed #F00 這個就是設置邊框樣式寬度為1px，虛線，虛線為紅色。

4、實例描述

我們對以上幾個標簽設置相同寬度、相同高度、邊框效果。

5、HTML代碼示例：

以上示例對html中不同標簽設置相同的樣式，包括相同邊框虛線。

上海HTML5開發培訓機構大咖提示邊框三個樣式

通常我們可以對邊框設置寬度（厚度）、邊框樣式、邊框顏色這三個屬性與參數。

1）、邊框顏色：border-color:#000

2）、邊框厚度（寬度）：border-width:1px

使用數字+單位設置邊框厚度寬度，如1px(邊框厚度寬度為1像素)，邊框必須為正數字，大于0的數值。否則設置邊框border樣式無效。

3）、border邊框樣式：border-style:solid

上海HTML5開發培訓機構大咖提示：邊框border樣式值如下：

none :無邊框。與任何指定的border-width值無關

hidden : 隱藏邊框。IE不支持

dotted : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為點線。否則為實線（常用）

dashed : 在MAC平臺上IE4+與WINDOWS和UNIX平臺上IE5.5+為虛線。否則為實線（常用）

solid :實線邊框（常用）

double : 雙線邊框。兩條單線與其間隔的和等于指定的border-width值

groove : 根據border-color的值畫3D凹槽

ridge :根據border-color的值畫菱形邊框

inset : 根據border-color的值畫3D凹邊

outset : 根據border-color的值畫3D凸邊

格式化

>格式化標記通常只能是產生幾種不同文本的樣式，但在語義上它們各自有著自己的特點

>如果你只是想有著一些自己的文本樣式，可以嘗試使用“常用html標記”里格式化的內容或css樣式表

>但是這樣會對搜索引擎不友好

>所以我們強調使用語義化標簽，提供給瀏覽器的語義信息越多，瀏覽器就可以越好地把這些信息展示給用戶。

## `<abbr></abbr>`

作用：用于指示該標簽內的內容是一個縮寫

注意點：

1. 常與全局屬性title配合使用，這樣可以在鼠標移動到該處時顯示全稱

`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

2. 在瀏覽器內渲染會使其在內容底部加上短虛線

## `<address></address>`

作用：用于定義文檔或文章作者/擁有者的聯系信息

>如果 `<address>` 元素位于 `<body>` 元素內，則它表示文檔聯系信息。

>如果 `<address>` 元素位于 `<article>` 元素內，則是它表示文章的聯系信息。

注意點：

1. address元素中的文本通常呈現為斜體，大多數瀏覽器會在address元素前后換行

2. address元素不應該用于描述通訊地址，除非它是練習信息的一部分

3. address元素元素通常連同其他信息被包含在footer元素中

```

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

```

## `<b></b>`

作用：定義粗體文本

## `<bdi></bdi>`

作用：定義文本的文本方向，使其脫離周圍文本的方向設置

注意點：

1. bdi指的是bidi隔離

2. 在發布用戶評論或其它難以控制的內容時，可以使用

3. 需要與全局屬性dir配合使用

## `<bdo></bdo>`

作用：定義文字方向

注意點：

1. 請與全局屬性dir配合使用

```

<p>

如果您的瀏覽器支持 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)；

</p>

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用：`<blockquote>`標簽用于定義塊引用

注意點：

1. 標簽內的所有文本都會從常規文本中分離出來，一般會上下換行，左右增加外邊距，有時也會使用斜體

2. 換而言之，塊引用擁有它們自己的空間

3. 可選屬性：

`cite=url`規定引用來源

```

WWF's ultimate goal is to build a future where people live in harmony with nature.

</blockquote>

```

主流瀏覽器均不支持cite屬性，但是搜索引擎可以因此獲得更多的信息

## `<q></q>`

作用：用于定義短引用

注意點：

1. 瀏覽器經常在引用內容的人左右添加引號

2. `<q>` 與 `<blockquote>` 的區別:

- `<q>` 標簽在本質上與 `<blockquote>` 是一樣的。不同之處在于它們的顯示和應用。`<q>` 標簽用于簡短的行內引用。如果需要從周圍內容分離出來比較長的部分（通常顯示為縮進地塊），請使用 `<blockquote>` 標簽。

3. 在html4中，firefox和opera中q元素包含的文本必須以引號來開始和結束，但是IE卻不支持這個規定，如果我們為了滿足其它瀏覽器而添加了引號，那么在IE中就會顯示兩組引號。

4. 盡管如此，我們還是推薦使用q元素，因為它在文檔處理和信息提取方面將會有很強的效果

5. 可選屬性：

`cite=citation`定義引用的出處或來源（citation）

## `<cite></cite>`

作用：表示所含文本是對某個參考文獻的引用

注意點：

1. 在顯示上與blockquote元素類似，均是斜體

2. 但是它不會有上下左右的外邊距

3. 通常情況下還要把引用包裹在一對`<a></a>`標簽中，然后把超鏈接指向引用

`<cite><a href=URL>引用名</a></cite>`

>`<cite>` 標簽還有一個隱藏的功能：它可以使你或者其他人從文檔中自動摘錄參考書目。我們可以很容易地想象一個瀏覽器，它能夠自動整理引用表格，并把它們作為腳注或者獨立的文檔來顯示。`<cite>` 標簽的語義已經遠遠超過了改變它所包含的文本外觀的作用；它使瀏覽器能夠以各種實用的方式來向用戶表達文檔的內容。

## `<code></code>`

作用：定義計算機代碼文本

注意點：

1. code元素并不能將元素內的內容以原樣顯示，瀏覽器仍然會解析內容而不跳過

2. code只是給內容的字體改為等寬字體，即它只是將內容轉變為暗示這是計算機代碼的內容

## `<var></var>`

作用：`<var>` 標簽表示變量的名稱，或者由用戶提供的值。

注意點：

1. 用 `<var>` 標簽標記的文本通常顯示為斜體。

2. `<var>` 標簽是計算機文檔中應用的另一個小竅門，這個標簽經常與 `<code>` 和 `<pre>` 標簽一起使用，用來顯示計算機編程代碼范例及類似方面的特定元素。

## `<smap></smap>`

作用：用于從一段上下文中抽取一些字符

例子：

`字符序列 <samp>ae</samp> 可能會被轉換為 æ 連字字符。`

效果：

`字符序列 ae 可能會被轉換為 ? 連字字符。`

## `<ins></ins>`

作用：定義一個插入文本

注意點：

1. 顯示效果是加入下劃線

## `<dfn></dfn>`

作用：用于標記特殊術語或短語

注意點：

1. 瀏覽器通常會將dfn元素內的內容顯示為斜體

2. 應當盡量少的使用，比如在技術性的文檔中，在第一次提到一個術語時，可以加上dfn元素，而在相同文檔的后續中，對于同一個術語，應避免使用dfn

## `<em></em>`

作用：定義一個強調文本

注意點：

1. 在顯示結果上，它依然是斜體

2. 如果你只是為了定義一個斜體的內容，可以考慮使用`<i></i>`或css樣式表

3. 對于強調的內容應當不宜過多，否則無法突出想要表達的內容

## `<strong></strong>`

作用：定義一個語氣更加強烈地強調文本

注意點：

1. 常識告訴我們應較少使用em元素的話，那么strong元素出現的次數應該更少，限制其使用可以讓這個標記更加的引人注意和有效

## `<i></i>`

作用：定義一個斜體文本或傾斜的文本

## `<kbd></kbd>`

作用：定義鍵盤文本

注意點：

1. 顯示效果為等寬字體

## `<mark></mark>`(HTML5)

作用：定義帶有記號的文本

注意點：

1. 與加粗不同，它會將文字加上背景色

## `<meter></meter>`(HTML5)

作用：定義已知范圍或分數值內的標量測量，也被稱為gauge（尺度）

注意點：

1. 這是一個html5的新標簽，假如你把文檔類型聲明為html4或以下和xhtml，標簽本身的效果將會受到影響

2. `<meter>`標簽不應用于指示進度條的進度，如果標記進度，請使用`<progress></progress>`標簽

可用屬性：

1. form=form_id-->規定meter元素所屬的一個或多個表單

2. high=number-->規定被視作高的值的范圍

3. low=number-->規定被視作高的值的范圍

4. max=number-->規定范圍的最大值

5. min=number-->規定范圍的最小值

6. optimum=number-->規定度量的優化值

7. value=number-->必須。規定度量的當前值

```

```

## `<progress></progress>`(HTML5)

作用：標示任務的進度（進程）

`<progress value="22" max="100"></progress> `

注意點：

1. 需要與js結合使用，來顯示任務的進度

2. progress標簽不適合使用來表示度量衡，這種情況請使用meter元素來替代

可用屬性：

max=number-->規定任務一共需要多少工作

value=number-->規定任務已經完成多少工作

## `<pre></pre>`

作用：用于定義預格式化的文本，即通常會保留空格和換行，文本會呈現為等寬字體

注意點：

1. pre元素常用于表示計算機的源代碼，但是計算機的源代碼（html）直接放入瀏覽器仍會解析（需要使用`<`和`>`等符號實體）

2. 會導致內容截斷的標簽絕不能包含在pre元素中，如標題、p元素、address元素

3. 可選的屬性：

`width=number`定義每行的最大字符數

## `<ruby></ruby>`

作用：可用于定義一個ruby注釋（中文注音或字符）

注意點：

1. ruby元素與rt元素一同使用

2. ruby元素由需要一組字符和一個提供信息的rt元素組成

3. 還包括一個可選的rp元素，定義瀏覽器不支持ruby元素時顯示的內容

## `<rt></rt>`

作用：定義字符的解釋或發音

## `<rp></rp>`

作用：定義瀏覽器不支持ruby元素時顯示的內容

## `<s></s>`

作用：定義加刪除線的文本

注意點：

1. `<s>`標簽是`<strike>`標簽的縮寫版本，但html4和xhtml中已經不再贊成使用它了，就是說，它早晚有一天會消失

2. 請使用`<del></del>`替代它

## `<del></del>`

作用：給元素中的內容上加上刪除線

注意點：

1. 請與`<ins></ins>`標簽配合使用，來描述文檔中的更新與修正

2. 可選的屬性：

- cite=URL

- datetime=YYYMMDD （定義文本被刪除的日期和時間）

## `<small></small>`

作用：標簽內的元素呈現小號字體的效果

注意點：

1. 如果被包裹字體已經是最小號的字體了，那這個標簽將不起任何作用

2. `<small></small>`是可以嵌套的，從而把文字連續的縮小，直到到達最小的一號字

## `<sup></sup>`

作用：標簽中的內容會以當前文本流中字符高度的一般來顯示（上標）

注意點：

1. 雖然顯示效果與文本流中其他元素不一樣，但是它們的字體字號都是一樣的

2. 這個標簽在向文檔添加注腳以及表示方程式中的指數時非常有效，如果與`<a></a>`標簽結合使用可以創建出很好的超鏈接注腳

## `<sub></sub>`

作用：標簽中的內容會以當前文本流中字符高度的一般來顯示（下標）

## `<template></template>`

作用：可以作為一個容器，但是它并不會存在于DOM樹中

注意點：

1. 多用于包裹一段代碼，對其綁定事件，使其可以控制是否隱藏

2. 一個檢查方法：

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的瀏覽器不支持 template！");

}

```

## `<u></u>`

作用：定義下劃線文本

注意點：

1. 應盡量避免使用，用戶可能會把它混淆為一個超鏈接

## `<time></time>`(HTML5)

作用：定義一個公歷的時間或日期，時間和時區偏移是可選的

可選的屬性：

1. datetime=datetime-->規定日期/時間。否則由元素內容給定日期時間

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 時間是文檔（或 `<article>` 元素）的發布日期。

## `<wbr>`(HTML5)

一段帶有 Word Break Opportunity 的文本：

```

<p>

如果想學習 AJAX，那么您必須熟悉 XML<wbr>Http<wbr>Request 對象。

</p>

```

作用：Word Break Opportunity (`<wbr>`) 規定在文本中的何處適合添加換行符。

注意點：如果單詞太長，或者您擔心瀏覽器會在錯誤的位置換行，那么您可以使用 `<wbr>` 元素來添加 Word Break Opportunity（單詞換行時機）。

到css虛線樣式，應該會想到border的solid，網頁布局中solid用的概率最高了，要有css虛線的效果還可以用圖片做背景，但是不推薦，盡量使用css虛線樣式做這個虛線的效果，那么css虛線樣式就是border中的dotted和dashed，這兩種都是css虛線，但是他們是有區別的。

1.dotted虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dotted虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dotted #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dotted虛線！</div>
</body>
</html>

效果：

2.dashed虛線

<!Doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk2312"/>
<title>dashed虛線</title>
<style type="text/css">
*{
margin:100px;
padding:0;
}
body{
width:1000px;
margin:0 auto;
}
.box{
width:300px;height:50px;
text-align:center;
padding-top:30px;
border:1px dashed #000;
}
</style>
</head>
<body>
<div class="box">大家好，我是dashed虛線！</div>
</body>
</html>

效果：

除注明外的文章,均為來源:湯久生博客(QQ:1917843637),轉載請保留本文地址！

原文鏈接：http://tangjiusheng.com/divcss/115.html

在線咨詢

上一篇：HTML的pre標簽
下一篇：簡單易用的蜂巢布局，純CSS實現

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

上海HTML5開發培訓機構大咖分享html虛線邊框設置教程

您的項目需求