Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of CSS how to achieve the right bottom suspension effect, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this CSS article on how to achieve the right bottom suspension effect. Let's take a look at it.

HTML

We want the hover effect to be loaded finally, so we usually put it at the end of the page HTML, and we create a .side-bar that contains QQ online consultation, Wechat (mouse-over pop-up QR code effect), Weibo, and Email contact information, all of which we wrap in tags.

The code is as follows:

QQ online consultation

WeChat

micro-blog

Mail

CSS

We use CSS to complete the floating or mouse slide pop-up effect. We prepare a picture right_bg.png, which contains several content icons, and then background-position the a content corresponding to each icon. We use position: fixed and set the bottom and right.side-bar values to pin .side-side in the lower-right corner, so that no matter how the page scrolls, the .side-bar will remain in the lower-right corner. It needs to be mentioned here that the fixed effect under ie6 needs to be dealt with separately, but this article will not explain it in detail, so give up ie6.

The code is as follows:

.background: url (right_bg.png) no-repeat;}. Side-bar ameme. Chatty tips I {Chat:

.side-bar {width: 66pxashing position: fixed;bottom: 20pxdominyright: 25pxpositional Fontmuri size: 0political lineripple height: 0Politzmuri index: 100;}

.side-bar a {width: 66pxash 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-130pxpositionposition: relative;}

.side-bar. Icon-blog {background-position: 0-198px;}

.side-bar. Icon-mail {background-position: 0-266px;}

There is also the effect of sliding the mouse over the Wechat icon. When the mouse is hover, the display property of .chat-tips is set to block, and the location is set. The following code also contains the CSS writing of an arrow:

The code is as follows:

. side-bar. Icon-chat:hover. Chat-tips {display: block;}

.chat-tips {padding: 20pxscape border: 1px solid # d1d2d6 political position: absolute;right: 78pxash top:-55pxpolitical backgroundMurray color: # fff;display: none;}

.chat-tips I {width: 9pxposition height: 16pxposition display: inline-block;position: absolute;right:-9pxposition top: 80pxash

.chat-tips img {width: 138pxash height: 138px;}

This is the end of the article on "how to achieve the suspension effect at the bottom of the right side of CSS". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to achieve the suspension effect at the bottom of the right side of CSS". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.