Javascript 我如何设计我的手风琴？

我创造了一个手风琴，它看起来非常基本。我想要一些提示，让它看起来更时尚，有悬停效果。我还附上了我网站部分的一些截图。我认为那部分看起来最丑，有没有什么建议可以让那部分设计得更好

附言-我的声誉不到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;
            }

  <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>

html代码

 #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;
            }

  <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>

星期一
晴朗的天气更多
星期二
晴朗的天气更多
星期三
晴朗的天气
星期四
晴朗的天气更多

---

你似乎在问一个主要与设计相关的问题，根据你问的人的不同，这个问题会得到不同的答案。以下是一些基本建议，可使您的网站看起来“良好”，并提高整体易用性：

选择一个配色方案-他们有很多颜色在你的页面上争夺注意力。一般来说，简单是最好的，我会尝试更换青柠

使文本可读-石灰绿上的白色文本感觉咄咄逼人且不可读。要使白色文本可读，请确保使用深色背景

区分不同类型的文本-尝试将accordionButton类的fontsize变大（因为它是一个标题），或者完全使用不同的字体或字体大小

让内容呼吸-尝试在手风琴的文本周围增加更多的空间（填充），以打开布局。当物品靠得太近时，它们会让人看不清

这只是一个开始的建议！有很多关于基本网页设计的优秀文章。这里有一个让你开始

---

1。在JSFIDLE中，手风琴没有任何功能。2.让你的手风琴看起来“属于”你的网站（颜色、字体等）。不知道你到底想从我们这里得到什么。这是一个非常基于意见的问题，我只想在背景中看起来不错，并且有悬停效果。就像手风琴漂浮在背景上。我愿意接受建议