在网页上绘制3个垂直条带
在网页上绘制3个垂直条带
提问于 2018-07-25 02:56:50
我在web开发方面是个新手。我试着画3个垂直带(蓝色，白色和红色)，它们从页面的顶部到底部，但我不知道怎么做。
<% include partials/header %>
<div class="container">
<div class="row">
<div class="col-lg-12"> <h3 style="text-align: center">A QUEIJARIA</h3></div>
</div>
<hr>
<h1 style="text-align: center">alguma frase bacana pra colocar aqui</h1>
<div class="row">
<div class="col-lg-6"> <p class="colunas">Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </div>
<div class="col-lg-6"> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </div>
</div>
<div class="botao">
<a class="btn btn-primary btn-large" href="quemsomos" >Mais detalhes!</a>
</div>
<div class="row">
<div class="col-lg-12"> <h3 style="text-align: center">NOSSOS PRODUTOS</h3></div>
<hr>
</div>
<div class="row">
<div class="col-lg-4">
<div class="thumbnail">
<img class="img_queijo">
<div class="caption">
<h4>Queijos Massa mole afinado</h4>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="thumbnail">
<img class="img_queijo">
<div class="caption">
<h4>Queijos Massa semidura</h4>
</div>
</div>
</div>
<div class="botao">
<a class="btn btn-primary btn-large" href="produtos" >Nossos Queijos!</a>
</div>
</div>
</div>
<% include partials/footer %>回答 1
Stack Overflow用户
发布于 2018-07-25 04:07:15
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SimpleByMe</title>
</head>
<style type="text/css">
@media screen and (min-width: 480px)
{
.col-lg-4{
width: 33.33%;
float: left;
}
.d1
{
background-color: green;
}
.d2
{
background-color: red;
}
.d3
{
background-color: blue;
}
</style>
<body>
<!-- add data between <div> it will a automatically expand vertically -->
<div class ="col-lg-4 d1">1st</div>
<div class ="col-lg-4 d2"> 2nd</div>
<div class ="col-lg-4 d3"> 3rd</div>
</body>
</html> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51505749
复制相关文章
相似问题
腾讯云开发者
