显示页面的背景颜色＆amp;在中心对齐文本

Question

我们的网页看起来像这样：link

我们希望显示如下：

1）我们需要在中心显示文本和文本域

2）我们需要为页面的某些部分添加背景颜色

CSS

<style type="text/css">

.career-page-box .page-title {
  margin: 10px 0 0px 0;
  padding: 0;
  clear: both;
}
.career-page-box .page-title h1 {
  margin: 0;
  padding: 0 0 8px 0;
}
.career-page-box .fill-out {
  border-bottom: #ddd solid 1px;
  padding: 0 0 10px 0;
  margin: 0px 0 10px 0;
}
.career-page-box .form-panel {
  padding: 0;
}
.career-page-box .form-panel .required {
  margin: 10px 0 8px;
}
.career-page-box .form-panel .form-group {
  float: left;
  clear: both;
  width: 49.8%;
}
.career-page-box .form-panel .form-group .form-list li {
  float: left;
  width: 100%;
}
.career-page-box .form-panel .form-group .form-list li label {
  line-height: 30px;
  padding-right: 30px;
}
.career-page-box .form-panel .form-group .form-list li label em {
  color: #df280a;
  margin: 0 0 0 2px;
  font-style: normal;
}
.career-page-box .form-panel .form-group .custom-select {
  float: left;
  width: 100%;
  margin: 0 0px 0 0;
  background-position: 98% 50%;
}
.career-page-box .form-panel .form-group .custom-select select {
  margin-top: 0;
}
.career-page-box .form-panel .buttons-set {
  border-top: 0;
}
.career-page-box .form-panel .buttons-set button.button {
  float: left !important;
  margin-right: 5px;
}

.custom-select {
  border: 1px solid #ccc!important;
  width: 120px;
  height: 30px;
  overflow: hidden;
  background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
}
.arrow-up {
  background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
  height: 15px;
  width: 25px;
  position: absolute;
  right: 25px;
  top: -15px;
}
.custom-select select {
  padding: 5px 8px!important;
  width: 100%;
  border: none;
  box-shadow: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  width: 100%;
  max-width: 100%;
}
input[type=email],
input[type=search],
input[type=number],
input[type=password],
input[type=tel],
input[type=text] {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #d1d1d1;
  background: #FFFFFF;
  font-size: 13px;
}
.careercv
{
  padding-top: 10px;
}

</style>

HTML

<div class="career-page-box">
  <div class="page-title career-title">
    <h1><?php echo $this->__('Career') ?></h1>
  </div>
  <?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
  <form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype='multipart/form-data'>
    <div class="fill-out"><?php echo $this->__('Please fill out the following information.') ?></div>
    <div class="form-panel">
      <div class="inner-panel">
        <p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
              <div class="custom-select">
                <select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
                  <option value="">Please Select</option>
                  <option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
              ?>selected="selected"<?php } ?>>NewsPaper</option>
                  <option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
                  <option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
                </select>
              </div>
            </li>
            <li>
              <label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
              <?php  $jobs=Mage::getStoreConfig('career/career/job_list');
           if($jobs!='')
           $jobsselected=explode(",",$jobs);
         else
          $jobsselected='';

           ?>
              <div class="custom-select">
                <select name="job" id="job" class="form-control required-entry">
                  <option value=""> Please Select </option>
                  <?php foreach($jobsselected as $jobs): ?>
                  <option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
                  <?php endforeach; ?>
                </select>
              </div>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
              <input name="fname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
            </li>
            <li>
              <label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
              <input name="lname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
              <input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
              <input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
              <input name="cv" class="form-control required-file careercv" type="file" />
            </li>
          </ul>
        </div>
        <div class="buttons-set">
          <button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript">
//<![CDATA[
   var carrerForm = new VarienForm('carrer_form', true);
//]]>
</script>
</div>

请帮我找到解决方案。

提前致谢

Answer 1

替换此样式并检查

  <style type="text/css">
    .career-page-box{
        width: 90%;
        margin: auto;
        background: #fff;
    }
    .career-page-box .page-title {
      margin: 10px 0 0px 0;
      padding: 0;
      clear: both;
    }
    .career-page-box .page-title h1 {
      margin: 0;
      padding: 0 0 8px 0;
      text-align:center;
    }
    .career-page-box .fill-out {
      border-bottom: #ddd solid 1px;
      padding: 0 0 10px 0;
      margin: 0px 0 10px 0;
      text-align: center;
    }
    .career-page-box .form-panel {
      padding: 0;
       text-align:center;
    }
    .career-page-box .form-panel .required {
      margin: 10px 0 8px;
    }
    .career-page-box .form-panel .form-group {
      clear: both;
      width: 49.8%;
      margin:auto;
      text-align:left;
    }
    .career-page-box .form-panel .form-group  label{
      text-align:left !important;
    }
    .career-page-box .form-panel .form-group .form-list li {
      float: left;
      width: 100%;
    }
    .career-page-box .form-panel .form-group .form-list li label {
      line-height: 30px;
      padding-right: 30px;
    }
    .career-page-box .form-panel .form-group .form-list li label em {
      color: #df280a;
      margin: 0 0 0 2px;
      font-style: normal;
    }
    .career-page-box .form-panel .form-group .custom-select {
      float: left;
      width: 100%;
      margin: 0 0px 0 0;
      background-position: 98% 50%;
    }
    .career-page-box .form-panel .form-group .custom-select select {
      margin-top: 0;
    }
    .career-page-box .form-panel .buttons-set {
      clear:both;
      border-top: 0;
    }
    .career-page-box .form-panel .buttons-set button.button {

    }

    .custom-select {
      border: 1px solid #ccc!important;
      width: 120px;
      height: 30px;
      overflow: hidden;
      background: #fff url("../images/custom-select-downarrow.png") no-repeat 95% 50%;
    }
    .arrow-up {
      background: transparent url("../images/arrow-up-white.png") no-repeat scroll 0 0;
      height: 15px;
      width: 25px;
      position: absolute;
      right: 25px;
      top: -15px;
    }
    .custom-select select {
      padding: 5px 8px!important;
      width: 100%;
      border: none;
      box-shadow: none;
      background: transparent;
      background-image: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
    }
    input[type=email],
    input[type=search],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text] {
      width: 100%;
      max-width: 100%;
    }
    input[type=email],
    input[type=search],
    input[type=number],
    input[type=password],
    input[type=tel],
    input[type=text] {
      height: 32px;
      padding: 0 8px;
      border: 1px solid #d1d1d1;
      background: #FFFFFF;
      font-size: 13px;
    }
    .careercv
    {
      padding-top: 10px;
    }

    </style>

替换代码

<div class="career-page-box">
  <div class="page-title career-title">
    <h1><?php echo $this->__('Career') ?></h1>
  </div>
  <?php $careerForm=Mage::getSingleton('core/session')->getFormData();?>
  <form action="<?php echo mage::getUrl('career/index/save'); ?>" id="carrer_form" method="post" name="carrer_form" enctype='multipart/form-data'>
    <div class="fill-out"></div>
    <div class="form-panel">
      <div class="inner-panel">
        <p class="required"><?php echo $this->__('Required Fields') ?><em>*</em></p>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="jobtitle"><?php echo $this->__('How did you hear about us') ?><em>*</em></label>
              <div class="custom-select">
                <select name="jobtitle" id="jobtitle" class="validate-select form-control required-entry">
                  <option value="">Please Select</option>
                  <option value="NewsPaper" <?php if($careerForm['jobtitle']=="NewsPaper"){
              ?>selected="selected"<?php } ?>>NewsPaper</option>
                  <option value="onlinsite" <?php if($careerForm['jobtitle']=="onlinsite"){?>selected="selected"<?php } ?>>Online Website</option>
                  <option value="Friends" <?php if($careerForm['jobtitle']=="Friends"){?>selected="selected"<?php } ?>>Friends</option>
                </select>
              </div>
            </li>
            <li>
              <label for="jobtitle"><?php echo $this->__('Job Type') ?><em>*</em></label>
              <?php  $jobs=Mage::getStoreConfig('career/career/job_list');
           if($jobs!='')
           $jobsselected=explode(",",$jobs);
         else
          $jobsselected='';

           ?>
              <div class="custom-select">
                <select name="job" id="job" class="form-control required-entry">
                  <option value=""> Please Select </option>
                  <?php foreach($jobsselected as $jobs): ?>
                  <option value="<?php echo $jobs ?>"> <?php echo $jobs; ?> </option>
                  <?php endforeach; ?>
                </select>
              </div>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="firstname"><?php echo $this->__('First Name') ?><em>*</em></label>
              <input name="fname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['fname'];?>"/>
            </li>
            <li>
              <label for="lastname"><?php echo $this->__('Last Name') ?><em>*</em></label>
              <input name="lname" class="form-control required-entry"  size="45" type="text" placeholder="<?php echo $this->__('') ?>" value="<?php echo $careerForm['lname'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="emailaddress"><?php echo $this->__('Email address') ?><em>*</em></label>
              <input name="email_address" placeholder="<?php echo $this->__('') ?>" class="form-control required-entry validate-email" type="text" value="<?php echo $careerForm['email_address'];?>"/>
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="telephonenumber"><?php echo $this->__('Telephone Number') ?><em>*</em></label>
              <input name="phone" class="form-control required-entry validate-number" type="text" value="<?php echo $careerForm['phone'];?>" />
            </li>
          </ul>
        </div>
        <div class="form-group">
          <ul class="form-list">
            <li>
              <label for="cv"><?php echo $this->__('Upload Your Cv') ?><em>*</em></label>
              <input name="cv" class="form-control required-file careercv" type="file" />
            </li>
          </ul>
        </div>
        <div class="buttons-set">
          <button class="button" title="<?php echo $this->__('Submit Your Cv'); ?>" type="submit"><span><span><?php echo $this->__('Submit Cv') ?></span></span></button>
        </div>
      </div>
    </div>
  </form>
  <script type="text/javascript">
//<![CDATA[
   var carrerForm = new VarienForm('carrer_form', true);
//]]>
</script>
</div>

Answer 2

首先给主容器添加背景颜色

.main {
    margin: 0 auto;
    width: 1000px;
    background: #fff;
    padding:10px;
}

• 从面包屑中删除负边距
• 对于表单，给出百分比宽度和使用余量：0px auto
• 向输入元素添加100％宽度
• 中心标题和其他基本样式

Answer 3

In order to give Page color at particular section you need to apply the .CSS on div or internal div tag.

just say for the following HTML tag.

<div class="career-page-box">
  <div class="page-title career-title">
  </div
</div>

If i want to give background color to the particular section of the page having div tag with class as page-title, so i will write the .css code like this:

.career-page-box .page-title{
background: red;
}

// This code is for coloring a particular section of any HTML page by using div tag.