造型感谢你页面

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; 
}