等給出如下

Question

Bar with 3 colors red,yellow,green

Answer 1

您需要HTML CSS &的組合如何只使用HTML和CSS顯示吧。 下面的代碼可以幫助你：

<style type="text/css"> 
.box { float:left;width:150px;box-shadow:3px 3px 2px #666767;height:30px; } 
.red { background-color:#ff0000; } 
.yellow { background-color:#ffff00; } 
.green { background-color:#00ff00; } 
</style> 

<div class="box red"></div> 
<div class="box yellow"></div> 
<div class="box green"></div> 

你可以在這裏看到小提琴：fiddle

Answer 2

這是初級水平的問題，在這裏我們代碼的HTML & CSS

.barCont{box-shadow:3px 3px 2px #333;width:240px;float:left;} 
 
.barCont span{display:inline-block;float:left; min-height:15px} 
 
.bar1{background:red; width:80px;} 
 
.bar2{background:yellow; width:80px;} 
 
.bar3{background:green;width:80px;}

<div class="barCont"> 
 
    <span class="bar1"></span> 
 
    <span class="bar2"></span> 
 
    <span class="bar3"></span> 
 
</div>

組合

預覽位於https://jsfiddle.net/itsselvam/9Lvz44bx/