1. 首頁
  2. 問答
  3. 無法覆蓋網頁模板中的內嵌CSS

無法覆蓋網頁模板中的內嵌CSS

2016-09-21 37 views
0

我很難覆蓋作爲免費HTML模板啓動的網頁的內聯樣式。我曾嘗試使用「！important」關鍵字，但並未重寫它。當我檢查Chrome中的元素時，我可以關閉「padding-top：164px」的「element.style」部分，但我無法在CSS中擺脫它。我是初學者，所以我確信我只是缺少一些東西，但我不知道還有什麼要搜索的。無法覆蓋網頁模板中的內嵌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 */

來源

2016-09-21 AmishJohn81

+0

能否請您創建一個小提琴這個，那麼就很容易檢查 –

+0

好吧，它在JSFiddle中沒有正確出來...... – AmishJohn81

+0

如果它是在線的，你可以請共享鏈接，或使用https://jsfiddle.net/創建小提琴 –

回答

0

你說你嘗試了重要的選項，但它did'nt工作，那你試試？

喜歡的東西：

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

應該鐵鍋覆蓋內聯CSS。

來源

2016-09-21 12:55:20 P13

+0

這正是我所嘗試的，但它沒有奏效。 – AmishJohn81

+1

我改變了div的類調用。而不是「section1」，我只是做了「section1」，然後添加了！重要的填充和它的工作。 – AmishJohn81

1

2解決方法：

  1. 看，如果任何HTML模板有你想要的內聯風格和刪除
  2. 如果1不起作用：尋找任何JavaScript可以將這些樣式（在文本編輯器中使用搜索功能）。

來源

2016-09-21 12:58:19

1

使用!important應該不是真正的答案。它看起來像一些JavaScript可能會在元素上設置高度（不理想，但嘿）。

我會建議看看你的JS文件的號碼164，看看它的結果。

我會看在js/singlepagenav.js開始，js/main.js

來源

2016-09-21 12:58:20 itsphilz

+0

由於重要的似乎已經在我下載的模板中使用過，我認爲這艘船已經航行，除非我使用新的模板。 – AmishJohn81

+0

完全不是，僅僅因爲別人寫了糟糕的代碼，並不意味着你無法修復它。 – itsphilz

1

嘗試調用它像.section.section1代替.section section1

像：

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

來源

2016-09-21 13:00:54

+0

那麼這工作至於填充問題，但現在我的背景已經消失 – AmishJohn81

+0

添加一切什麼是在該類下內聯。不要忘了添加！重要 –

+0

讓我知道它是否有效@ AmishJohn81 –

1

你需要檢查你的CSS文件..The填充是以元素樣式顯示，因此它不在內聯中。 在您的CSS文件內容類中，您提供的填充頂部爲70像素。這可能會增加你的空間。

來源

2016-09-21 13:13:48

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; 
}

來源

2016-09-21 13:14:13 AmishJohn81

相關問題

 相關問題