0

我了解 css 并有一个外部文件，但我不知道如何将所有内容从这个 poll 移动到 css 文件。投票位于 div id "poll" 下，因此我在 css 中所做的任何更改都会影响整个投票，而不是特定部分。我可以将投票问题和答案分成单独的 div，还是有更好的方法来重新编写代码？

我知道投票仍然有效，但我喜欢井井有条，因此验证器显示了许多错误。

<div id="poll">
<form method="post" action="http://poll.pollcode.com/t78ar8">
    <table>
        <tr>
            <th colspan="2">What game site do you visit most?</th>
        </tr>
        <tr>
            <td>
                <input type="radio" name="answer" value="1" id="t78ar8answer1">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer1">Ign</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="2" id="t78ar8answer2">
            </td>
            <td>&nbsp;
                <label for="t78ar8answer2">GameSpot</label>
            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="3" id="t78ar8answer3">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer3">GameFAQs</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="4" id="t78ar8answer4">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer4">GamerZone</label></font>

            </td>
        </tr>
        <tr>
            <td width="5">
                <input type="radio" name="answer" value="5" id="t78ar8answer5">
            </td>
            <td>&nbsp;<font face="Tahoma" size="2" color="000000"><label for="t78ar8answer5">Mmohut</label></font>

            </td>
        </tr>
        <tr>
            <td colspan="2" height="10">
                <center>
                    <input type="submit" value=" Vote ">&nbsp;&nbsp;
                    <input type="submit" name="view" value=" View ">
                </center>
            </td>
        </tr>
        </a>&nbsp;</font>
        </td>
        </tr>
    </table>
</form>
</div>

这是视觉效果的 jsfiddle http://jsfiddle.net/qX3Jp/。另外，我知道代码的格式不正确。我这样做是因为它都在一行中并且更难阅读。如果需要任何其他信息，请在拒绝我的问题之前询问。谢谢

4

2 回答 2

1

这是一个jsfiddle，展示了我将如何做到这一点。没有表格，因为我讨厌表格，并认为唯一应该使用它们的时间是显示数据，而不是用于页面布局。

此外，所有样式都与标记分开。

对于那些懒得点击链接的人...这里是代码。

HTML：

<div id="poll">
    <form method="post" action="http://poll.pollcode.com/t78ar8">

        <h2 id="title">What game site do you visit most?</h2>

        <div id="radio_btns">
            <input type="radio" name="answer" value="1" id="t78ar8answer1">Ign<br />
            <input type="radio" name="answer" value="2" id="t78ar8answer2">GameSpot<br />
            <input type="radio" name="answer" value="3" id="t78ar8answer3">GameFAQs<br />
            <input type="radio" name="answer" value="4" id="t78ar8answer4">GamerZone<br />
            <input type="radio" name="answer" value="5" id="t78ar8answer5">Mmohut
        </div>
        <div id="submit_btns">
            <input type="submit" value=" Vote ">
            <input type="submit" name="view" value=" View ">
        </div>
    </form>
</div>

CSS：

#poll {
    margin: 30px 0px 0px 5px;
    font-family: Tahoma;
}
#radio_btns {
    margin-bottom: 5px;
    font-size: 13px;
}
#radio_btns input {
    margin: 5px 10px 5px 5px;
}
#title {
    margin-bottom: 3px;
    font-size: 13px;
}
#submit_btns {
     margin: 0px 0px 0px 60px;
}

请注意，我将标记分成多个部分并给它们提供了 ID，以使 CSS 样式更容易。

于 2013-04-03T17:27:21.220 回答
1

我完成了完整的表格并删除了我认为不必要的元素：表格+更多。我将字体信息放在body标签中。CSS 中的其他所有内容都与布局相关。

CSS：

* {
    padding:0;
    margin:0;
}
body {
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#000;
}
label {
    display:block;
}
fieldset {
    border:none;
    text-align:center;
}
legend {
    font-weight:bold;
}

HTML：

<form method="post" action="http://poll.pollcode.com/t78ar8" id="poll">
        <legend>What game site do you visit most?</legend>
        <label for="t78ar8answer1"><input type="radio" name="answer" value="1" id="t78ar8answer1"> Ign</label>
        <label for="t78ar8answer2"><input type="radio" name="answer" value="2" id="t78ar8answer2"> GameSpot</label>
        <label for="t78ar8answer3"><input type="radio" name="answer" value="3" id="t78ar8answer3"> GameFAQs</label>
        <label for="t78ar8answer4"><input type="radio" name="answer" value="4" id="t78ar8answer4"> GamerZone</label>
        <label for="t78ar8answer5"><input type="radio" name="answer" value="5" id="t78ar8answer5"> Mmohut</label>
        <fieldset>
          <input type="submit" value=" Vote ">
          <input type="submit" name="view" value=" View ">
        </fieldset>
    </form>
于 2013-04-03T17:30:16.657 回答