java - 功能齐全的网站选项卡(带图像)

Question

作为一个入门元素，我的目标是设计一个结构最简单的网站。我想创建标签，点击后功能齐全。

我希望它看起来像这样:([ ] = Tab)

[(IMG)(文本)][(IMG)(文本)][(IMG)(文本)]

我可以明智地做这样的代码:

<ul>
  <li>Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

但是我怎样才能使它水平而不是垂直呢？

我怎样才能让它们做一些特殊的事情，比如；

• 实际显示为选项卡(矩形)
• 鼠标悬停并点击时添加颜色变化
• 并确定他们当前所在的选项卡。

(这样做的总体目标是让不同的标签触发不同的图像)

Answer 1

我真的建议在导航中使用链接:

<ul>
  <li><a href="">Tab 1</a></li>
  <li><a href="">Tab 2</a></li>
  <li><a href="">Tab 3</a></li>
</ul>

所以你的 css 代码应该是这样的: 你可以添加 css 规则:

ul li { float: left; }

把它们做成矩形:

ul li a {
background-color: red;
height: 50px;
width: 100px;
border: 1px solid black; }

添加一些功能:

ul li a:hover, ul li a:focus, ul li a:visited, ul li a:active {
background-color: white; }

为了阻止他们目前我无法回答哪个选项卡.. 因为这取决于你要使用哪个 TVS 或框架系统以及你将如何使用你的页面分页