0

我正在研究网站的 CSS，并试图确定导航菜单的最佳方法。菜单布局如下：

在此处输入图像描述

在第 1 列和第 2 列之间以及第 2 列和第 3 列之间是双垂直线，由于它们的风格，它们可能需要成为图像。

所以，我的问题是：

从语义上讲，所有这些链接都是一个无序导航列表的一部分。但是，我找不到任何方法来使用 css 创建这样一个列表，该列表只能在 IE 中使用。列表项之间的图像只会更加混乱。有没有一种干净的方法可以做到这一点？

我的第二种方法是创建 3 列，并在 col 1 和 col 3 中放置一个列表。但这似乎仍然与图像分隔符混淆。我考虑过使用 li:after 来放置图像，但 IE7 无法识别“内容”属性。

现在，似乎最简洁的构建方法是不使用列表。但后来我觉得我失去了正确的语义。有没有我没有想到的更好的方法？布局非常表格，所以我当然可以把它做成表格。. . :)

谢谢！

4

2 回答 2

0

我为链接解决了如下问题，在这些链接中，您将需要的名称和类图像替换为图像和测量值。

   <style type="text/css">

   ul{
     width:400px;
 height:200px;
 }
   ul li{
 border-top:1px solid gray;
 border-bottom:1px solid gray;
 display:block;
 height:99x;
 width:100px;
}
  .left{
    float:left;
    }

  .right{
    float:right;
   }
  .second{
margin-top:100px;
margin-left:-100px;
   }
   .image{
background:red;
border-left:3px double gray;
border-right:3px double gray;
display:block;
float:left;
height:200px;
width:194px;}
    </style>


    <body>
      <ul>
    <li class="left"><a href="#">Home</a></li>
        <li class="left second"><a href="#">Home</a></li>
        <li class="image"><a href="#">Home</a></li>
        <li class="right second"><a href="#">Home</a></li>
        <li class="right"><a href="#">Home</a></li>
      </ul>
    <body>

我希望我能帮上忙。问候。

于 2013-04-15T02:09:08.800 回答
0

我认为您可以用四个 LI 制作一个 UL，并为第一个和最后一个 li 提供绝对位置（可能是“事件”和“关于我们”）。这可以通过伪选择器 :first-child 和 :last-child 来实现。

于 2013-04-14T23:59:37.643 回答