Question

我需要使这个标题与下图完全相同。中间的文字和每侧的2张图片。我已经尝试了所有的东西，唯一能让我成功的方法就是将孔标题变成整个图像（不好）。顺便说一句，它需要响应移动访问，因为整个页面是（我正在使用bootstrap）。这是我的整个代码（我想唯一重要的部分是<header>）：

<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）：

这就是我的页面现在的样子：

Answer 1

根据评论修改。

使您的图片徽标具有相同的尺寸（我使用了600×345px，但调整了您的利益）。
将行容器设置为flex，使文本垂直居中到徽标。
在CSS中设置img width:100%以保持视口大小的比例调整。
根据您的利益调整.headerText font-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>

Answer 2

第一步：划分你的（Screenshot_1.png）图片文件

首先，您需要将图像（Screenshot_1.png）分成3个部分。这样，您将拥有3个图像文件，如下所示：

图片1：你的左翼会徽。
图片2：您的中心文字。
图片3：您的正确徽标。

在将图像分为3个部分时，您会发现您将能够确保它们对显示的屏幕尺寸做出响应。无论是在尺寸方面还是在尺寸方面，它们都是“堆叠”。在较小的设备上相互叠加，例如手机。

第二步：Bootstrap安装：

前往Bootstrap并按照指南安装Bootstrap到您的网站。成功安装Bootstrap后，您将能够访问其CSS类，这将使您的网站变得响应。

其他资源：Bootstrap Grid Layout

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

如果您已正确安装Bootstrap文件，则可以使用以下代码替换标头代码。不要忘记用正确的图像SRC替换[图像1]，[图像2]和[图像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列组成。＆＃39;。在分配列号（＆＃39; col-xs-4＆＃39;等）时，请确保每行的列总数为12.上述情况应该可以正常工作，但您可能需要修改数字，以便为您的网站获得正确的列宽。

如何使用CSS创建此标头？

2 个答案: