CSS/样式建议

Question

我试图让这看起来不那么幼稚。我想知道是否有人可以给我一些建议，让我看起来更专业一点。我想要做的只是划分这三个部分。但这看起来像是我 2 岁的儿子创造的。非常感谢任何帮助或指点!

http://jsfiddle.net/7hffq081/

.mobilehomelabel {
    color: red;
}

.test {
    outline:1px solid red;
}

Answer 1

尝试使用内部 div 的边距改进布局，并使标题文本大于子文本。您还可以应用不同的颜色使其脱颖而出，并为奇数/偶数行创建不同的颜色以区分它们。添加 border-radius 以进行额外润色。为了 super 精美的修饰，为您的子行添加悬停并为您的包装添加框阴影。

.test {
    border:3px solid black;
    border-radius:10px;
    box-shadow:0px 0px 10px rgba(0,0,0,0.8);
}

.test div {
    padding:15px;
}

.mobilehomelabel {
    color: black !important;
    padding:20px !important;
    background-color:rgba(110,234,139,0.6);
    font-weight:500;
    font-size:1.5em;
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

.sub {
    color:white;
    background-color:rgba(190,20,20,1);
}
.sub:nth-child(odd) {
    color:white;
    background-color:rgba(100,180,200,1);
}
.sub:last-child {
  
    border-bottom-left-radius:6px;
    border-bottom-right-radius:6px;
}

.sub:hover {
  color:black;
  background-color:rgba(210,215,211,0.7);
}

<div class='test'>
    <div class='mobilehomelabel'>Home 1</div>
    <div class='sub'>Words</div>
    <div class='sub'>Words</div>
    <div class='sub'>Words</div>
    <div class='sub'>Words</div>
</div>

使用的样式都是一次性的，尤其是颜色。考虑研究网站并检查他们使用的样式。