0

私はstackoverflowとHTML/CSS/Javascriptに不慣れです。私は4つのタブを持っていますが、それらすべてをブラウザ幅の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 に答える