如何添加圖像和背景色？

Question

 .banner-logo-container { padding-top: 37px; padding-bottom: 37px; overflow: hidden; } .banner-logo-container .banner-holder { max-width: 1180px; overflow: hidden; margin: 0 auto; } .banner-logo-container .form-content{ width: 590px; color: white; font-size: 30px; font-family: 'Lato', sans-serif; font-weight: 900; float: left; padding-top: 19px; padding-bottom: 600px; text-transform: uppercase; background-color:red; } .banner-logo-container .form-content form{ float: righr; } .banner-logo-container .logo-content { width: 590px; color: white; font-size: 30px; font-family: 'Lato', sans-serif; font-weight: 900; float: right; padding-top: 19px; padding-bottom: 600px; text-transform: uppercase; background-color: #0b224b; }

  <html> <head> <title>Page Title</title> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1.0"> </head> <body> <div class="banner-logo-container"> <div class="banner-holder"> <div class="form-content"> <form> <label>Contact Us</label> <label>Bold labels are required</label> <input type="text" value="name"> <input type="email" value="Email Address"> <input type="text" value="Phone"> </form> </div> <div class="logo-content"> Logo </div> </div> </div> </body> </html>

在此處輸入圖片說明

如何添加圖像和背景色（兩者都應占網頁的50％和50％）？ 圖片上應有表格，bg顏色上應有徽標標題。 表單和徽標應位於max-width:1180 。 聯系人應浮動在圖像的右側，徽標應浮動在bg顏色的左側。 我試圖做三個小時。 請幫我。

Answer 1

這是一支小碼筆，可以幫助您入門。 我正在使用flex box並將兩個容器div的寬度都設置為50％，因此每個div占用屏幕的一半。 現在，您只需要更改背景，然后將所需元素放在代碼筆上即可。

<div class="container">
  <div class="div1">
    test1
  </div>
  <div class="div2">   
    test2
  </div>
</div>

.container{
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
}
.div1{
  background:green;
  height:100%;
  width:50%;
}

.div2{
  background:red;
  height:100%;
  width:50%;
}

https://codepen.io/kelinox/pen/ZoEKRa

如何添加圖像和背景色？

問題描述

1 個解決方案

解決方案1
0 2018-04-18 11:10:02

如何添加圖像和背景色？

問題描述

1 個解決方案

解決方案1 0 2018-04-18 11:10:02

解決方案1
0 2018-04-18 11:10:02