您現在的位置是:電腦技術吧?>? 組裝維修 ??>??實現了三個效果,實現了效果??>??正文詳情

實現了三個效果,實現了效果

陀從菡2019-11-19 11:31:34 人圍觀
簡介價值實現的效果我們在頁面右側看到了很多浮動效果。第一類是QQ聯系人面板、對聯廣告等,大部分是基于JavaScript的動態效果。今天,我想在右邊分享一個浮動效果,它只需要CS將目的實

我們見過很多頁面右側浮動效果,最早有QQ聯系面板,對聯廣告等,大多數都是基于Javascript實現的動態效果,今天我給大家分享一個只需要CSS結合DIV實現的右側浮動效果。

  HTML  我們希望懸浮效果最后加載,因此一般將其放置在頁面HTML的末尾,我們建立一個.side-bar,里面包含了QQ在線咨詢,微信(鼠標滑向彈出二維碼效果),微博,以及Email聯系方式等內容,這些內容我們都以標簽包裹。

  代碼如下: div class=side-bar a href=# class=icon-qqQQ在線咨詢/a a href=# class=icon-chat微信div class=chat-tipsi/i img style=width:138px;height:138px; src=helloweba.jpg alt=微信訂閱號/div/a a target=_blank href= class=icon-blog微博/a a href=http://www.jb51.net class=icon-mailmail/a /div  CSS  我們使用CSS來完成浮動即鼠標滑向彈出效果。

我們準備一張圖片right_bg.png,包含了幾個內容的圖標,然后通過background-position各個圖標對應的a內容。

我們使用position: fixed以及設置bottom和right值將.side-bar固定在右下角,這樣無論頁面如何滾動,.side-bar將一直在右下角位置不變。

這里需要提下ie6下fixed效果需要單獨處理,但本文不做詳解,放棄ie6吧。

  代碼如下:  .side-bar a,.chat-tips i {background: url(right_bg.png) no-repeat;}  .side-bar {width: 66px;position: fixed;bottom: 20px;right: 25px;font-size: 0;line-height: 0;z-index: 100;}  .side-bar a {width: 66px;height: 66px;display: inline-block;background-color: #ddd;margin-bottom: 2px;}  .side-bar a:hover {background-color: #669fdd;}  .side-bar .icon-qq {background-position: 0 -62px;}  .side-bar .icon-chat {background-position: 0 -130px;position: relative;}  .side-bar .icon-blog {background-position: 0 -198px;}  .side-bar .icon-mail {background-position: 0 -266px;}  這里還有個鼠標滑向微信圖標的效果,當鼠標hover時,.chat-tips的display屬性設置為block,并且設置定位位置,一下代碼還包含了一個箭頭的CSS寫法:  代碼如下:  .side-bar .icon-chat:hover .chat-tips {display: block;}  .chat-tips {padding: 20px;border: 1px solid #d1d2d6;position: absolute;right: 78px;top: -55px;background-color: #fff;display: none;}  .chat-tips i {width: 9px;height: 16px;display: inline-block;position: absolute;right: -9px;top: 80px;background-position:-88px -350px;}  .chat-tips img {width: 138px;height: 138px;}  簡單的幾行CSS代碼就完成了一個簡潔的右下角懸浮效果,快去試下吧。

版權聲明:本文由 陀從菡 整理編輯。

原標題:實現效果這種說法對嗎,效果

轉載注明出處:http://www.dn9ww09s.icu/assemble/13612.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 如何開啟走路模式,開啟走路模式

    如何開啟走路模式,開啟走路模式 相關圖片導航怎么設置騎車走路模式古董已經成為許多人記錄自己動作的工具。當他們感覺不舒服的時候,他們可以將他們的運動模式改為步行模式。如何設置咕咚的行走方式?如何記錄咕咚的...

  • 炫酷的網頁,網頁炫酷效果

    炫酷的網頁,網頁炫酷效果 相關圖片登錄頁面炫酷特效代碼在過去,網站的創造性導航喜歡在大小、形式、顏色和排版上耍花招。現在,隨著時代的發展,它將增添酷炫的動感效果。例如,今天的網站群中,有很多學生在...

  • 芝麻信用能干什么,芝麻信用能做什么

    芝麻信用能干什么,芝麻信用能做什么 相關圖片芝麻信用658能干什么大多數用戶的芝麻信用評分在600-700分左右,但也有一批人的芝麻信用評分已經達到750分或以上的高分。事實上,自去年校園日記風波以來,支付寶的芝麻信用評分為...

  • 好用的手機動態桌面,手機動態桌面哪個好

    好用的手機動態桌面,手機動態桌面哪個好 相關圖片手機比較好用的動態壁紙軟件我已經習慣了一成不變的移動桌面,即使是各種各樣的壁紙也不能讓你覺得手機有一些新的創意和美感,所以現在是時候需要一個移動動態桌面來讓你的移...

  • 顏色和光澤鮮艷,色彩鮮艷光澤耀眼

    顏色和光澤鮮艷,色彩鮮艷光澤耀眼 相關圖片形容顏色光澤第一步:畫一個圓圈開始焰火-設置背景為黑色并在畫布上畫一個圓圈第二步:在圖像圓圈內添加徑向漸變。梯度法選擇徑向,顏色填充值為××000000-××ffffff。形容顏色和光...

  • 同一個企業釘釘怎么拉黑,釘釘怎么拉黑不了同事

    同一個企業釘釘怎么拉黑,釘釘怎么拉黑不了同事 相關圖片釘釘郵箱加黑名單如今,越來越多的企業開始用釘子來管理員工。我相信很多人想知道離開公司后如何設置黑名單,以及如何退出以前的公司?現在,讓我們跟隨超人軟件編輯器學習如...

  • 抖音水印在線解析本地,抖音怎么設置不要水印

    抖音水印在線解析本地,抖音怎么設置不要水印 相關圖片拍抖音怎么不要水印作為一款功能強大的視頻軟件,自助餐深受很多年輕人的喜愛。最近,很多用戶和朋友都說,他們想知道如何去除嘰嘰喳喳的聲音和如何去除水。增加了“o-試驗”。...

  • 尤里克克,鋼琴基礎教程

    尤里克克,鋼琴基礎教程 相關圖片古典樂器STL作為C 標準不可或缺的一部分,應該滲透到C 程序的各個角落。STL不是實驗室里的最愛,也不是程序員桌上的顯示器。她的興奮不是曇花一現。本教程旨在傳播和中阮入門...

  • 淘寶時光機何時建立,淘寶時光機 何時推出

    淘寶時光機何時建立,淘寶時光機 何時推出 相關圖片淘寶店鋪時光機機jk是山嗎近日,淘寶網正式推出雙11時光機功能。我相信你們不知道淘寶雙11時光機是什么。接下來,超人軟件編輯還想介紹一下如何玩淘寶雙11時光機。請不要誤會感興...

  • html元素居中,css元素居中的方式

    html元素居中,css元素居中的方式 相關圖片html怎么讓div居中HTML元素在其父元素上水平居中的方法:方法1:代碼如下:div class=wrap divclass=left-right-middle1 left andhtml中左右居中...

熱評文章

  • feedback可以刪除嗎,feedback刪除不了

    feedback可以刪除嗎,feedback刪除不了 相關圖片ios如何刪除feedback一些iPhone用戶在手機上發現了一個名為feedback的軟件。很多人認為它是有毒的,所以他們問如何刪除它。那么,反饋是流氓軟件嗎?如果不是,反饋是什么樣的軟怎么移...

  • 菜單圖標放大,響應式放大菜單

    菜單圖標放大,響應式放大菜單 相關圖片屏幕菜單如何放大這個例子的想法是使用mask函數來制作highlight按鈕。添加代碼以控制菜單的切換效果第1部分使突出顯示按鈕(1)創建新的600300像素空白文檔,幀速率為本菜單加大字體...

  • 搶糧票,搶糧票什么意思

    搶糧票,搶糧票什么意思 相關圖片淘寶上的糧票怎么用近日,淘寶網正式在全國范圍內開展食品搶票活動。只要你拿到食品券,你可以在點外賣時扣除。那么,如何玩弄淘寶在全國范圍內的食品搶票呢現在,超人軟件將...

  • 鉛筆,怎么畫鉛筆

    鉛筆,怎么畫鉛筆 相關圖片既簡單又漂亮的素描畫焰火制作超級漂亮的鉛筆效果:本教程最初是一個在線PS教程。我試著用FW來達到這個效果。操作步驟如下:事實上,FW在某些方面并不比PS差。之后,我會轉載或發...

  • 金立s10好不好用啊,金立s10為什么那么便宜

    金立s10好不好用啊,金立s10為什么那么便宜 相關圖片榮耀10青春版問題多金立S10是金立推出的最新智能手機,其最大的宣傳點是全球首款四攝像頭手機。錦里S10怎么樣?哪個更好,錦里S10還是oppo R11?讓我們用超人軟件來了解它金立s10拍照...

  • 摩拜電單車押金,摩拜電動車使用方法

    摩拜電單車押金,摩拜電動車使用方法 相關圖片摩拜助力車幾元一小時近日,摩比繼共享單車之后,又推出了共享電動車服務。你知道摩拜電動車的押金是多少嗎?摩拜電動車的費用是多少?接下來,超人軟件將為大家帶來摩拜電動...

  • 鼠標怎么放大,沒有鼠標怎么放大頁面

    鼠標怎么放大,沒有鼠標怎么放大頁面 相關圖片鼠標經過圖片放大打開DW,首先修改頁面屬性,將頁面更改為灰色,適合圖片顯示,打開布局屬性,我們添加一個apdiv來保存圖片,將apdiv的寬度和高度分別設置為800和299,并鼠標dpi是什...

  • 網絡打不開網頁是怎么回事,有網絡打不開網頁咋回事啊

    網絡打不開網頁是怎么回事,有網絡打不開網頁咋回事啊 相關圖片網絡打不開怎么回事經常訪問貼吧的用戶有時會遇到百度貼吧無法打開的情況,但在打開其他網頁進行測試時,網絡是正常的。這是什么原因?怎么解決?一。DNS錯誤,修改或修復DNS,...

  • html中,html中p

    html中,html中p 相關圖片html模板下載在HTML中,有兩個文件a.htm和b.htm。在同一目錄下,a.htm的內容如下:!--include file=b.htm--b.htm今天的內容如下:雨3html中居中...

  • 創建貼吧的條件,貼吧創建需要什么條件

    創建貼吧的條件,貼吧創建需要什么條件 相關圖片自己創建貼吧有什么用百度貼吧發展如火如荼,取代了眾多論壇,成為最大的志同道合者聚集地之一。很多人還想創建一個貼吧,與志同道合的朋友分享和交流。如何創建帖子?創建帖...

關注微信

变脸官网查询