显示页面的背景颜色&在中心对齐文本 [英] display background color for the page & align texts at center
本文介绍了显示页面的背景颜色&在中心对齐文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们的网页看起来像这样：链接
we have page looking like this : link
我们要显示如下：
1）我们需要在中心显示文本和文本字段
1)we need to display the text and textfields at the center
2 ）我们需要为页面的某些部分添加背景颜色
2)we need to add the background -color for some part of the page
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>
请帮助我找到解决方案。
please help me to find solution.
提前感谢
推荐答案
替换此样式并检查
<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>
这篇关于显示页面的背景颜色&在中心对齐文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
