Question

我试图通过表单提交来设置我的感谢页面样式。它必须包括： - 页面背景颜色 - 用户个人资料图片占位符周围的边框 - 高于您的用户信息一行，低于您的用户信息。

“谢谢”页面由三列组成：第1列用于用户配置文件图像第2列用于除注释之外的所有表单信息第3栏用于评论。

这是感谢页面的HTML代码：

＆＃13;

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

＆＃13;

return $this->validator
            ->where('name', '=', $code)
            ->where('date_end', '>=', $dateToday)
            ->where('availability', '=' ,0)
            ->first();

＆＃13;

如何改进这些页面？

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

造型谢谢你页面

1 个答案: