Maison >interface Web >tutoriel CSS >Exemple de partage de code sur la façon d'implémenter un menu de navigation avec des images d'arrière-plan irrégulières à l'aide de CSS
Exemple de partage de code sur la façon d'implémenter un menu de navigation avec des images d'arrière-plan irrégulières à l'aide de CSS
- 黄舟original
- 2017-07-19 15:13:292048parcourir
Généralement, l'image de fond du menu de navigation est relativement régulière, mais généralement on rencontre aussi de nombreuses images de fond irrégulières dans la barre de navigation (par exemple, lorsque la souris est déplacée, l'image de fond est irrégulière, ceci l'exemple ne traite que de ce type), comme le montre la figure suivante :
(Figure 1)
Lorsque la souris est déplacée vers le haut, l'arrière-plan se transforme en une flèche rouge. Peut-être qu'à première vue, je pense qu'il n'y a rien de spécial dans cet effet, mais si vous regardez attentivement le cadre vert que j'ai dessiné, vous constaterez que chaque pièce est visible. est connecté à Ils ne seront pas déconnectés ensemble ; si vous suivez la méthode ordinaire, vous pouvez obtenir l'effet montré dans l'image ci-dessous :
(Image 2)
C'est-à-dire que les blocs sont déconnectés les uns des autres.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript" src="js/jquery.js"></script><!-- wbg解决ie6下的背景 勿动！！！-->
<!--[if IE 6]>
<script src="js/ie_png.js" mce_src="js/ie_png.js">
</script>
<script type="text/javascript">
DD_belatedPNG.fix('.previous,img');
</script>
<![endif]--> <style type="text/css">body{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;}body,p,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
list-style:none;} body img{
border:none;}a{
color:#000;
border:0;
text-decoration:none;}a:hover{
color:#f00;
text-decoration:none;}#warp{
margin:20px auto;
width: 960px;}body{
background:url(img/bj.jpg) no-repeat center top #090909;}.nav{
background:url(img/nav_bj.png) right no-repeat;
_background:url(img/nav_bj.gif) right no-repeat;
height:47px;
width:638px;}.nav ul li{
float:left;
margin:0 -7px;/*这里的marign是实现这个效果最关键的地方*/
display:inline;
width:104px;}.nav ul li a{
display:block;
color:#FFFFFF;
padding:7px 0px;
_padding:5px 0px 6px;
width:104px;
float:left;
text-align:center;
font-family:Microsoft YaHei !important;}.nav ul li a span{
display:block;}.nav ul li a:hover{
background:url(img/a_hover.png) no-repeat;
_background:url(img/a_hover.gif) no-repeat;
color:#fff;}.nav ul .home a:hover{
background:url(img/home_hover.png) 7px center no-repeat;
_background:url(img/home_hover.gif) 7px center no-repeat;}</style> <title></title></head><body>
<p id="warp">
<p class="nav">
<ul>
<li class="home"><a href=""><span>Home</span>首页</a></li>
<li><a href=""><span>About</span>关于九弘</a></li>
<li><a href=""><span>Serve</span>服务项目</a></li>
<li><a href=""><span>Case</span>活动案例</a></li>
<li><a href=""><span>Information</span>公司动态</a></li>
<li><a href=""><span>Partners</span>合作伙伴</a></li>
<li><a href=""><span>Contact</span>联系方式</a></li>
</ul>
</p>
</p></body></html>La partie la plus critique pour réaliser cet effet est de définir les valeurs de marge gauche et droite de "li" sur des nombres négatifs , puis définissez la largeur de "li" et de "a" pour qu'elle soit la même, de sorte que la largeur de "a" soit fixe et que les côtés gauche et droit de "li" rétrécissent à cause des marges.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!