功能齐全的网站标签（带图片）答案

【问题标题】：Website tabs that fully function (with images)功能齐全的网站标签（带图片）
【发布时间】：2015-11-10 00:27:53
【问题描述】：

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

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

[(IMG) (TEXT) ][(IMG) (TEXT) ][(IMG) (TEXT)]

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

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

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

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

（这样做的总体目标是让不同的选项卡触发不同的图像）

【问题讨论】：

www.codecademy.com 有一个很好的教程，里面有一个浏览器编辑器，可以引导你完成 HTML CSS JS 和 Jquery。
非常感谢！我会确保检查出来。
欢迎来到 Stack Overflow！请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型以及should be avoided. 的问题类型

标签： java html css

【解决方案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 或框架系统以及您将如何使用页面分页

【讨论】：