Question

我创造了一个手风琴，它看起来非常基本。我想要一些提示，让它看起来更时尚，并具有悬停效果。我还附上了我网站部分的一些截图。我觉得那个部分看起来最丑陋，有没有提示设计那个部分更好？

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

截图：

imgur（点）的COM /一个/ dCw2H

imgur（点）的COM /一个/ UcSfF

imgur（点）的COM /一个/ 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/

Answer 1

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

选择一种配色方案 - 它们有很多颜色可以在您的页面上引起注意。简单通常是最好的，我会尝试更换柠檬绿。
使文字可读 - 柠檬绿的白色文字感觉有侵略性且难以理解。要使白色文字易于阅读，请务必使用深色背景。
区分不同类型的文本 - 尝试将accordionButton类的fontsize更大（因为它是标题）或完全使用不同的字体或字体权重。
让内容呼吸 - 尝试在手风琴的文本周围加入更多空间（填充）以稍微打开布局。如果物品距离过近，则会让人感到困惑。

这只是一个开始的建议！有很多关于基本网页设计的精彩文章。这是一个让你入门的。

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

我如何设计手风琴？

1 个答案: