如何设计我的手风琴样式？答案

【问题标题】：How do I style my accordion?如何设计我的手风琴样式？
【发布时间】：2017-06-11 16:43:03
【问题描述】：

我创建了一个手风琴，它看起来非常基本。我想要让它看起来更时尚并具有悬停效果的提示。我还附上了我网站部分的截图。我认为那个部分看起来最难看，有什么技巧可以更好地设计那个部分吗？

P.S - 我的声望不到 10，我不能发布超过两个链接，所以我使用（点）链接到我的图像。

截图：

imgur(dot)com/a/dCw2H

imgur(dot)com/a/UcSfF

imgur(dot)com/a/4J9Xa

这是代码

 #wrapper {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
            }

         .accordionButton {
            width: 100%;

            background: #7cfc00;
            border-bottom: 1px solid #FFFFFF;
            cursor: pointer;
            color: #fff;
            }

         .accordionContent {
            width: 100%;

            background: #fff;
             padding: 0.9375em;

     background-color: #f3f3f3;
     color: #777;
     font-size: 10pt;
     line-height: 16pt;
            }

html代码

  <div id="wrapper">
        <div class="accordionButton">monday</div>
        <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
        <div class="accordionButton">tuesday</div>
        <div class="accordionContent">sunny<br /><br /><br /><br /><br />more weather</div>
        <div class="accordionButton">wednesday</div>
        <div class="accordionContent">sunny<br />more weather</div>
        <div class="accordionButton">thursday</div>
        <div class="accordionContent">sunny<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />more weather</div>
    </div>

https://jsfiddle.net/gok6bar7/

【问题讨论】：

w3schools.com/howto/howto_js_accordion.asp
1.在您的 jsfiddle 中，手风琴没有任何功能。 2. 让您的手风琴看起来“属于”您的网站（颜色、字体等）。不知道你到底想从我们这里得到什么。这是一个很容易得到opinion-based 答案的问题
我只想在背景和悬停效果下看起来不错。就像手风琴漂浮在背景上一样。我愿意接受建议

标签： javascript html css twitter-bootstrap-3 accordion

【解决方案1】：

您似乎是在问一个主要与设计相关的问题，根据您问的对象，它会得到不同的答案。让您的网站看起来“不错”并提高整体易用性的一些基本建议如下：

选择一个配色方案 - 它们有很多颜色在您的页面上争夺注意力。简单通常是最好的，我会尝试替换柠檬绿。
使文本可读 - 石灰绿色上的白色文本给人以侵略性和不可读的感觉。为了使白色文本可读，请确保使用深色背景。
区分不同类型的文本 - 尝试增大手风琴按钮类的字体大小（因为它是标题）或完全使用不同的字体或字体粗细。
让内容呼吸 - 尝试在手风琴的文本周围添加更多空间（填充）以打开布局。当项目靠得太近时，它们会让人难以看清。

这只是一个开始的建议！有很多关于基本网页设计的精彩文章随处可见。这是一个帮助您入门的方法。

http://www.yourhtmlsource.com/myfirstsite/basicwebdesign.html

【讨论】：