2016-08-08 37 views
0

我知道Kentico具有内置的表单构建器以及自定义布局功能。是否有可能使用自己特定的css规则导入表单?Kentico中的自定义表格

例如,我有以下形式:Form

body 
{ 
    margin-left: 0; 
    margin-top: 0; 
    background-color: #F5F5F5; 
} 

.clearFix 
{ 
    clear: both; 
} 

p 
{ 
    font-size: 13px; 
    margin-top: 10px; 
    margin-bottom: 5px; 
    margin-left: 35px; 
    margin-top: 15px; 
    color: #696969; 
    float: left; 

} 

#lastName 
{ 
    margin-left: 300px; 
} 

.city 
{ 
    margin-left: 318px; 
} 

#province 
{ 
    margin-left: 294px; 
} 

#oID 
{ 
    margin-left: 294px; 
} 

.postalCode 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#schoolName 
{ 
    margin-left: 285px; 
} 

#courseFee 
{ 
    margin-left: 268px; 
} 

#courseEndDate 
{ 
    margin-left: 258px; 
} 

.netIncome 
{ 
    margin-left: 255px; 
} 

.lastNameDependent 
{ 
    float: left; 
    margin-left: 200px; 
} 

.ageDependent 
{ 
    float: left; 
    margin-left: 200px; 
} 

#ontarioTeachingCert 
{ 
    float: left; 
    margin-top: 10px; 
} 

#certificateOfQualification 
{ 
    float: left; 
    margin-top: 10px; 
} 

#letterOfPermission 
{ 
    float: left; 
    margin-top: 10px; 
} 

#other 
{ 
    float: left; 
    margin-top: 10px; 
} 

#previousBursaryYears 
{ 
    margin-left: 81px; 
} 

.oectaPositionReference 
{ 
    margin-left: 332px; 
} 

#daytimeTele 
{ 
    margin-left: 295px; 
} 

#teachingYears 
{ 
    margin-left: 241px; 
} 

#membershipStatus 
{ 
    margin-left: 279px; 
} 







.pTitles 
{ 
    font-size: 18px; 
    margin-top: 15px; 
    margin-bottom: 8px; 
    margin-left: 35px; 
    color: #696969; 
    font-weight: bold; 
} 

.thinLine 
{ 
    height: 0.5px; 
    width: 671px; 
    content: ""; 
    background-color: #cccccc; 
    margin-left: 35px; 
} 

#lowerThinLine 
{ 
    margin-top: 15px; 
    height: 1px; 
} 

#firstNameBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#lastNameBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

.addressBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#oectaIdBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 64px; 
} 

#otcTextBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
    margin-bottom: 10px; 

} 

#coqTextBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 71px; 
    margin-bottom: 10px; 
} 

#lopTextBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 111px; 
    margin-bottom: 10px; 
} 

#courseNameBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#courseCostBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#teachingExperienceBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#underGradBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#otherTextBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 201px; 
    margin-bottom: 10px; 
} 

#grossSalaryBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#netSalaryBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#distanceToCourseBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

.firstNameDependentBox 
{ 
    width: 150px; 
    height: 25px; 
    margin-left: 35px; 
    float: left; 
} 

.lastNameDependentBox 
{ 
    width: 150px; 
    height: 25px; 
    margin-left: 114px; 
    float: left; 
} 

.ageDependentBox 
{ 
    width: 70px; 
    height: 25px; 
    margin-left: 111px; 

} 

.firstNameReferenceBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

.OECTAPositionReferenceBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#memberstatusBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#startDate 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#endDate 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

.bigTextArea 
{ 
    width: 667px; 
    height: 60px; 
    margin-left: 35px; 
} 

#dependentComments 
{ 
    height: 90px; 
} 

#purposeOfStudy 
{ 
    height: 90px; 
} 








.citySelect 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#provinceSelect 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

.UnitSelect 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#schoolBoardSelect 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#schoolNmaeSelect 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 63px; 
} 

#bursaryYears 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 

#previousBursaries 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#otcCheckBox 
{ 
    margin-left: 35px; 
    margin-top: 10px; 
    float: left; 
} 

#coqCheckBox 
{ 
    margin-left: 35px; 
    margin-top: 10px; 
    float: left; 
} 

#lopCheckBox 
{ 
    margin-left: 35px; 
    margin-top: 10px; 
    float: left; 
} 

#otherCheckBox 
{ 
    margin-left: 35px; 
    margin-top: 10px; 
    float: left; 
} 

#finalConformation 
{ 
    float: left; 
    margin-left: 415px; 
    margin-top: -18px; 
} 

.daytimeTelephoneBox 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 60px; 
} 







#email 
{ 
    width: 300px; 
    height: 25px; 
    margin-left: 35px; 
} 

#formStyle10 
{ 
    display: block; 
    height: 100%; 
    width: 100%; 
} 

input[type="radio"] 
{ 
    display: none; 
} 

.tabs 
{ 
    float: none; 
    width: 800px; 
    padding: 0; 
    position: relative; 
    margin: 75px 75px; 
    list-style: none; 
} 

    .tabs li 
    { 
     float: left; 
     margin-right: 2px; 

    } 

    .tabs label 
    { 
     display: block; 
     position: relative; 
     background: #E6E6E6; 
     height: 60px; 
     width: 115px; 
     margin-right: 3px; 
     padding: 0px 15px 1px 15px; 
     line-height: 60px; 
     font-family: 'Lucida Sans'; 
     font-size: 15px; 
     text-align: center; 
     color: #696969; 
     cursor: pointer; 
     z-index: 1; 
     box-shadow: 0.5px -2px 2px rgba(0,0,0,0.1), 0.5px -1px 2px rgba(0,0,0,0.1); 


    } 

     .tabs label:hover 
     { 
      background: #ffffff; 
     } 

.tab-content 
{ 
    height: 650px; 
    width: 745px; 
    position: absolute; 
    display:none; 
    z-index: 2; 
    left: 0; 
    top: 61px; 
    background-color: #F5F5F5; 
    font-size: 16px; 
    font-family: 'Lucida Sans'; 
    font-weight: normal; 
    box-sizing:border-box; 
    box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1); 
} 

[id^=tab]:checked + label 
{ 
    background: #F5F5F5; 
    z-index: 3; 
} 

[id^=tab]:checked~[id^=tab-content] 
{ 
    display:block; 
} 

.tabs li:first-child 
{ 
    box-shadow: 1px 2px 2px rgba(0,0,0,0.1), -1px -2px 2px rgba(0,0,0,0.1); 
} 

#submitButton 
{ 
    height: 30px; 
    width: 150px; 
    float: right; 
    margin-right: 35px; 
    margin-top: 15px; 
} 

HTML:

<form id="formStyle10" runat="server"> 

    <ul class="tabs"> 

     <li> 
      <input type="radio" name="tabs" id="tab-1" checked /> 
      <label for="tab-1">Information</label> 

      <div id="tab-content-1" class="tab-content"> 
       <p class="pTitles">Personal Information</p> 
       <div class="clearFix"></div> 
       <div class="thinLine"></div> 
       <div class="clearFix"></div> 

       <p>First Name</p> 
       <p id="lastName">Last Name</p> 
       <div class="clearFix"></div> 
       <input type="text" name="firstName" id="firstNameBox" /> 
       <input type="text" name="lastName" id="lastNameBox" /> 
       <div class="clearFix"></div> 

       <p>Address</p> 
       <p class="city">City</p> 
       <div class="clearFix"></div> 
       <input type="text" name="addressBox" class="addressBox" /> 
       <select class="citySelect"> 
        <option>Select</option> 
        <option>City 2</option> 
        <option>City 3</option> 
        <option>City 4</option> 
       </select> 
       <div class="clearFix"></div> 

       <p>Postal Code</p> 
       <p id="province">Province</p> 
       <div class="clearFix"></div> 
       <input type="text" name="postalCode" class="postalCode" /> 
       <select id="provinceSelect"> 
        <option>Select</option> 
        <option>Prov 1</option> 
        <option>Prov 2</option> 
        <option>Prov 3</option> 
       </select> 
       <div class="clearFix"></div> 

       <p>OECTA Unit</p> 
       <p id="oID">OECTA ID</p> 
       <div class="clearFix"></div> 
       <select class="UnitSelect"> 
        <option>Select</option> 
        <option>Prov 1</option> 
        <option>Prov 2</option> 
        <option>Prov 3</option> 
       </select> 
       <input type="text" name="oectaIdBox" id="oectaIdBox" /> 
       <div class="clearFix"></div> 

       <p>School Board</p> 
       <p id="schoolName">School Name</p> 
       <div class="clearFix"></div> 
       <select id="schoolBoardSelect"> 
        <option>Select</option> 
        <option>Board 1</option> 
        <option>Board 2</option> 
        <option>Board 3</option> 
       </select> 
       <select id="schoolNmaeSelect"> 
        <option>Select</option> 
        <option>School 1</option> 
        <option>School 2</option> 
        <option>School 3</option> 
       </select> 
       <div class="clearFix"></div> 

       <p>Email Address</p> 
       <p id="membershipStatus">Membership Status</p> 
       <div class="clearFix"></div> 
       <input type="email" name="email" id="email" /> 
       <input type="text" name="memberStatusBox" id="memberstatusBox" /> 
       <div class="clearFix"></div> 

       <p>Use this section to briefly describe the purpose of your study</p> 
       <div class="clearFix"></div> 
       <textarea class="bigTextArea" id="purposeOfStudy"></textarea> 

      </div> 
     </li> 


     <!--              --> 


     <li> 
      <input type="radio" name="tabs" id="tab-2" /> 
      <label for="tab-2">Qualifications</label> 

      <div id="tab-content-2" class="tab-content"> 

       <p class="pTitles">Teaching Qualifications</p> 
       <div class="clearFix"></div> 
       <div class="thinLine"></div> 
       <div class="clearFix"></div> 

       <p>Professional and Academic Information<br/ > Involvement in OECTA (i.e. Committees, AGM Delegate, Unit Meetings, etc.)</p>     <div class="clearFix"></div> 
       <textarea class="bigTextArea"></textarea> 
       <div class="clearFix"></div> 

       <p>Qualifications (Check all that apply)</p> 
       <div class="clearFix"></div> 

       <input type="checkbox" name="otcCheckBox" id="otcCheckBox" /> 
       <p id="ontarioTeachingCert">Ontario Teaching Certificate</p> 
       <input type="text" name="otcTextBox" id="otcTextBox" placeholder="Year of Issue" /> 
       <div class="clearFix"></div> 

       <input type="checkbox" name="coqCheckBox" id="coqCheckBox" /> 
       <p id="certificateOfQualification">Certificate of Qualification</p> 
       <input type="text" name="coqTextBox" id="coqTextBox" placeholder="Year of Issue" /> 
       <div class="clearFix"></div> 

       <input type="checkbox" name="lopCheckBox" id="lopCheckBox" /> 
       <p id="letterOfPermission">Letter of Permission</p> 
       <input type="text" name="lopTextBox" id="lopTextBox" placeholder="Year of Issue" /> 
       <div class="clearFix"></div> 

       <input type="checkbox" name="otherCheckBox" id="otherCheckBox" /> 
       <p id="other">Other</p> 
       <input type="text" name="lopTextBox" id="otherTextBox" placeholder="Please Specify" /> 
       <div class="clearFix"></div> 

       <p>QECO Category</p> 
       <p id="teachingYears">Years of Teaching Experience</p> 
       <div class="clearFix"></div> 
       <select class="UnitSelect" id="quecoCategory"> 
        <option>Select</option> 
        <option>Category A</option> 
        <option>Category A1</option> 
        <option>Category A2 </option> 
        <option>Category A3</option> 
        <option>Category A4</option> 
       </select> 
       <input type="text" name="teachingExperienceBox" id="teachingExperienceBox" /> 
       <div class="clearFix"></div> 

       <p>If you have obtained any degrees/diplomas, please list them here</p> 
       <textarea class="bigTextArea"></textarea> 


       <p>If non-degree, how many undergraduate courses have you compelted?</p> 
       <div class="clearFix"></div> 
       <input type="text" name="underGradBox" id="underGradBox" /> 
       <div class="clearFix"></div>     




      </div> 
     </li> 



    <!--                 --> 

     <li> 
      <input type="radio" name="tabs" id="tab-3" /> 
      <label for="tab-3">Expenses</label> 
      <div id="tab-content-3" class="tab-content"> 

       <p class="pTitles">Expenses and Financial Information</p> 
       <div class="clearFix"></div> 
       <div class="thinLine"></div> 
       <div class="clearFix"></div> 

       <p>Name of Course</p> 
       <p id="courseFee">Course Fee</p> 
       <div class="clearFix"></div> 
       <input type="text" name="courseNameBox" id="courseNameBox" /> 
       <input type="text" name="courseCostBox" id="courseCostBox" /> 
       <div class="clearFix"></div> 


       <p>Course Start Date</p> 
       <p id="courseEndDate">Course End Date</p> 
       <div class="clearFix"></div> 
       <input type="date" name="startDate" id="startDate" /> 
       <input type="date" name="endDate" id="endDate" /> 
       <div class="clearFix"></div> 

       <p>Total Gross Salary</p> 
       <p class="netIncome">Total Net Income</p> 
       <div class="clearFix"></div> 
       <input type="text" name="grossSalaryBox" id="grossSalaryBox" /> 
       <input type="text" name="netSalaryBox" id="netSalaryBox" /> 
       <div class="clearFix"></div> 

       <p>Other Income Sources</p> 
       <div class="clearFix"></div> 
       <textarea class="bigTextArea" placeholder="Please list the all other income sources, including other bursaries and other forms of financial assistance along with the amount for each."></textarea>     <div class="clearFix"></div> 

       <p>Have you received an OECTA Bursary Before?</p> 
       <p id="previousBursaryYears">Year(s) If applicable</p> 
       <div class="clearFix"></div> 
       <select id="previousBursaries"> 
        <option>Select</option> 
        <option>Yes</option> 
        <option>No</option> 
       </select> 
       <input type="text" name="bursaryYears" id="bursaryYears" /> 
       <div class="clearFix"></div> 

       <p>Distance to Travel For Course</p> 
       <div class="clearFix"></div> 
       <input type="text" name="distanceToCourseBox" id="distanceToCourseBox" /> 
       <div class="clearFix"></div> 

       <p>Please list all expenses this bursary will be used for</p> 
       <div class="clearFix"></div> 
       <textarea class="bigTextArea"></textarea> 
      </div> 
     </li> 

     <!--                 --> 

     <li> 
      <input type="radio" name="tabs" id="tab-4" /> 
      <label for="tab-4">Dependents</label> 
      <div id="tab-content-4" class="tab-content"> 

       <p class="pTitles">Dependents</p> 
       <div class="clearFix"></div> 
       <div class="thinLine"></div> 
       <div class="clearFix"></div> 

       <p>Please list any and all dependents</p> 
       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <input type="text" class="firstNameDependentBox" /> 
       <input type="text" class="lastNameDependentBox" /> 
       <input type="text" class="ageDependentBox" /> 
       <div class="clearFix"></div> 

       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <input type="text" class="firstNameDependentBox" /> 
       <input type="text" class="lastNameDependentBox" /> 
       <input type="text" class="ageDependentBox" /> 
       <div class="clearFix"></div> 

       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <input type="text" class="firstNameDependentBox" /> 
       <input type="text" class="lastNameDependentBox" /> 
       <input type="text" class="ageDependentBox" /> 
       <div class="clearFix"></div> 

       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <input type="text" class="firstNameDependentBox" /> 
       <input type="text" class="lastNameDependentBox" /> 
       <input type="text" class="ageDependentBox" /> 
       <div class="clearFix"></div> 

       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <input type="text" class="firstNameDependentBox" /> 
       <input type="text" class="lastNameDependentBox" /> 
       <input type="text" class="ageDependentBox" /> 
       <div class="clearFix"></div> 

       <div class="clearFix"></div> 
       <p class="firstNameDependent">First Name</p> 
       <p class="lastNameDependent">Last Name</p> 
       <p class="ageDependent">Age</p> 
       <div class="clearFix"></div> 

       <p>Comments</p> 
       <div class="clearFix"></div> 
       <textarea class="bigTextArea" id="dependentComments" placeholder="Please list any other information you believe may assist in your application"></textarea> 
       <div class="clearFix"></div> 
      </div> 
     </li> 

     <!--             --> 


     <li> 
      <input type="radio" name="tabs" id="tab-5" /> 
      <label for="tab-5">References</label> 
      <div id="tab-content-5" class="tab-content"> 

       <p class="pTitles">References</p> 
       <div class="clearFix"></div> 
       <p>Please include at least TWO references who can speak to your OECTA involvement</p></p> 
       <div class="clearFix"></div> 
       <div class="thinLine"></div> 
       <div class="clearFix"></div> 

       <p>Name</p> 
       <p class="oectaPositionReference">OECTA Position Held</p>   
       <div class="clearFix"></div> 
       <input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" /> 
       <input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" /> 
       <div class="clearFix"></div> 

       <p>Address</p> 
       <p class="city">City</p> 
       <div class="clearFix"></div> 
       <input type="text" name="addressBox" class="addressBox" /> 
       <select class="citySelect"> 
        <option>Select</option> 
        <option>City 1</option> 
        <option>City 2</option> 
        <option>City 3</option> 
       </select> 
       <div class="clearFix"></div> 

       <p>Postal Code</p> 
       <p id="daytimeTele">Daytime Telephone</p> 
       <div class="clearFix"></div> 
       <input type="text" name="postalCode" class="postalCode" /> 
       <input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" /> 
       <div class="clearFix"></div> 


       <br /> 

       <p>Name</p> 
       <p class="oectaPositionReference">OECTA Position Held</p>   
       <div class="clearFix"></div> 
       <input type="text" name="firstNameReferenceBox" class="firstNameReferenceBox" /> 
       <input type="text" name="OECTAPositionReferenceBox" class="OECTAPositionReferenceBox" /> 
       <div class="clearFix"></div> 

       <p>Address</p> 
       <p class="city">City</p> 
       <div class="clearFix"></div> 
       <input type="text" name="addressBox" class="addressBox" /> 
       <select class="citySelect"> 
        <option>Select</option> 
        <option>City 1</option> 
        <option>City 2</option> 
        <option>City 3</option> 
       </select> 
       <div class="clearFix"></div> 

       <p>Postal Code</p> 
       <p id="daytimeTele">Daytime Telephone</p> 
       <div class="clearFix"></div> 
       <input type="text" name="postalCode" class="postalCode" /> 
       <input type="tel" name="daytimeTelephone" class="daytimeTelephoneBox" /> 
       <div class="clearFix"></div> 

       <div class="thinLine" id="lowerThinLine"></div> 
       <p>By selecting the following you are confirming that you have included current copies of both your Ontario Teaching Certificate of Qualifications and Registration and a copy of the course description, including cost, date of course commencement and the name of the institution.</p> 
       <input type="checkbox" name="finalConformation" id="finalConformation" /> 
       <div class="clearFix"></div> 

       <input type="submit" name="submitButton" id="submitButton" value="Submit" /> 
      </div> 
     </li> 
</ul> 



</form> 

有没有一种方法导入这种形式和规格,并且将一个现有的预kentico网站?

回答

4

你最好的赌注可能,这是我们经常做很多会做到以下几点: -

  1. 创建您使用形成领域Kentico控制字段。基本上在kentico中映射您的字段。

  2. 使用自定义布局生成表单的基本结构。

  3. 转到您的自定义布局的来源并添加和包装DIVS,类和周围的关键元素的ID。

这种方法将解决大部分的用例,除非你有一个复杂的表单功能。

干杯, 阿赫亚

+0

好吧,这是有道理的,但我有点失去了我应该在哪里添加CSS? –

+0

我已经进入了布局页面,但我对个别风格应该去的地方感到困惑。或者我一次添加一个样式? –

+0

您可以创建一个CSS文件,并使用HEAD HTML或CSS样式表Web部件将该CSS文件引用到您拥有在线表单的模板中。您也可以使用内联样式,但应尽可能避免这种情况。 –

2

你可以得到部分那里,你可以使用自定义布局,以摆脱你的项目的任何包装的div,你可以通过在表单中​​的字段标签自己的类/样式添加到输入和标签。你不能做的一件事就是将表单标签包含在你的html中。 ASP.Net只允许在页面标记中使用一种形式,除非它被托管在iframe或除了在部分标记之外的其他东西。您可以将样式元素和自定义布局与一些jquery结合起来,使其非常接近相同的标记。

还有其他选项,但上面提到的选项至少可以帮助您入门。

+0

我该如何添加css? –

+0

我已经到了布局页面,但我对个别风格应该去的地方感到困惑。或者我一次添加一个样式? –

0

从技术上讲是没有办法导入形式开箱。完成此任务的最简单方法是重新创建表单并添加自定义布局以便按照您的需要进行格式化。

我猜你会碰到虽然使用Kentico的形式和窗体控件的问题会导致您的布局比你有什么显着不同。因此,您需要根据Kentico添加的其他元素相应地调整您的CSS规则。

可以存储在主css文件你的CSS,如果你选择或添加HTML头的WebPart到您的网页模板,并添加你的CSS那里。