學習lulu之 tips 提示

今天做了乙個活動，裡面有乙個效果是這樣的：

要求就是不論星星的大小怎麼變化，可摘提示兩個字始終在星星的正上方，並且，可摘兩個字的內容是不論有多少始終會呆在星星的正上方，學習了lulu的方法之後記下來。

一：拆分可見。氣泡框是由乙個橢圓包著字的形狀和乙個小三角組成的，由此我可以想到用偽類元素before和after來實現畫這個小氣泡。

二：先用before元素畫出文字包含的部分，在這裡我們可以通過attr()方法來取到氣泡的內容，並且內容的填寫之用在html模版上面寫,對的，不僅僅js有attr()方法，css也有這個方法。css裡面基本用法如下：

這裡的用法是將文案直接寫在html上，然後通過css的atrr()方法來取到它的屬性值。如下：

<

span 
class
=""tableindex
="0"
role
="tooltip"
data-title
="可摘"
aria-lable
="可摘"
>
span
>

.star-box .star[data-title]:before

使用transform ： translatex(-50%)  是使元素像x軸的負方向移動它本身寬度的50%;  外加絕對定位，並且相對它的父元素像左移動50%的距離。（這個50%就是它父元素的寬的50%）；

這樣就是實現乙個元素相對另一元素（不論這個元素的寬度怎麼變換），這個元素始終都能相對另乙個元素垂直居中對其。

after偽元素來畫三角形再來溫習一遍：

基本的三角形的畫法：

.ui-tips[data-title]::after

發現：width和height是指中心矩形的寬和高，每個邊的border是梯形無縫拼接的，而不是矩形拼接的。

以此內推，如果只有乙個border-top:80px solid top 是不是就可以畫出一邊的矩形了，測試**和效果如下：

答案是令人失望的。

那看看其他的邊呢？

這樣 我們可以想到這樣一種解釋，哪條邊框不定義，那麼這條邊框就表現為矩形，如果其他邊框定義，那麼它就表現為梯形。（摘抄）

為了測試這句話：

發現因為沒有定義border-right和border-bottom 所以改粉色矩形的的下邊框和右框為矩形，而定義了邊框的左邊框和上邊框為梯形！

**）同理：梯形在上邊為0 的時候即為三角形，所以只要中間的矩形邊寬高為0的時候就能得到三角形：

通過設定其他邊的border的背景為transparent實現乙個或者2個或者3個三角形！

如果不定義某些邊的border，不定義的border就會表現為矩形。

以上就是我今天通過lulu的乙個小小tips提示框學到的知識。

思想行動之Tips提示框引擎的索引結構

這種結構怎麼來描述呢？簡單來講就是乙個詞對應一系列的結果 倒排索引這個東西是講爛了的 不妨定義如下 word num wordid1 wordid2 wordid3 word代表是使用者輸入的詞條 num是該詞條指向的結果數 最多10條 wordid1.wordid2等是結果的id編號 或者直接是w...

深度學習（一） tips

神經元個數增加，模型複雜度提公升，全連線層數加深，模型非線性表達能力提高。在機器翻譯中，用更大的batch size配合更大學習率能提公升模型優化速率和模型效能 參考自 整體效果 roberta xlnet bert 參考 warmup是在resnet 中提到的一種學習率預熱的方法，它在訓練開始的時...

VC中滑鼠經過按鈕彈出功能提示（TIPS）

在 製作中，將為某些鏈結新增相關說明，特別是一些鏈結。而在vc中，也常常為一些按鈕新增一些功能提示。下面講解實現過程 該功能的實現主要是用ctooltipctrl類。該類在vc msdn中有詳細說明。首先在對話方塊的標頭檔案中加入初始化語句 public 下，加入 ctooltipctrl m my...