Styling Thank You Page

Question

Я пытаюсь подстроить страницу «Спасибо» от представления формы. Он должен включать в себя: - цвет фона страницы - граница вокруг профиля пользователя место для хранения изображений - одна строка над вашей информацией пользователя и ниже вашей информации о пользователе.

благодарственной страница состоит из трех колонок: Колонка 1 для профиля пользователя изображений Колонка 2 для всех форм информации, за исключением комментариев Колонка 3 для комментариев.

Вот HTML код страницы You Спасибо:

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