您現在的位置是:電腦技術吧?>? 編程技術 ??>??簡潔網名,簡潔的意思??>??正文詳情

簡潔網名,簡潔的意思

用品韻2019-11-15 10:00:39 人圍觀
簡介簡潔壁紙我們在頁面右側看到了很多浮動效果。第一類是QQ聯系人面板、對聯廣告等,大部分是基于JavaScript的動態效果。今天,我想在右邊分享一個浮動效果,它只需要CS情侶網名二字簡

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

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

代碼如下: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 _fcksavedurl=helloweba.jpg alt=微信訂閱號/div/a a target=_blank href= class=icon-blog微博/a a href=a href=http://www.jb51.nethttp://www.jb51.net/a 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/program/12460.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 什么是超級用戶,超級用戶

    什么是超級用戶,超級用戶 相關圖片如何變成超級用戶我認為您對regedit.exe很熟悉,但無法設置注冊表項的權限。regedt32.exe的最大優點是可以設置注冊表項的權限。NT/2000/XP的帳戶信息是以超級用戶密碼...

  • 蘋果6s激活出錯怎么解決,蘋果6s激活出錯

    蘋果6s激活出錯怎么解決,蘋果6s激活出錯 相關圖片蘋果6s手機激活出錯iPhone到達后,需要激活iPhone才能正常使用,但部分用戶遇到iPhone激活錯誤的情況。如果Apple激活出錯,我該怎么辦?不久前,用戶在激活蘋果時遇到蘋果破解激活...

  • 界面配色,的配色

    界面配色,的配色 相關圖片調色配色如何快速選擇或匹配顏色?今天@MICU設計并介紹了界面中最常用的三種方法,它們簡單實用,有大量優秀的例子,特別適合新手色彩初學者。快到元旦了。每個人手頭都有很多配...

  • ibooks,ibooks author

    ibooks,ibooks author 相關圖片ibooks軟件下載IBooks author是蘋果公司2012年發布的一款電子書制作工具。用戶可以免費下載和使用。iBooks作者制作的電子書可以在iBooks上下載并在iPadibookstart...

  • css優先級,css的優先級順序

    css優先級,css的優先級順序 相關圖片css優先級的意義是什么概念瀏覽器通過判斷優先級來確定哪些屬性值與元素最相關,以便將它們應用于元素。優先級由選擇器的匹配規則決定。如何計算?優先級是根據每個選擇器類型...

  • 如何用ibooks,ibooks怎么用不了

    如何用ibooks,ibooks怎么用不了 相關圖片蘋果6的ibooks怎么用iPhone上的IBooks是一種閱讀工具。IPhone用戶可以直接在iBooks上購買和閱讀書籍。iBooks的使用并不復雜。如果你不知道如何使用iBooksridibooks軟件怎么用...

  • ui設計師和交互設計師,交互設計師和ui設計師的區別

    ui設計師和交互設計師,交互設計師和ui設計師的區別 相關圖片ui設計和交互設計哪個好2016年,視覺 互動設計師的就業價值將更高。盡管大多數視覺設計師還沒有接受過正式的基本交互訓練,但不用擔心。今天這篇扣人心弦的雜志文章的@虹膜翻譯分...

  • 證件照編輯,photoshop cc

    證件照編輯,photoshop cc 相關圖片ps導出為png快捷鍵有網友在網上尋找Photoshop CS4的序列號,想激活它。Photoshop CS4軟件具有更直觀的用戶體驗、更大的編輯自由度和大大提高的工作效率photoshop序列號 破解...

  • css搜索框居中,搜索框css

    css搜索框居中,搜索框css 相關圖片css搜索框樣式代碼最終渲染:首先設置一個帶有背景色的公共div框,然后使用上一篇文章中從post獲得的三角形圖標,將div框設置為相對定位模式,將三角形圖標設置為絕對定位,并將位...

  • superamoled屏幕好嗎,ltps和amoled哪個好

    superamoled屏幕好嗎,ltps和amoled哪個好 相關圖片super amoled 手機市場上的一些安卓手機提到,他們在宣傳手機屏幕時使用了超級AMOLED屏幕。超級AMOLED和之前的AMOLED屏幕之間哪一個最好?兩者有什么區別?AMOLED(super amoled屏幕...

熱評文章

  • 聯想xp系統,聯想電腦是xp系統嗎

    聯想xp系統,聯想電腦是xp系統嗎 相關圖片聯想筆記本電腦怎么裝xp系統使用聯想XP SP2系統生產的windowsxpsp3oem系統磁盤,可以在網上找到很多聯想磁盤,但都不是聯想SP2 OEM生產的。根據論壇上的教學方法,我們可聯想電腦怎么做...

  • 什么是混合模式,混合模式在哪

    什么是混合模式,混合模式在哪 相關圖片ps混合模式濾色創造力無處不在。在網頁設計中,如果你發現了一些好的靈感或趨勢,盡量把它應用到你的項目中去,少用那些無聊和腐朽的想法。畢竟,設計師應該提高自己,不要為了...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載Windows XP SP3已經正式發布。如果您還沒有下載XP SP3,請在Zixun/200805/3371.html下載XP SP3。IE7不包含在升級包中XP免費升級win10...

  • 高峰效能,高峰效能容量是什么

    高峰效能,高峰效能容量是什么 相關圖片Windows XP我們一直對beta軟件的評估持保留態度,但這條消息確實讓人難以接受。根據魔鬼山軟件的測試結果,盡管微軟說Windows XP SP3只是為了增強和修正安全性Windows XP Mode...

  • 彈出菜單,編程大師

    彈出菜單,編程大師 相關圖片安卓彈出菜單!DOCTYPE html PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/鼠標左鍵彈出菜單...

  • xp主題,win10xp主題

    xp主題,win10xp主題 相關圖片xp主題下載XP SP3已經推出好幾天了。沒有一個好的XP SP3主題,就不是一個好的系統,但是官方不能直接安裝第三方主題,所以我們有這個xpsp3主題破解文件下載地址:論xp sp3鏡像文件下載...

  • 怎么縮進行間距,怎么縮進文字間距

    怎么縮進行間距,怎么縮進文字間距 相關圖片文檔怎么縮進行距首先,CSS控制UL縮進距離方法:styletype=text/CSSUl{margin left:-10px;}/styleul-li計算機軟硬件應用網絡ww行距太寬了怎樣縮進...

  • 最流行的Docker管理工具,15個最有效最流行測評工具

    最流行的Docker管理工具,15個最有效最流行測評工具 相關圖片對于前端開發最流行的工具是什么本文介紹了目前最流行的一些系統美化工具:主題:Windows鏈接:點擊下載圖標:-圖標打包:3.01版,免費安裝。只要在文件夾中運行安裝腳本文件,就...

  • css格式化,css格式化網頁

    css格式化,css格式化網頁 相關圖片css還原!DOCTYPE HTML PUBLIC-//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/js格式化工具...

  • Windows XP,Windows XP Mode

    Windows XP,Windows XP Mode 相關圖片Windows XP下載Microsoft Windows XP Service Pack 2(SP2)是Microsoft Windows XP的最新系統維護修補程序,它提供了增強的XP免費升級win10...

關注微信

变脸官网查询