2016-05-16 29 views
-4

我创建了一个页面在这里:http://www.iliveaccountable.com/mytestsite/the-experience/正确的CSS不符合我最初的设计

因为我模仿这个注册节在这里:https://thrivecompany.le-vel.com/Login?ReturnUrl=%2fAccount

但现在,我得到的是搞砸前景看起来不在那个页面上很好。

我应该在我的页面上修改CSS以使它看起来完全是我模仿的页面?

你能帮我检查一下元件,看看有什么需要改变吗?我很困难。

这里是我的HTML:

<div class="column rightside"> 
      <div class="content-block"> 
       <h3><span class="icon16 profile"></span>Create New Customer Account</h3> 

<form action="/Login/CreateAccount" id="CreateAccountForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="aMoBEQMbxqA8VfDiztisqe7tTDwFTiGwrVj7h5XkBWE7HgMGmgevBnzjzxTOb47-X5mgBDl4jXwyseojmOYFDABGXUj91yrEuSbJCsxM9081"> <div class="content-block"> 
     <div class="FormRow"> 
      <strong>Please confirm your referring Promoter:</strong> 
     </div> 
     <div class="FormRow"> 
      <label class="auto"> 
       <input checked="checked" data-val="true" data-val-booleanrequired="You Must Confirm Your Retailer" data-val-required="You Must Confirm Your Retailer" id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="True"> 
       <span class="field-validation-valid" data-valmsg-for="ConfirmRetailer" data-valmsg-replace="true"></span> 
       I was referred by <strong>Nicole Anderson (thrivecompany)</strong> 
      </label> 
     </div> 
     <div class="FormRow"> 
      <label class="auto"> 
       <input id="ConfirmRetailer" name="ConfirmRetailer" type="radio" value="False"> 
       I was referred by someone else 
      </label> 
     </div> 
     <div id="CreateAccount_ChangeReferralForm" class="center" style="display: none;"> 
      <div class="FormRow"> 
       <strong>http:// 
       <input data-val="true" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="That Username does not exist" data-val-remote-additionalfields="*.ChangeUsername" data-val-remote-url="/JSON/CheckUsernameExists" id="ChangeUsername" name="ChangeUsername" type="text" value=""> 
        <span class="field-validation-valid" data-valmsg-for="ChangeUsername" data-valmsg-replace="true"></span> 
        .le-vel.com</strong> 
      </div> 
      <div class="FormRow"> 
       <a class="Button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" id="ChangeReferralButton" href="/Login/ClearReferral" role="button" aria-disabled="false"><span class="ui-button-text">Update My Referrer</span></a> 
      </div> 
     </div> 
    </div> 
    <div id="CreateAccount_MainForm"> 
     <div class="FormRow"> 
      <label>Country:</label> 
      <select id="ShipCountry" name="ShipCountry"><option value="AU">Australia</option> 
<option value="CA">Canada</option> 
<option value="GB">United Kingdom</option> 
<option value="NZ">New Zealand</option> 
<option selected="selected" value="US">United States</option> 
</select> 
      <span class="field-validation-valid" data-valmsg-for="ShipCountry" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>First Name:</label> 
      <input data-val="true" data-val-required="Please Enter Your First Name" id="FirstName" name="FirstName" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="FirstName" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>Last Name:</label> 
      <input data-val="true" data-val-required="Please Enter Your Last Name" id="LastName" name="LastName" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="LastName" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>Email Address:</label> 
      <input data-val="true" data-val-email="Please Enter a Valid Email Address" data-val-remote="Your Email Address Has Been Used Already" data-val-remote-additionalfields="*.Email" data-val-remote-url="/JSON/CheckEmailAvailable" data-val-required="An Email Address is Required" id="Email" name="Email" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>Choose Username:</label> 
      <input data-val="true" data-val-length="Must Be 5 to 15 Characaters" data-val-length-max="15" data-val-length-min="3" data-val-regex="Invalid Characters" data-val-regex-pattern="(?!^\d+$)^[a-zA-Z0-9_]{3,15}$" data-val-remote="Username Already Taken" data-val-remote-additionalfields="*.UserName" data-val-remote-url="/JSON/CheckUsernameAvailable" data-val-required="A Username is Required" id="UserName" name="UserName" type="text" value=""> 
      <span class="field-validation-valid" data-valmsg-for="UserName" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>Password:</label> 
      <input data-val="true" data-val-length="Minimum 6 Characters" data-val-length-max="25" data-val-length-min="6" data-val-required="A Password is Required" id="Password" name="Password" type="password"> 
      <span class="field-validation-valid" data-valmsg-for="Password" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label>Confirm Password:</label> 
      <input data-val="true" data-val-equalto="Passwords Don't Match" data-val-equalto-other="*.Password" data-val-required="Please Confirm Your Password" id="PasswordConfirm" name="PasswordConfirm" type="password"> 
      <span class="field-validation-valid" data-valmsg-for="PasswordConfirm" data-valmsg-replace="true"></span> 
     </div> 
     <div class="FormRow"> 
      <label></label> 
      <button type="submit" id="CustomerLoginButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Create Customer Account</span></button> 
     </div> 
     <input type="hidden" name="returnUrl"> 
    </div> 
</form> 

      </div> 
    </div> 



    </div> 

</div> 

这里是添加CSS:

html, body { 
    position: relative; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 13px; 
    color: #555; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    min-width: 1000px; 
    min-height: 600px; 
    background-color: #FFF; 
} 


h3 { 
    font-weight: bold; 
    margin: 0 0 5px 0; 
    padding: 0 0 2px 0; 
    border-bottom: 1px solid #ECECEC; 
    font-family: Arial, sans-serif; 
    color: #222; 
    font-size: 15px; 
} 

.column { 
    display: table-cell; 
    vertical-align: top; 
width: 100%; 
} 

.content-block { 
    border: 1px solid #CCC; 
    background-color: #FCFCFC; 
    padding: 15px; 
    margin: 20px; 
    -moz-box-shadow: 3px 3px 3px 0 #EEE; 
    -webkit-box-shadow: 3px 3px 3px 0 #EEE; 
    box-shadow: 3px 3px 3px 0 #EEE; 
} 

.content-block { 
    padding: 10px; 
    position: relative; 
} 

span.icon16.profile { 
    background-position: -32px 0; 
} 

span.icon16 { 
    position: relative; 
    top: 1px; 
    left: 0; 
    display: block; 
    width: 16px; 
    height: 16px; 
    vertical-align: text-bottom; 
    margin-right: 4px; 
    float: left; 
    background: url('https://media.le-vel.com/Images/ColorIcons_16.png') no-repeat; 
    text-indent: -9999px; 
} 

请帮助!

+0

请帮助!任何人? –

+0

你会很难找到如此愿意通过您的整个网站尝试查找问题。尝试将问题缩小到一个特定问题,并提供重现该问题所需的最低代码。 – Steve

+0

嗨,史蒂夫。是的,该页面是我需要检查的唯一页面。 –

回答

0

看起来你正在处理多个样式表(这并不罕见)。在您链接到的网站上,我在Chrome中右键单击并检查了其中一个文本字段(如果某些内容看起来不符合要求,您应该这样做)。

如果您还没有发现它们,Firefox和Chrome的开发人员工具是真正的救生员。我喜欢Firefox的javascript调试和Chrome的css工具。我特别喜欢Chrome for CSS,因为您可以随时随地使用任何类型的CSS变体,并查看特定元素的所有可能性,然后查看它们实时执行的操作。

可能发生的事情是,无论您有什么网站样式表(它看起来像在您的网站上称为style.css)都在控制行为。当然,您可以通过指定class/id的特定样式来覆盖站点样式表。

提示:更高的特异性在CSS中获得更高的优先级。如果特定标记(如h3)上的样式正在被覆盖,请尝试澄清类和ID,然后针对这些标记(例如.rightside h3。如果其他所有标记都失败,请将!important添加到css行的末尾,这将优先于几乎任何事物除了内联样式(你应该在几乎所有情况下都应该避免)

我在工作中整天对着CSS反对,我必须在Joomla网站上工作,并且有六种样式表,我知道重要的是要看看还有什么可能会影响特定元素的样式,然后我可以知道为什么我的css不会给我我想要的。