我们的页面看起来像这样
我们想要这样显示:
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>