純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形：

先看2張效果圖：

對話氣泡

用法：使用.speech-bubble和.speech-bubble-direction類

hi there

*/.speech-bubble

.speech-bubble:after

/* 箭頭的位置 */

.speech-bubble-top:after

.speech-bubble-right:after

.speech-bubble-bottom:after

.speech-bubble-left:after

html：

doctype

html

>

<

html

>

<

head

>

<

link

rel="stylesheet"

type

="text/css"

href

="maopao.css"

>

<

title

>test

title

>

head

>

<

body

>

<

divclass

="speech-bubble speech-bubble-top"

>

箭頭在頂部

div>

<

br/>

<

divclass

="speech-bubble speech-bubble-bottom"

>

箭頭在底部

div>

<

br/>

<

divclass

="speech-bubble speech-bubble-left"

>

箭頭在左側

div>

<

br/>

<

divclass

="speech-bubble speech-bubble-right"

>

箭頭在右側

div>

body

>

html

>

純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 用法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech b...

純CSS製作冒泡提示框

前兩天翻譯了一篇文章，關於利用css的border屬性製作基本圖形 先看2張效果圖 對話氣泡 使用方法 使用.speech bubble和.speech bubble direction類 hi there speech bubble speech bubble after 箭頭的位置 speech...

純css來實現提示框

用js用多了，就疏忽了最基本的css了 用title屬性來實現提示框。下面言歸正傳 如何用css實現提示框 1 利用title屬性來實現滑鼠滑過某個元素時，實現提示整段內容的功能 利用title屬性時，提示框的樣式是預設的，而利用自定義的data title屬性時，提示框的樣式和位置自己可以隨意定義...