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>

enter image description here

如何添加图片和背景颜色（两者都占据网页的50％和50％）？ bg颜色上的图像和徽标标题应该有一个表格。表单和徽标应位于max-width:1180内。接触应浮在图像的右侧，徽标应浮动到bg颜色的左侧。我想这样做三个小时。请帮帮我。

Answer 1

这是一个小代码笔，可以帮助您入手。我正在使用弹性框并将容器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 个答案: