CSS /样式建议

Question

我试图让这看起来不那么幼稚。我想知道是否有人可以给我一些指示，使这个看起来更专业。我想要做的只是将这三个部分分开。但这看起来就像我2岁的儿子创造了它。任何帮助或指示将不胜感激！

http://jsfiddle.net/7hffq081/

.mobilehomelabel {
    color: red;
}

.test {
    outline:1px solid red;
}

Answer 1

尝试使用内部div的边距改进布局，并使标题文本大于子文本。您还可以应用不同的颜色使其脱颖而出，并为奇数/偶数行创建不同的颜色以区分它们。添加border-radius以获得额外的抛光效果。对于超级花哨的抛光，请为您的子行添加悬停并为包装器添加框阴影。

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

使用的样式是丢失的，尤其是颜色。考虑研究网站并检查他们使用的样式。

Answer 2

我刚刚对你所做的主题做了一点改动

http://jsfiddle.net/7hffq081/2/

<div class="mobilehomelabel">Mobile Home 1</div>

改变的css

.mobilehomelabel {
color: red;
padding-bottom:3px;
margin-bottom:5px;
width:100%;
border-bottom:1px solid red;
}
.test {
border:1px solid red;
border-radius:2px;
padding:5px;
}