如何使用CSS创建此标头？

-1

我需要使这个标题完全像下面的图片。中间有文字，每边有2张图片。我尝试过所有的事情，唯一的成功方式是将洞头变成一个完整的图像（不好）。顺便说一句，它需要响应移动访问，因为整个页面（我正在使用引导程序）。这里是我的整个代码（我想唯一的重要组成部分，是<header>虽然）：如何使用CSS创建此标头？

<body>   
     <header> 
      <div class="row"> 
       <div class="col-sm-2 col-xs-1"></div> 
       <div class="col-sm-8 col-xs-10"> 

        <img class="img-responsive logoheader" src="files/Screenshot_1.png" alt=""/> 

       </div> 
       <div class="col-sm-2 col-xs-1"></div> 
      </div> 
     </header> 
     <div class="jumbotron"> 
     <div class="container-fluid"> 
      <div class="row"> 
       <div class="col-sm-3 col-xs-1"></div> 
       <div class="col-sm-6 col-xs-10"> 
        <center> 

        <h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4> 
        <h5>DECRETO 122/2017</h5> 
        </center> 
        <br> 
        <div id="dangerindex" class="alert alert-danger" style="display:none;"> </div> 
        <div id="warningindex" class="alert alert-warning" style="display:none;"> </div> 
        <form name="main-form" id="main-form" method="post" action="index2.php"> 
         <label> NOME COMPLETO DA CRIANÇA:*</label>  
         <div class="input-group"> 
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
          <input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" /> 
         </div> 
         <label> DATA DE NASCIMENTO DA CRIANÇA:*</label> 

         <div class="input-group"> 
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
          <input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker"> 
         </div> 
         <button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> 
         <button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> 
        </form> 

</body>

正如你所看到的，标题只是我想要什么的截图。我怎样才能正确使用CSS？

这里是图像（Screenshot_1.png）：

这是我的页面看起来像现在：

来源

2017-09-29 Fernanda Araujo

这很多将进入这个，但我建议看看boostrap网格。得到它然后它只是微调。 – rjustin

真的吗？我认为这很简单。我试过使用网格，但图像只是得到所有炒，而不是在正确的地方。 –

你是否在标题中分别显示了这些图像？ – rjustin

编辑基于评论。

使您的图像标志相同的尺寸（我用600×345px，但调整您的利益）。
将您的行容器设置为flex以垂直居中文本到徽标。
在您的CSS中使imgwidth:100%保持视口大小的比例。
调整.headerTextfont-size为您的利益。

Working Resizable Fiddle

有了这个设置，你可以保持在移动设备上排为好，考虑到它的3张图片，可能过多地垂直堆叠它们。

img { 
 
    width: 100%; 
 
} 
 

 
.headerText { 
 
    font-size: 9px; 
 
    line-height: 1.4; 
 
    display: flex; 
 
    flex:1; 
 
    align-items: center; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
/* make text smaller on mobile */ 
 
@media (max-width: 767px) { 
 
    .headerText { 
 
    font-size: 9px; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<header> 
 
    <div class="row flex"> 
 
    <div class="col-xs-4"> 
 
     <img class="img-responsive logoheader" src="https://i.imgur.com/wuEStaT.jpg" alt="" /> 
 
    </div> 
 
    <div class="col-xs-4 text-center text-uppercase headerText"> 
 
     <span> 
 
     prefeitura municipal de guaiba<br> 
 
     estado do rio grande do sul<br> 
 
     gestao 2017/2020<br> 
 
     secretaria municipal de educacao 
 
     </span> 
 
    </div> 
 
    <div class="col-xs-4"> 
 
     <img class="img-responsive logoheader" src="https://i.imgur.com/NInC1cx.jpg" alt="" /> 
 
    </div> 
 
    </div> 
 
</header> 
 
<div class="jumbotron"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-sm-3 col-xs-1"></div> 
 
     <div class="col-sm-6 col-xs-10"> 
 
     <center> 
 
      <h4>INSCRIÇÕES PARA EDUCAÇÃO INFANTIL - 0 ATÉ 5 ANOS</h4> 
 
      <h5>DECRETO 122/2017</h5> 
 
     </center> 
 
     <br> 
 
     <div id="dangerindex" class="alert alert-danger" style="display:none;"> </div> 
 
     <div id="warningindex" class="alert alert-warning" style="display:none;"> </div> 
 
     <form name="main-form" id="main-form" method="post" action="index2.php"> 
 
      <label> NOME COMPLETO DA CRIANÇA:*</label> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span> 
 
      <input maxlength="100" onblur="this.value=this.value.toUpperCase()" type=text name="crianca-nome" id="criancaNome" value="" class="form-control" /> 
 
      </div> 
 
      <label> DATA DE NASCIMENTO DA CRIANÇA:*</label> 
 
      <div class="input-group"> 
 
      <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> 
 
      <input readonly style="background-color: white !important;" type="text" name="crianca-nascimento" id="crianca-nascimento" class="form-control datepicker"> 
 
      </div> 
 
      <button class="btn btn-primary visible-md visible-lg" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> 
 
      <button class="btn btn-primary btn-block visible-sm visible-xs" style="float:right;" type="button" onclick="ChecaIdade()">Próximo</button> 
 
     </form>

来源

2017-09-29 22:55:02 Syden

我已经尝试过类似之前，并得到完全相同的错误，您的代码给我：图像太大，所以我调整了两个（高度：100px），但现在，而不是并排，他们是一个另一个顶部。屏幕截图：https：//i.imgur.com/OOGwl5K.png –

费尔刚刚编辑，现在尝试。注意随着视口缩小的图像会缩小或增大，使用'width：100％'来避免这种失真。如果你想共享你的图像像素尺寸，我可以用它做出例子，或者如果你分别分享它们，我可以添加它们。 – Syden

仍然无法正常工作。如果我把宽度：100％，他们变得巨大，整个页面。顺便说一句，它必须水平对齐移动，即使它缩小了很多。图片：https：//i.imgur.com/3BnnG7s.png和https://i.imgur.com/qrRxyeV.jpg –

步骤一：把你的（Screenshot_1.png）图像文件

首先，你将需要你的形象（Screenshot_1.png）分为3个部分。这样做，你将有3个图像文件，如下：

图片1：你的左边的徽章。
图片2：您的中心文字。
图片3：您的右侧标志。

在将图像分成3部分时，您会发现您将能够确保它们能够响应显示的屏幕尺寸。无论是在大小方面，还是因为它们在较小的设备（如移动电话）上相互堆叠在一起。

第二步：安装引导：

头以上Bootstrap并按照他们的指导上安装引导到您的网站。成功安装Bootstrap后，您将能够访问其CSS类，这将允许您的网站变得快速响应。

其他资源：Bootstrap Grid Layout

第三步：修改你的HTML代码：

如果您安装了正确的引导文件，那么你可以取代你的头的代码，用下面的代码。不要忘记用正确的Image SRC替换[Image 1]，[Image 2]和[Image 3]。

<header> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 1]</div> 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 2]</div> 
     <div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">[Image 3]</div> 
    </div>   
</header>

作为一个附注，值得一提的是，每行都由12个“列”组成。当分配一个列号（'col-xs-4'等）时，确保每行的列加起来最多为12.上面的代码应该可以正常工作，但是你可能需要修改数字，以便获得正确的列宽为您的网站。

来源

2017-09-29 23:09:09 Craig

如何使用CSS创建此标头？

回答

相关问题