有个效果没弄明白-HTML教程-爱易网页

有个效果没弄明白

日期：2014-05-17　浏览次数：20904 次

有个效果没弄明白，请教高手

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
ul li{
   background: url("images/navbar.png") no-repeat scroll 100% 50% transparent;
   float: left;
   list-style: none outside none;
   margin: 0 -1px 0 1px;
}
ul li a{
   color: #C8DBE4;
   text-decoration: none;
   padding: 0px 10px;
}
ul li a:hover{
   color: #FFFFFF;
}
  </style>
 </head>

 <body style="background-color: blue;">
<ul>
<li><a href="index.php"><span>首页</span></a></li>
<li><a href="#"><span>注册</span></a></li>
<li><a href="#"><span>登录</span></a></li>
<li><a href="#"><span>帮助</span></a></li>
</ul>
 </body>
</html>

这是代码中的navbar.png图片

这里的虚线效果是怎么实现的呀？我试了一下，如果去掉navbar.png这个图片，就没有虚线了，为什么？

------解决方案--------------------
没什么不明白的，这站图片有白色的点点竖线，然后通过背景图片位置更换到那个背景

HTML code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <style>
ul li{
   background: url("images/navbar.png") no-repeat scroll 100% 50% transparent;
   float: left;
   list-style: none outside none;
   margin: 0 -1px 0 1px;
}
ul li a{
   color: #C8DBE4;
   text-decoration: none;
   padding: 0px 10px;
}
ul li a:hover{
   color: #FFFFFF;
}
  </style>
 </head>

 <body style="background-color: blue;">
<ul>
<li><a href="index.php"><span>首页</span></a></li>
<li><a href="#"><span>注册</span></a></li>
<li><a href="#"><span>登录</span></a></li>
<li><a href="#"><span>帮助</span></a></li>
</ul>
<img src="images/navbar.png"/><!--增加图片就看到竖线了-->
 </body>
</html>

------解决方案--------------------
png支持透明背景。
不信你可以做一个简单的实验，建立一个背景为透明的PHOTOSHOP新文档，然后用白色画一根线，另存为PNG图像。用ACDSEE打开，图片是不是一片空白？但是你设置成  background: url("images/navbar.png") no-repeat scroll 100% 50% transparent; 的形式，白线还是白线，而不是一片空白。

------解决方案--------------------

看了半天，你发的图片，右边有四个竖着排的白点，你好好看看
下载下来，打开放大看，在最右边上，中间地方，以它做背景了
你把图片去掉了，当然"虚线"就没有了

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

有个效果没弄明白

相关资料更多>

推荐阅读更多>