0

所以我有这个 HTML 模板，我想在其中更改一些内容，但我不知道如何。我需要做的是使它顶部的轮播更小，并且不占用整个页面，我尝试进入 css 文件，但它似乎不起作用。我尝试编辑旋转木马的 ID 并将高度设置为 50%。我该怎么做呢，谢谢！

这是一个实时模板的链接：http ://sitediscount.ru/parallaxer_new/ CSS 文件位于 L 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>
4

1 回答 1

1

您的问题是页面中的 JavaScript 正在设置<header>. 您可以在 CSS 中更改您想要的任何内容，但是当 JavaScript 运行时，它会将标题的高度设置为窗口的大小，使其不断占据整个屏幕。

您可以通过进入开发人员控制台/面板/浏览器中的任何内容并手动设置标题元素的高度来确定这一点。它会改变。但是，一旦您稍微调整页面大小，它就会恢复到占据屏幕的完整大小，它会将 CSS 属性height设置为窗口的高度。

要更改它，您必须进入 JS 文件，找到有问题的代码，然后为标头设置异常或删除该功能并祈祷网站在没有它的情况下正常工作。您也可以始终完全禁用 JavaScript，但您可能必须进行一些更改以弥补它。

于 2013-07-12T22:18:13.033 回答