定制DIV面板CSS

Question

我可以创建一个CSS面板就像下面举的CSS脚本，而不使用引导程序库

<style type="text/css"> 

.panel-custom-horrible-red { 
    border-color: #ff0000; 
} 
.panel-custom-horrible-red > .panel-heading { 
    background: #ff0000; 
    color: #ffffff; 
    border-color: #ff0000; 
} 
</style> 

HTML

<div class="panels panels-custom-horrible-red"> 
    <div class="panels-heading"> 
     <h3 class="panel-title">Panel title</h3> 
    </div> 
    <div class="panel-body"> 
     Panel content 
    </div> 
</div> 

是否有可能创建一个独立的CSS面板没有引导库。许多谢谢

Answer 1

这是如何开始。 'box'后面的数字表示您想要连续放置多少个数，并且您需要相应地调整css中的该类的宽度，例如33％为3，25％为4等。

.box { 
 
    position: relative; 
 
    width: 100%; 
 
    background-color: pink; 
 
} 
 
.box2 { 
 
    position: relative; 
 
    float: left; 
 
    width: 49.5%; 
 
    border: 2px solid black; 
 
    background-color: lightblue; 
 
} 
 
.clear-float { 
 
    clear: both 
 
}

<div class='box'> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='box2'> 
 
    contained box 
 
    </div> 
 
    <div class='clear-float'> 
 
    </div> 
 
</div>