文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >无法覆盖网页模板中的内联CSS

问无法覆盖网页模板中的内联CSS
EN

Stack Overflow用户
提问于 2016-09-21 20:47:23
回答 6查看 289关注 0票数 0

我有一个困难的时间覆盖作为一个免费的HTML模板开始的网页的内联样式。我尝试过使用"!important“关键字，但它并没有覆盖它。当我在Chrome中检查元素时，我可以关闭“padding: 164px”的"element.style“部分，但是在CSS中我不能去掉它。我是一个初学者，所以我确信我只是错过了一些东西，但我不知道还可以搜索什么。

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

html：

代码语言：javascript
复制
<!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>

以下是有问题的区域：

代码语言：javascript
复制
    <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>

接下来的部分不应该很重要：

代码语言：javascript
复制
        <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：

代码语言：javascript
复制
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 */
html
css
EN

回答 6

Stack Overflow用户

发布于 2016-09-21 20:58:19

2种解决方法：

  1. 查看是否有您想要的内联样式，移除Javascript 1不起作用：查找可能添加这些样式的任何Javascript(使用文本编辑器中的搜索功能)。
票数 1
EN

Stack Overflow用户

发布于 2016-09-21 20:58:21

使用!important不应该是真正的答案。看起来有些JavaScript可能正在设置元素的高度(不是很理想，但是嘿)。

我建议在您的JS文件中查找数字164，看看会出现什么情况。

我会从查找js/singlepagenav.js和js/main.js开始

票数 1
EN

Stack Overflow用户

发布于 2016-09-21 21:00:55

尝试像.section section1那样调用它，而不是.section.section1

像这样：

代码语言：javascript
复制
.section.section1 {
padding-top:20px !important;
}
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/39616991

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档