css對話方塊的寫法

2021-09-17 01:14:41 字數 981 閱讀 9007

最近比較忙,好久沒有維護部落格了,在這裡表示歉意。

最近主要在做touchweb的專案,那麼我就記錄一下我在做這個專案中的問題吧,當然,今天主要是從css開始。後面部落格會陸續記錄其他的問題,例如延遲載入、的canvas渲染、jquery模擬下拉選擇以及highchart圖表、高德地圖、swipe滑動、jquery的hover閃爍等問題。好吧,言歸正傳,今天主要先介紹一下css吧。

之前我在css常用效果總結這篇文章中寫了一下常用的容易忘掉的css ,今天寫的這個css模擬對話方塊,假如你理解了,那麼是很好記的,你不理解沒有關係,可以把我的這篇文章收藏起來,用到的時候,可以翻出來看一下!

如下圖:左側三角形

css**如下:

#talkbubble

#talkbubble:before

其實,本案例的精華就是三角形的繪製,那麼如何繪製三角形呢?我在這裡總結一下!

1、上三角形,上三角形,頂部是尖的,所以用border-left,border-right,和border-bottom可以實現,給bottom乙個顏色,其他設定為transparent

#********-up

同理,大家可以判斷一下如下**分別是什麼樣的三角形!

#********-down

#********-left

#********-right

#********-topleft

#********-topright

#********-bottomleft

#********-bottomright

判斷出上面**分別代表什麼三角形嗎?沒錯,我的命名是根據三角形的方向來的。大家可以試一下。三角形會寫了,那麼對話方塊就迎刃而解了! 不管是左側的,還是上面的,只要改變一下before偽類的定位,就可以實現了。

當然,三角形的寫法是很基礎的。你也可以用css繪製出五角星、六角星、多邊形、愛心等等。當然有些符號是不常用的,用的最多的還是三角形。

previous:

對話方塊 訊息對話方塊

我們在使用windows系統的過程中經常會見到訊息對話方塊,提示我們有異常發生或提出詢問等。因為在軟體開發中經常用到訊息對話方塊,所以mfc提供了兩個函式可以直接生成指定風格的訊息對話方塊,而不需要我們在每次使用的時候都要去建立對話方塊資源和生成對話方塊類等。這兩個函式就是cwnd類的成員函式mes...

對話方塊中顯示對話方塊

一 對話方塊中顯示對話方塊的方法 1 首先建立要在對話方塊裡顯示的那個對話方塊,命名為 idd inner 設定這個對話方塊的屬性 1 style 選擇 child 中文版 樣式 選擇 下層 2 border 為 none 中文版 邊框 選擇 無 2 為了顯示時能夠準確定位,我們可以在右邊要顯示對話...

常用對話方塊 訊息對話方塊

使用windows系統的過程中經常會見到訊息對話方塊,提示我們有異常發生或提出詢問等。因為在軟體開發 中經常用到訊息對話方塊,所以mfc提供了兩個函式可以直接生成指定風格的訊息對話方塊,而不需要我們在每次使用的時候都要去建立對話方塊資源和生成對話方塊類等。這兩個函式就是cwnd類的成員函式messa...