如何使用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創建此標頭？

回答

相關問題