造型感謝你頁面

Question

我試圖從窗體提交樣式我的謝謝頁面。它必須包括： - 頁面背景顏色 - 圍繞用戶個人資料圖片佔位符 的邊框 - 比用戶信息高一行，低於您的用戶信息。

感謝頁面由三列組成： 第1欄是用戶的個人資料圖片 第2欄是除註釋所有形式的信息 第3欄是徵求意見。

下面是感謝頁面的HTML代碼：

#columncontainer { 
 
    width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
#column1 { 
 
    float: left; 
 
    width: 240px; 
 
} 
 

 
#column2 { 
 
    float: left; 
 
    width: 480px; 
 
} 
 

 
#column3 { 
 
    float: left; 
 
    width: 240px; 
 
} 
 

 
#footer { 
 
    clear: both; 
 
} 
 

 
#image { 
 
    margin-left: auto; 
 
} 
 

 
#columncontainer { 
 
    background-color: white; 
 
}

<h1>Thank you for your information.</h1> 
 
<h3>Below is your profile information.</h3> 
 

 
<div id="columncontainer"> 
 
    <div id="column1"> 
 

 
    all column 1 data here 
 
    <figure>propic.png <figcaption>Profile Pic</figcaption> </figure> 
 
    </div> 
 

 
    <div id="column2"> 
 
    <hr> 
 
    all column 2 data here 
 
    <hr> 
 
    </div> 
 

 
    <div id="column3"> 
 
    all column 3 data here 
 
    </div> 
 
</div>

我怎樣才能提高這些網頁嗎？

Answer 1

下面的代碼按您的要求：

注意：更改背景顏色和邊框顏色爲你想要的。

<div class="main-div"> 
    <header> 
     <h1>Thank you for your information.</h1> 
     <h3>Below is your profile information.</h3> 
     <hr> 
    </header> 
    <div id="columncontainer"> 
     <div id="column1"> 
      <div class="div-col1"> 
      all column 1 data here 
      <figure>propic.png <figcaption>Profile Pic</figcaption> </figure> 
     </div> 
     </div> 

     <div id="column2"> 
      <div class="div-col2"> 
      all column 2 data here 
      </div> 
     </div> 

     <div id="column3"> 
      all column 3 data here 
     </div> 
    </div> 
</div> 

CSS

header{ 
    text-align: center; 
} 
.main-div { 
    background: #ececec; /*change background color here*/ 
    width: 960px; 
    margin: 0 auto; 
    min-height: 550px; /*minimum page height*/ 
    height: auto; 
} 
#column1, #column2, #column3{ 
    float: left; 
    padding: 0 9px; 
} 
#column1, #column3{ 
    width: 25%; 
} 
#column2 { 
    width: 44%; 
} 
.div-col1{ 
    border: 1px solid #ccc; /*change border color*/ 
    padding: 5px; 
} 
.div-col2{ 
    border-top: 1px solid #ccc; /*change border color*/ 
    border-bottom: 1px solid #ccc; /*change border color*/ 
    padding: 5px; 
} 
#footer { 
    clear: both; 
} 
#image { 
    margin-left: auto; 
}