CSS，不能弄清楚如何改變主題

Question

這個元素，所以我有這個HTML模板，我想改變一些東西，但我不知道如何。我需要做的就是讓它變得更小，並且不佔用整個頁面，我試圖進入css文件，但它似乎沒有工作。我試圖編輯旋轉木馬的ID並將高度設置爲50％。我該怎麼做，謝謝！

這裏是對模板的鏈接生活：http://sitediscount.ru/parallaxer_new/ 的CSS文件位於ATL http://sitediscount.ru/parallaxer_new/assets/css/style.css

下面是旋轉木馬的缺省CSS代碼：

/* ################ Carousel sliders section##################### */ 

/******* TOP SLIDER 
**************/ 

.slider_top { 
    padding-top:160px; 
} 



.slider_top .carousel-control { 
position: absolute; 
top: 250px; 

} 

.slider_top .carousel-control { 
position: absolute; 
top: 340px; 
} 
.slider_top .btn-control { 
position: relative; 
display: inline-block; 
overflow: visible; 
cursor: pointer; 
outline: 0; 
border: 0; 
background: #e93f33; 
padding: 18px 8px; 
font-size: 18px; 
font-weight: 200; 
color: #fff; 
border: 0; 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 8px 8px 19px rgba(0, 0, 0, 0.3); 
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 8px 8px 19px rgba(0, 0, 0, 0.3); 
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25),8px 8px 19px rgba(0, 0, 0, 0.3); 

} 

.slider_top .carousel-control.left{ 
    left:0px; 
} 

.slider_top .carousel-control.right{ 
    right:0px; 
} 

.slider_top .hero-unit { 
    padding-top:30px !important; 
} 

/**********************SECTION SLIDER ***********************/ 
#slider-section { 
    background:url(../img/blogbg.png) repeat; 
} 

#slider-section .page-header h3{ 
    background:url(../img/blogbg.png) repeat; 
} 

#carousel_vertical_slide.carousel, #carousel_vertical_slide_2.carousel, #carousel_horizontal_slide.carousel, #carousel_horizontal_slide_2.carousel{ 
    min-height:400px; 
    margin:40px 0px; 
} 

.span6 #carousel_fade.carousel, .span6 #carousel_fade_2.carousel{ 
    min-height:280px; 
    height:300px; 
    margin:40px 0px; 
} 

.carousel-fade .carousel-control{ 
    filter: alpha(opacity=0); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); 
    -moz-opacity: 0; 
    -khtml-opacity:0; 
    opacity: 0; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

.carousel-fade:hover .carousel-control{ 
    filter: alpha(opacity=100); 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); 
    -moz-opacity: 1; 
    -khtml-opacity:1; 
    opacity: 1; 
    -moz-transition: all 0.3s ease; 
    -o-transition: all 0.3s ease; 
    -webkit-transition: all 0.3s ease; 
    -ms-transition: all 0.3s ease; 
    transition: all 0.3s ease; 
} 

#carousel_fade.carousel .carousel-control.right, #carousel_fade_2.carousel .carousel-control.right{ 
    right:0px; 
} 

#carousel_fade.carousel .carousel-control.left, #carousel_fade_2.carousel .carousel-control.left{ 
    left:0px; 
} 
.carousel-control.btn-control { 
    position: absolute; 
    height: auto; 
    width: auto; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
} 

.carousel-inner .item img { 
    display: inline-block !important; 
} 

.carousel-inner .item { 
    text-align: center !important; 
} 

@media (max-width: 570px) { 
    .carousel-control.left { 
     left: 0; 
    } 
    .carousel-control.right { 
     right: 0; 
    } 
} 

.carousel-control { 
    background: none; 
    border: none; 
    opacity: 1; 
} 

.carousel-control:hover { 
    background: none; 
    border: none; 
    opacity: 1; 
} 

.carousel.horizontal .next { 
    left: 100%; 
} 

.carousel.horizontal .prev { 
    left: -100%; 
} 

.carousel.horizontal .active.left { 
    left: 100%; 
} 

.carousel.horizontal .active.right { 
    left: -100%; 
} 

.carousel.carousel-fade .item { 
    -webkit-transition: opacity 0.5s ease-in-out; 
    -moz-transition: opacity 0.5s ease-in-out; 
    -ms-transition: opacity 0.5s ease-in-out; 
    -o-transition: opacity 0.5s ease-in-out; 
    transition: opacity 0.5s ease-in-out; 
    opacity:0; 
} 

.carousel.carousel-fade .active.item { 
    opacity:1; 
} 

.carousel.carousel-fade .active.left, 
.carousel.carousel-fade .active.right { 
    left: 0; 
    z-index: 2; 
    opacity: 0; 
    filter: alpha(opacity=0); 
} 

.carousel.carousel-fade .next, 
.carousel.carousel-fade .prev { 
    left: 0; 
    z-index: 1; 
} 

.carousel.carousel-fade .carousel-control { 
    z-index: 3; 
} 

.vertical .carousel-inner { 
    height: 100%; 
} 

.carousel.vertical .item { 
    -webkit-transition: 0.6s ease-in-out top; 
    -moz-transition: 0.6s ease-in-out top; 
     -ms-transition: 0.6s ease-in-out top; 
     -o-transition: 0.6s ease-in-out top; 
      transition: 0.6s ease-in-out top; 
} 

.carousel.vertical .active { 
    top: 0; 
} 

.carousel.vertical .next { 
    top: 400px; 
} 

.carousel.vertical .prev { 
    top: -400px; 
} 

.carousel.vertical .next.left, 
.carousel.vertical .prev.right { 
    top: 0; 
} 

.carousel.vertical .active.left { 
    top: -400px; 
} 

.carousel.vertical .active.right { 
    top: 400px; 
} 

.carousel.vertical .item { 
    left: 0; 
} 
.carousel .inactive { 
    position: absolute; 
    display: block; 
    z-index: -1; 
} 

.carousel .inactive.active { 
    position: relative !important; 
    z-index: 0; 

} 

.btn-control { 
position: relative; 
display: inline-block; 
overflow: visible; 
margin: 0; 
padding: 10px 5px; 
margin-top: 8px; 
cursor: pointer; 
outline: 0; 
border: 0; 
background-color: #fff; 
background-image: -moz-linear-gradient(top,#fff,#eee); 
background-image: -ms-linear-gradient(top,#fff,#eee); 
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#eee)); 
background-image: -webkit-linear-gradient(top,#fff,#eee); 
background-image: -o-linear-gradient(top,#fff,#eee); 
background-image: linear-gradient(top,#fff,#eee); 
background-repeat: repeat-x; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#eeeeee',GradientType=0); 
-webkit-background-clip: padding; 
-moz-background-clip: padding; 
background-clip: padding; 
zoom: 1; 
z-index: 1; 
font-family: "Segoe UI",Helvetica,Arial,sans-serif; 
font-size: 14px; 
line-height: 14px; 
color: #333; 
min-width: 42px; 
text-shadow: #fff 0 1px 0; 
text-align: center; 
text-decoration: none; 
white-space: nowrap; 
vertical-align: inherit; 
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 4px 4px 8px rgba(0, 0, 0, 0.05); 
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25), 4px 4px 8px rgba(0, 0, 0, 0.05); 
box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 5px rgba(0,0,0,.25),4px 4px 8px rgba(0, 0, 0, 0.05); 
} 
.btn-control:hover, .btn-control:focus, .btn-control:active, .btn-control.active { 
color: #333; 
text-decoration: none; 
background-color: #dcdcdc; 
background-image: -moz-linear-gradient(top,#dcdcdc,#dcdcdc); 
background-image: -ms-linear-gradient(top,#dcdcdc,#dcdcdc); 
background-image: -webkit-gradient(linear,0 0,0 100%,from(#dcdcdc),to(#dcdcdc)); 
background-image: -webkit-linear-gradient(top,#dcdcdc,#dcdcdc); 
background-image: -o-linear-gradient(top,#dcdcdc,#dcdcdc); 
background-image: linear-gradient(top,#dcdcdc,#dcdcdc); 
background-repeat: repeat-x; 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdcdc',endColorstr='#dcdcdc',GradientType=0); 
z-index: 100; 
outline: 0; 
} 

.btn-control i{ 
    font-size:18px; 
} 

這裏的HTML代碼傳送帶：

<div id="carousel_horizontal_slide_2" class="carousel slide slider_top"> 
       <div class="carousel-inner"> 

        <!--########## item #############--> 
        <div class="item"> 
         <div class="hero-unit text-center"> 
         <h1 class=""> 

         <span class="active">PARALLAXER </span></h1> 
         <!-- !! DEL Class="active" when used static animated h1 script --> 
           <h2 class="text-center"> 
            Start &amp; grow faster with PARALLAXER 
           </h2> 
          </div> 


        </div> 
        <!--############/item###########--> 

        <!--########## item #############--> 
        <div class="item"> 
        <img src="images/browserthree.png" alt=""> 
        </div> 
        <!--############/item###########--> 

        <!--########## item #############--> 
        <div class="item active"> 
        <img src="images/responsiveshwcase.png" alt=""> 
        </div> 
        <!--############/item###########--> 



       </div> 

       <a class="carousel-control left btn-control " href="#carousel_horizontal_slide_2" data-slide="prev"><i class="fa-icon-double-angle-left main-color"></i></a> 
       <a class="carousel-control right btn-control btn-action" href="#carousel_horizontal_slide_2" data-slide="next"><i class="fa-icon-double-angle-right main-color"></i></a> 
    </div> 

Answer 1

問題是，頁面中的JavaScript設置的高度爲<header>。您可以在CSS中更改任何您想要的內容，但是當JavaScript運行時，它會將標題的高度設置爲窗口的大小，使其始終佔據整個屏幕。

您可以通過進入開發人員控制檯/面板/瀏覽器中的任何內容並手動設置標題元素的高度來確定這一點。它會改變。但是，只要您重新調整頁面的大小，它將返回佔用屏幕的全部大小，它將CSS屬性height設置爲窗口的高度。

要改變它，你必須進入JS文件，找到有問題的代碼，並且爲頭添加一個異常或者刪除該功能，並祈禱網站沒有它。您也可以始終禁用JavaScript，但您可能需要進行一些更改才能對其進行補償。