登录
当前位置： 首页 > 面试题库 >

显示页面的背景颜色并使文本居中对齐

法浩壤
2023-03-14
问题内容：

我们的页面看起来像这样

我们想要这样显示：

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>

请帮助我找到解决方案。

提前致谢


问题答案：

替换此样式并检查它

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


 类似资料：
  • CSS颜色与背景颜色与背景？

    在超文本标记语言中，我什么时候使用颜色，背景颜色和背景标签有什么区别？ 有什么区别？

  • 背景颜色

    background(int $color, int $pattern = self::PATTERN_SOLID): self int $color $format = new \Vtiful\Kernel\Format($fileHandle); ​ $backgroundStyle = $format->background( \Vtiful\Kernel\Format::COLO

  • 背景颜色未显示在打印预览中

    问题内容： 我正在尝试打印页面。在该页面中，我为表格提供了背景色。当我在chrome中查看打印预览时，它不具有背景色属性… 所以我尝试了这个属性： 但仍然没有显示颜色。 问题答案： Chrome CSS属性可以正常工作。 但是，确保您拥有正确的CSS进行打印通常很棘手。可以做几件事来避免您遇到的困难。首先，将所有打印CSS与屏幕CSS分开。这是通过和完成的。 通常，仅设置一些额外的CSS是不够的，

  • Android Studio IDE - 终端背景文本颜色与终端背景颜色不同

    我最近在我的Windows 10计算机上安装了Android Studio，我正在尝试解决内置终端中的背景色不协调问题。此处为屏幕截图。当我在Ubuntu 14.04上使用Android Studio时，我没有遇到过这个问题。 文本背景的颜色是黑色，而控制台背景的颜色是白色。这个问题与我使用Git Bash作为终端无关，因为当我使用Windows命令提示符时也会出现这个问题。 我已经检查了设置——

  • JTextPane背景颜色

    我正在制作一个基于文本的游戏，用户输入文本来解决游戏。我决定使用JavaSwing来显示文本，我希望文本窗格的背景为黑色。我已经尝试了所有我发现的东西（注释掉了），但是没有一个看起来有效。 这里没有显示导入的图片，但是当我使用任何被注释掉的部分运行游戏时，游戏中没有错误。

  • 4.5.1 背景颜色

    背景颜色是背景应用中最基础的属性，使用 background-color属性，几乎可以为任何元素定义背景颜色，该属性不能被继承，其默认值是 transparent，即透明背景。也就是说，如果一个元素没有显式定义背景颜色，那么其背景是透明的，就可以透过该元素看到其祖先元素的背景。 background-color属性接受任意合法的CSS颜色值，如预定义的颜色名、十六进制数值、RGB值、RGB百分比、

相关阅读

更改其中的JMenuBar和JMenu对象的背景和文本颜色如何在Java中使用iText添加pdf的页面背景颜色多个背景图像和背景颜色js点击列表文字对应该行显示背景颜色的实现代码如何在Java中为Word文档（.doc或.docx）设置背景色（页面颜色）？

相关文章

HTML 颜色JavaFX颜色Matplotlib显示中文字体HTML 颜色名HTML 颜色值

相关问答

基于背景图像的文本颜色变换Android：更改按钮文本和背景颜色当背景可绘制设置时，ListView项不显示按下的背景颜色在gmail中不显示背景颜色的电子邮件报告在RecyclerView的OnBindViewHolder中更改视图的文本颜色或背景色

相关工具

IOS中解析并显示Gif文件UITableView背景随动颜色放置主题颜色切换控制设备背景代码

相关文档

网页安全配色手册OpenLayers 示例 中文版Java 并发中文教程Python 并发中文教程更好的 Java 中英文对照
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.