0

我是 stackoverflow 和 HTML/CSS/Javascript 的新手。我有四个选项卡，我希望它们都能够是浏览器宽度的 1/4。这主要用于移动使用，因此浏览器宽度的 1/4 应该没问题。

同样，我对 HTML/CSS/Javascript 还是很陌生，但我有使用 Java 的经验。因此，我了解编程基础知识，但我并不真正了解 HTML、CSS 和 Javascript 是如何相互作用的。

谢谢！

编辑：所以在看到一些评论之后，我想我需要更清楚一点。所以我想我会清理一些东西。首先，是的，我设计了一些看起来像标签的东西。我只是用谷歌搜索它，我找到了一种方法。我不知道这是否是最好的方法。我将在下面包含一些代码。

<ol id="toc">
<li><a href="Password.html">
    <span class="title">Password</span></a></li>
<li><a href="SSID.html">
    <span class="title">SSID</span></a></li>
<li class="current"><a href="Info.html">
    <span class="title">Info</span></a></li>
<li><a href="Logout.html">
    <span class="title">Logout</span></a></li></ol>

还有我的 CSS

ol#toc {
height: 1em;
list-style: none;
margin: 0;
padding: 0;
}

ol#toc a {
background: #bdf url(tabs.png);
color: #ddd;
display: block;
float: left;
height: 2em;
padding-left: 20px;
text-decoration: none;
}

ol#toc a:hover {
background-color: #3af;
background-position: 0 -120px;
}

ol#toc a:hover span {
background-position: 100% -120px;
}

ol#toc span.title {
font-size:0.6em;
vertical-align:bottom;
font-family: 'Droid Serif', Georgia, Times, serif;
}

ol#toc li {
float: left;

}

ol#toc li.current a {
background-color: #48f;
background-position: 0 -60px;
color: #fff;
}

ol#toc li.current span {
background-position: 100% -60px;
}

ol#toc span {
background: url(tabs.png) 100% 0;
display: block;
line-height: 3.1em;
padding-right: 20px;
}

但我也看到了一些使用 JQuery 的好东西。我只是也不知道如何使用它。

4

2 回答 2

2

好吧，我假设您的<li>标签已经看起来像标签了？如果是这种情况，CSS 就很简单了：

/* Note that my choice of selector here is HEAVILY dependent on the styling you already have*/
li span.title
{
    width: 25%;
}

理解交互是 CSS/Javascript/HTML 很容易学。如果这个答案没有意义，我鼓励你先阅读一本关于该主题的好书。

于 2012-07-24T21:28:28.037 回答
0

根据您对 Stargazer712 的评论，您可能想查看{less}哪个是允许变量的动态样式表语言：http: //lesscss.org/

因为您想“将变量从 JavaScript 传递到 CSS”，这可能仍然不是答案，但值得研究。

于 2012-07-24T23:27:35.777 回答