HTML和CSS与div问题

-3

我是初学者在CSS & HTML，并仍在学习它。HTML和CSS与div问题

我想要得到这样的结果：

谁能帮助我解决我的问题？

这里是我的代码：

body { 
 
    background: black; 
 
} 
 

 
.process { 
 
    background-color: rgba(255, 255, 255, 0.15); 
 
    height: 255px; 
 
    width: 630px; 
 
} 
 

 
.process img { 
 
    text-align: center; 
 
    display: block; 
 
    padding-top: 40px; 
 
    padding-bottom: 33px; 
 
} 
 

 
.lockup { 
 
    text-align: center; 
 
} 
 

 
.lockup h2 { 
 
    color: #5db442; 
 
    font-size: 26px; 
 
    font-weight: 100; 
 
    text-transform: uppercase; 
 
} 
 

 
.sign { 
 
    
 
} 
 

 
.fill { 
 
    
 
    
 
} 
 

 
.fill p { 
 
    color: white; 
 
}

<div class="process"> 
 
       
 
       <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 
 
       
 
       <div class="lockup"> 
 
       
 
        <div class="sign"> 
 
        <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> 
 
        </div> 
 
        
 
        <div class="fill"> 
 
         <h2>Signup Process</h2> 
 

 
        <p>1. User enters email address</p> 
 
         <p> 2. Clicks on "Sign up for free"</p> 
 
        </div> 
 
        
 
       </div> 
 
       
 
      </div>

请帮助表示感谢。

来源

2016-06-09 Ryan Riel

你已经尝试什么，哪里是你的CSS呢？ – Murali

@Ryan即使如果你是初学者，这并不意味着你不应该试图自己解决它，而不是张贴在SO上给你解决方案。 –

穆罕默德我已经尝试了10次以上仍然无法获得解决方案，这就是为什么我已经发布了这个。 –

请看下面的jsFiddle，我希望它适合你。 jsFiddle Link

<div class="process"> <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 
    <div class="lockup"> 
    <div class="sign"> <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> </div> 
    <div class="fill"> 
     <h2>Signup Process</h2> 
     <p>1. User enters email address</p> 
     <p> 2. Clicks on "Sign up for free"</p> 
    </div> 
    </div> 
</div> 

<style> 
body { 
    background: black; 
} 
.process { 
    background-color: rgba(255, 255, 255, 0.15); 
    height: 255px; 
    width: 630px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.process img { 
    /*text-align: center; 
    display: block;*/ 
    padding-top: 40px; 
    padding-bottom: 33px; 
} 
.lockup { 
    text-align: center; 
} 
.lockup h2 { 
    color: #5db442; 
    font-size: 26px; 
    font-weight: 100; 
    text-transform: uppercase; 
} 
.sign { 
    float: left; 
    width: 43%; 
    text-align: right; 
} 
.fill { 
    float: left; 
    text-align: left; 
    padding-left: 4%; 
} 
.fill p { 
    color: white; 
} 
</style>

来源

2016-06-09 05:31:53 TechYogi

yay谢谢。但我有一个问题，为什么使用宽度和填充百分比？ –

如果您想在某些时候使其响应，您可以设置媒体查询来处理该问题，百分比将有所帮助。你可以通过给PX来做，但我这样做。 :) 每个人都有自己的工作风格/编码。希望有所帮助。 – TechYogi

看看下面的代码或这是的jsfiddle链接：https://jsfiddle.net/hmxbes8u/2/

我希望这会帮助你。

HTML

<div class="process"> 

       <img src="http://s33.postimg.org/m5kmwz9ov/upanddown.png"/> 

       <div class="lockup"> 

        <div class="sign"> 
        <img src="http://s33.postimg.org/h2h988fdb/signup.png" /> 
        </div> 

        <div class="fill"> 
         <h2>Signup Process</h2> 

        <p>1. User enters email address</p> 
         <p> 2. Clicks on "Sign up for free"</p> 
        </div> 

       </div> 

      </div>

CSS：

body { 
    background: black; 
} 

.process { 
    background-color: rgba(255, 255, 255, 0.15); 
    height: 255px; 
    width: 630px; 
    position:relative; 
    text-align: center; 
} 

.process > img { 
    text-align: center; 
    display: inline-block; 
    padding-top: 40px; 
    padding-bottom: 33px; 
} 

.lockup { 
    text-align: center; 
    position:absolute; 
    top:100px; 
    right:0; 
    left:0; 

} 

.lockup h2 { 
    color: #5db442; 
    font-size: 26px; 
    font-weight: 100; 
    text-transform: uppercase; 
    margin-top:0; 
} 

.sign { 
    display:inline-block; 
    vertical-align:top; 
    margin-right:30px; 
} 

.fill { 
    display:inline-block; 
    text-align:left; 

} 

.fill p { 
    color: white; 
}

来源

2016-06-09 05:37:16

HTML和CSS与div问题

回答

相关问题