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問題

回答

相關問題