0

我一直想知道如何认真对待 css。我是一个非常干净的开发人员，但我的 CSS 似乎有异味。只想创建布局，扩展的东西将用 javascript 制作。有人可以向我展示如何在 css 中实现这一点的解决方案。忘记渐变和文本颜色等。也许将来需要有人将这项工作用于一些学分。

在此处输入图像描述

<div class="FAQ">
    <div class="FAQ-Header">
        <div class="Help-Title-Label">Questions and Answers</div>
    </div>
    <div class="FAQ-Entry">
        <div class="FAQ-Question">
            <div class="FAQ-Question-Left">
                <div class="FAQ-Question-State">+</div>
            </div>
            <div class="FAQ-Question-Right">
                <div class="FAQ-Question-Txt">My Question Text</div>
            </div>
        </div>
        <div class="FAQ-Answer">
            <div class="FAQ-Answer-Left">
                <div class="FAQ-Answer-Title">A:</div>
            </div>
            <div class="FAQ-Answer-Right">
                <div class="FAQ-Answer-Txt">My Question Answer.</div>
            </div>
        </div>
    </div>        
    <div class="FAQ-Footer"></div>
</div>
4

2 回答 2

4

我不会只使用 JqueryUI 手风琴重新创建轮子。http://jqueryui.com/accordion/从图片中取出 css 并一步添加实现。

于 2013-05-21T03:58:56.203 回答
1

总的来说，我同意 vikingben。尽量避免重新发明轮子。

如果您确实需要制作自己的手风琴，我建议您为 HTML 使用表格：

<table class="faq">
    <thead>
        <tr><th colspan="2">Questions and Answers</th></tr>
    </thead>
    <tbody>
        <tr><th>-</th><td>My Question Text</td></tr>
        <tr class="selected"><th>A:</th><td>My Question Answer.</td></tr>
        <tr><th>+</th><td>My Question Text</td></tr>
    </tbody>
</table>

您在此处对表格数据进行建模，并且表格是对表格数据进行建模的良好构造。如果您使用表格，CSS 将非常简单。 例子。

如果您担心以后需要更改格式，请在此时进行重组。您不应该为未来的 HTML 标记重构而烦恼，除非您认为它可能会发生并且预先为避免它而付出的努力是值得的。

于 2013-05-21T04:19:44.497 回答