Question

我有一个主链接 HTML页面，用于我的Intranet网站。

页面上有 67 个不同的链接，这些链接分组在 7 部分标题下。

目前，链接是通过表格组织的。

是否有更好的方法来组织链接，同时使它们在视觉上与众不同？

Answer 1

或者根据链接的不同部分，链接会有所区别：

<ul class="linksectionA">
  <li><a href="#">Link A1</a></li>
  <li><a href="#">Link A2</a></li>
  <li><a href="#">Link A3</a></li>
</ul>
<ul class="linksectionB">
  <li><a href="#">Link B1</a></li>
  <li><a href="#">Link B2</a></li>
  <li><a href="#">Link B3</a></li>
</ul>
<ul class="linksectionC">
  <li><a href="#">Link C1</a></li>
  <li><a href="#">Link C2</a></li>
  <li><a href="#">Link C3</a></li>
</ul>

然后，您可以轻松地为这些部分中的每个链接分配不同的样式：

.linksectionA a { color: red; }
.linksectionB a { color: green; }
.linksectionC a { color: blue; }

Answer 2

a:link              { color:blue; text-decoration:underline; font-weight: bold; }
a:visited           { color:gray; text-decoration:underline; font-weight: bold; }
a:hover             { color:green; text-decoration:underline; font-weight: bold; }
a:active            { color:red; text-decoration:underline; font-weight: bold; }

a.otherLink:link    { color:black; text-decoration:none; }
a.otherLink:visited { color:yellow; text-decoration:none; }
a.otherLink:hover   { color:#123456; text-decoration:underline; }
a.otherLink:active  { color:lime; text-decoration:none; }

请注意，a:样式适用于默认链接，a.otherLink:样式适用于<a class="otherLink" href="...">

形式的链接

Answer 3

如果您希望仅更改该页面上的链接样式，则可以将所有链接标识为特定类。此外，如果您不创建所有链接更改样式，则重新定义链接标记的样式。

Answer 4

我建议用无序列表对它们进行分组，比如poke建议，并使用类似的样式进行优雅增强 -

.linksectionA li:n-th-child(even) {  }

HTML / CSS - 为大量超链接设置样式？

4 个答案: