适当的CSS与我的原始设计不符

时间：2016-05-16 23:53:55

标签： html css

我在这里创建了一个页面：http://www.iliveaccountable.com/mytestsite/the-experience/

因为我在这里模仿这个注册部分：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;
}

请帮助！

1 个答案:

答案 0 :(得分：0)

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

如果您还没有发现它们，Firefox和Chrome的开发者工具就是真正的救生员。我喜欢Firefox的javascript调试和Chrome的css工具。我特别喜欢Chrome for css，因为你可以玩任何类型的css变体，看看特定元素的所有可能性，然后看看他们实时做了什么。

可能会发生的是，您拥有的任何网站样式表（在您的网站上看起来都称为style.css）都在控制行为。当然，您可以通过按类/ ID指定特定样式来覆盖站点样式表。

提示：更高的特异性在css中获得更高的优先级。如果正在覆盖特定标记（如h3）上的样式，请尝试澄清类和ID，然后定位它们（​​例如.rightside h3。如果所有其他方法都失败，请将!important添加到结尾除了内联样式之外，css系列优先于其他任何内容（在几乎所有情况下都应避免使用）。

我整天都在工作中对抗CSS。我必须在Joomla网站内工作，有六个我无法控制的样式表。我已经了解了看其他可能影响特定元素造型的重要性，然后我就知道为什么我的CSS不能给我我想要的东西。

相关问题
最新问题