无法从网页模板覆盖内联CSS

时间：2016-09-21 12:47:23

标签： html css

我很难重写一个以免费HTML模板开头的网页的内联样式。我尝试过使用＆＃34;！important＆＃34;关键字，但它没有覆盖它。当我在Chrome中检查元素时，我可以关闭＆＃34; element.style＆＃34; ＆＃34; padding-top的部分：164px＆＃34;，但我无法在CSS中删除它。我是初学者，所以我确信我只是遗漏了一些东西，但我不知道还有什么可以搜索的。

为了澄清，问题是内联样式将div的顶部填充设置为164px，我希望它更少。

Picture in Chrome

html：

<!DOCTYPE html>
<html>
<head>
    <title>Senkadagala</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,100,400italic,500,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/main.css">




<script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/singlepagenav.js"></script>
    <script type="text/javascript" src="js/queryloader.js"></script>    
    <script type="text/javascript" src="js/main.js"></script>

    <meta charset="UTF-8">
    <meta name="description" content="Senkadagala - a simple HTML template">
    <meta name="keywords" content="web design, web development, branding, Social media marketing, print media design, digital design, HTML,CSS,XML,JavaScript">
    <meta name="author" content="PixelMock">

    <link rel="icon" type="image/png"  href="img/fav.png" />
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top top-nav" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">
            <p class="slogan">"Members First, Service Always."</p>
          </a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#services">Services</a></li>
            <li><a href="#calendar">Calendar</a></li>
            <li><a href="#intranet">Intranet</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

以下是相关区域：

    <div class="content"  id="home">
        <div class="section section1">
            <div class="container">
                <div class="row">
                    <img src="img/TransPatriotLogo.png">
                </div>
                <div class="row">
                    <h4 class="bodytext">Symitar for Windows 2</h2>
                </div>

                <div class="row">
                    <h5 class="bodytext">
                        © 2016 - Patriot Federal Credit Union
                    </h5>
                    <h5 class="bodytext">
                        All Rights Reserved
                    </h5>
                </div>

            </div>
        </div>

下一节不应该重要：

        <div class="section section2" id="services">
            <div class="container">
                <div class="row" id="services-row">
                    <h3 id="services-title">Services</h3>
                    <p>
                        Services go here.
                    </p>

                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id ultricies felis. Fusce sed nisi velit. Quisque cursus pharetra diam, non congue ligula sodales at. Phasellus sodales sem sagittis arcu vulputate dictum. Vestibulum faucibus malesuada risus. 
                    </p>

...continued...

这是CSS：

body
{
    text-align: center;
    padding: 0px;
    margin: 0px;
    font-family: "Roboto",sans-serif;
    font-size: 12px;
    color:#d3d3d3 !important;
}

body .text-color1 
{
    color: #882565;
}

body .text-color2 
{
    color: #C54D8D;
}

.container
{
    /*width:1200px;*/
    margin: 0px auto;
    /*text-align: left;*/
}

.top-nav
{
    position: fixed;
    height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
    width:100%;
    background-color: #f8f8f8;
}

.top-nav li a
{
    font-size:16px;
    font-family: "Roboto";
    font-weight: bold;
    color:#0e3d83 !important;
}

.slogan
{
    color: #0e3d83;
    font-family: "Monotype Corsiva";
    font-weight: bold;
    font-size: 26px;
    margin-top: 15px;
}

.bodytext
{
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.navbar li .current
{
    background-color: transparent;
    color: #d92727 !important;
    outline: none;
}

.navbar-brand
{
    padding-top: 0px;
}

.top-nav li a:hover
{
    color:#C54D8D!important;
}

.navbar-inverse
{
    border: none;
    box-shadow: 0px 1px 5px #0e3d83;
}

.content
{
    padding-top:70px;
}

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
}

.logo-row
{
    padding-top: 0px;
}
.section1 .main-logo
{
/*  background: url("../img/TransPatriotLogo.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    height: 200px;
    width: 500px;
    margin-left: auto;
    margin right: auto; */
}

.section1 h2
{
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.section1 p
{
    font-size: 20px;
    color: #0e3d83;
    font-family: "Trebuchet MS";
    font-weight: bold;
}

.section2
{
    padding-top: 100px;
    /*padding-bottom: 200px;*/
}

.section2 .intro-text
{
    /*text-align: left*/
}

.section2 img
{
    margin: 0 auto;
}

.section2 h3#services-title
{
    font-family: "Roboto", sans-serif;
    font-size: 34px;
    color: #0e3d83 !important;
    font-weight: 300;
    margin-bottom: 40px;
}

.section2 .team
{
    padding: 150px 0px 100px 0px;
}

.section2 .team img
{
    margin:0px auto;
}

.section2 .team h3.team-name
{
    color:#848484;
    margin-bottom: 5px;
}

.section2 .team h4.team-subtitle
{
    margin-top: 0px;    
    font-weight: lighter;
    color:#848484;
    margin-bottom: 20px;
}

.section2 .team p.team-details
{
    text-align: center;
    font-size: 16px;
}

.section2 p
{
    color: #848484;
    font-size: 18px;
    font-family: "Roboto", sans-serif;
    margin-bottom: 20px;
    font-weight: 300;
    text-align: left
}

.section3
{
    background: url(../img/workspace-sub.jpg) rgba(213,30,155, 0.6);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% 0%; 
    padding-top: 200px;
    padding-bottom: 200px;
}

.section3 .container
{

}

.section3 img.img-responsive
{
    margin: 0 auto;
}

.section3 h3
{
    color: #848484;
    font-weight: 400;
}

.section3 p
{
    color: #848484;
    font-weight: 300;
    font-size: 18px;
}

.section4
{
    /*height:600px;*/
}

.item 
{ 
    width: 20%; 
    background-color: red;
    height:300px;
    float:left;
    position: relative;
}

.item.w2 
{ 
    width: 25%; 
}

.item.w3
{
    width: 40%; 
}

.item .hidden-item
{
    display: none;
}

.portfolio
{   
    padding: 100px 0px
}

.portfolio #portfolio-introduction
{
    margin-bottom: 100px;
    margin-top: 100px;
    color: #828282;
}

.portfolio #portfolio-introduction p
{
    font-size: 24px;
    font-weight: lighter;
}

.portfolio #portfolio-items
{
    border-top: 1px solid #D6D6D6;
    border-bottom: 1px solid #D6D6D6;
}

.portfolio .item .hover-content
{
    width: 100%;
    height: 100%;
    background: #8a0175;
    opacity: 0.8;
    position: absolute;
    padding: 20px;
    display: none;
    transition:all 0.5s ease 0s;
    cursor: pointer;
}

.portfolio .item .hover-content h3
{
    font-size: 34px;
    font-weight: lighter;
    color: #fff;
    position: relative;
    top:30%;
}

.portfolio .item:hover .hover-content
{
    display: block;
}

.portfolio .item  .portfolio-popup h3
{
    margin-bottom: 30px;
    margin-top: 0px;
    color:#828282;
} 

.portfolio .item .portfolio-popup p
{
    color: #828282;
    line-height: auto;
    font-size: 18px;
    font-weight: lighter;
}


.portfolio .item .portfolio-popup .popup-image-container
{
    padding: 20px;
}

.portfolio .item .portfolio-popup .popup-image-container img
{
    margin: 0 auto
}

.portfolio .item  .portfolio-popup .portfolio-item-description
{
    border-bottom: 1px solid #8D8D8D;
    padding: 40px;
    text-align: left;
}

.portfolio .item .portfolio-popup .labels
{
    margin-top:20px;
    line-height: 30px;
}


.portfolio .item  .portfolio-popup .portfolio-item-description span.label
{
    font-family: "Roboto", sans-serif;
    font-size: 12px;
    font-weight: lighter;
}

.portfolio h3
{
    font-size: 60px;
    font-family: "Roboto", sans-serif;
    font-weight: lighter;
}

.footer
{
    background: url(../img/footer-bg.jpg) repeat-x left bottom #000;
    /*padding-top: 200px;*/
}

#contact
{
    /*padding-bottom:80px;*/
    font-family:"Roboto", sans-serif;
    font-weight:300;
    min-height:600px;
}

#contact #contact-us-header
{
    font-size: 44px;
    font-weight: lighter;
    margin-bottom: 50px
}

#contact #contact-form input[type=submit]
{
    background-color:#C54D8D;
    border:1px solid #882565                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        
}

#contact #contact-form
{
    text-align: left;
}

#contact #contact-form label
{
    font-size: 16px;
    font-weight: lighter;
}

#contact .contact-description p
{
    font-size:20px;
}

.sm-wrapper
{
    margin-top:30px;
    margin-bottom:50px;
}


.sm-wrapper a:hover
{

}

.sm-container
{
    width:32px;
    height:32px;
    display:block;
    float:left;
    background:url(../img/sm-sprite.png) no-repeat;
    margin-right:10px;
}

.sm-container:hover
{
    /*border-bottom:5px solid #C54D8D;*/
    cursor:pointer;
}

.sm-facebook
{
    background-position:0px -32px;
}

.sm-linkedin
{
    background-position:0px -64px;
}

.sm-gplus
{
    background-position:0px -96px;
}

.sm-skype
{
    background-position:0px -128px;
}


/* end of contact section */



/* Landscape phones and down */
@media (max-width: 480px) { 

    .section2 p
    {
        font-size: 18px;
        font-weight: 300;
    }

    .section2 img
    {
        padding-bottom: 60px;
    }

    .item,.item.w2 , .item.w3
    { 
        width: 100%; 
    }

    .portfolio .item  .portfolio-popup h3
    {
        font-size: 42px;
    } 

    .portfolio .item .portfolio-popup p
    {
        font-size: 16px;
        font-weight: lighter;
    }

    .section2 .team img
    {
        padding-bottom: 0px;
    }

    .section3 .service-item
    {
        margin-bottom: 50px
    }

    .section3 .service-item p
    {
        font-size: 18px;
        margin: 0 auto;
        width: 75%;
    }


 }

/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) {
    .section3 .service-item
    {
        margin-bottom: 50px
    }

    .section3 .service-item p
    {
        font-size: 18px;
        margin: 0 auto;
        width: 75%;
    }

    .section2 p
    {
        font-size: 20px;
        font-weight: 300;
    }

    .section2 img
    {
        padding-bottom: 0px;
    }

    .item,.item.w2 , .item.w3
    { 
        width: 100%; 
    }

    .navbar-nav
    {
        background-color:#F8F8F8
    }
}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1024px) {
    .section2 img
    {
        padding-bottom: 60px;
    }

    .section2 p
    {
        font-size: 20px;
    }

    .section2 img
    {
        padding-bottom: 0px;
    }

    .section3 .service-item
    {
        margin-bottom: 50px;
        font-size: 18px;
    }

    .portfolio .item .hover-content
    {
        width: 100%;
        height: 100%;
        background: #8a0175;
        opacity: 0.8;
        position: absolute;
        padding: 20px;
        display: none;
        transition:all 0.5s ease 0s;
        cursor: pointer;
    }

    .portfolio .item .hover-content h3
    {
        font-size: 18px;
        font-weight: 300;
        color: #fff;
        position: relative;
        top:30%;
    }

    .portfolio .item:hover .hover-content
    {
        display: block;
    }

    .portfolio .item  .portfolio-popup h3
    {
        margin-bottom: 30px;
        margin-top: 0px;
        color:#828282;
        font-size: 42px;
    } 

    .portfolio .item .portfolio-popup p
    {
        color: #828282;
        line-height: auto;
        font-size: 16px;
        font-weight: lighter;
    }

    .item 
    { 
        width: 20%; 
        background-color: red;
        height:200px;
        float:left;
        position: relative;
    }

    .item.w2 
    { 
        width: 25%; 
    }

    .item.w3
    {
        width: 40%; 
    }

    .navbar-nav
    {
        float: right;
    }
}

/* Large desktop */
@media (min-width: 1025px) {
    .navbar-nav
    {
        float: right;
    }
}

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

6 个答案:

答案 0 :(得分：1)

2种解决方法：

  1. 查看是否有任何HTML模板具有您想要的内联样式并将其删除
  2. 如果1不起作用：查找可能正在添加这些样式的任何Javascript（在文本编辑器中使用搜索功能）。

答案 1 :(得分：1)

使用!important应该不是真正的答案。看起来有些JavaScript可能会在元素上设置这个高度（不理想，但是嘿）。

我建议您查看JS文件中的164号，看看它出现了什么。

我首先要查看js/singlepagenav.js和js/main.js

答案 2 :(得分：1)

尝试将其称为.section.section1，而不是.section section1

像：

.section.section1 {
padding-top:20px !important;
}

答案 3 :(得分：1)

您需要检查您的CSS文件..填充以元素样式显示，因此它不在内联中。 在你的CSS文件内容类中，你提供了padding-top为70 px。这可能会增加你的空间。

答案 4 :(得分：0)

你说你尝试了！重要选项，但它没有用，你尝试了什么？

类似的东西：

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
    padding-top: 10px !important;
}

应该覆盖内联CSS。

答案 5 :(得分：0)

根据你的答案提供一些指导，我认为我偶然发现了解决方案，至少是一个解决方案，尽管这可能不是最好的做法。我的div班是

<div class="section section1">

显然这些都是冲突的，所以我做到了

<div class="section1">

并将CSS更改为

.section1
{
    background: url(../img/whiteflag.png);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:50% -400px;
    padding-top: 20px !important;
}
相关问题
最新问题