Home > Web Front-end > HTML Tutorial > css sliding door technology_html/css_WEB-ITnose

css sliding door technology_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:46:27
Original
1246 people have browsed it

The double sliding door effect is still relatively common, and it is actually easy to understand:


The two doors are like the effect formed by the overlap of two block-level elements. Look at a piece of code as follows:


#Mydoor ul li a:hover{	color:#fff; //设置背景 黑色 	background: url(hover.gif); //设置背景 图片,图片周边应为透明,这样才能把背景衬托出来 } 
Copy after login
You can see the changes on the left side as follows



/**将连接a下的内容变为块级;给右边一个宽度*/#Mydoor ul li a b{ 	display:block; //设置为块元素 	padding:0 14px 0 0; //设置右边距为14像素 }  /**经过后右上定位*/ #Mydoor ul li a:hover b{ 	color:#fff; //设置背景 黑色 	background: url(hover.gif) no-repeat right top; //设置背景图片,右对齐 }
Copy after login

The effect after editing


Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template