个人中心
gpt4 book ai didi

html - 如何修复幻灯片？空白出现 HTML/CSS

转载 作者：行者123 更新时间：2023-11-28 15:56:54 27 4
gpt4 key购买 nike

我的幻灯片右侧有一个空白区域，这是什么原因造成的，我该如何解决？我尝试了一些事情，但运气不佳。爸爸保佑

http://imgur.com/a/Svp8g

https://jsfiddle.net/8Lcj5nrw/ 

<!DOCTYPE html>  

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de-de" lang="de-de" >

    <head>
        <title>A. Willi A.G - Fachkräft für Rohr-Stahl Gebäudetechnik</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name ="web_author" content="">
        <meta name="robots" content="noarchive"> 
        <meta name="robots" content="selection">
        <meta name="language" content="DE">
        <meta name='pagename' content="Home - A.Willi A.G">
        <meta name="copyright" content="Copyright at A.Willi A.G Basel, Switzerland.">
        <meta name ="description" content=
        "Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tatig mit über 30-jahrige Erfahrung in dieser Sparte.">
        <meta name ="keywords" content="a willi ag, personalverleiher,schweisser,rohrschlosser,stahlbau,arbeit,personalberatung,personalvermittlung,basel-stadt,schweiz"
        <link rel="shortcut icon" href="/images/aw.png">
        <link rel="stylesheet" href="/css/style.css" type="text/css"/>
        <script src="html5shiv.js"></script>
        <script src="/JavaScript/browser.js"></script>
        <script src='https://www.google.com/recaptcha/api.js'></script>
    </head> 

    <body>

        <div class="container">

            <div class="menu">
                <ul>
                    <li><a href="/html/index.html">Home</a></li>
                    <li><a href="/html/contact.html">Kontakt</a></li>
                    <li class="dropdown">
                        <a href="" class="dropbtn">Bewerber</a>
                        <div class="dropdown-content">
                            <a href="/html/info.html">Info</a>
                            <a href="/html/jobs/.html">Jobs</a>
                        </div>  
                    </li>

                    <li class="dropdown">
                        <a href="#" class="dropbtn">Kunde</a>
                        <div class="dropdown-content">
                            <a href="/html/personnel.html">Personalverleih</a>
                            <a href="/html/rental.html">Werkzeuge Mieten</a>
                            <a href="/html/refrences.html">Referenzen</a>
                            <a href="/html/quali.html">Qulität, Sicherheit und Weiterbildung</a>
                        </div>
                    </li>
                </ul>
            </div>
            <h2>
            <div class="slideshow"> 
                <img src="/images/panorama2.JPG" alt="Panorama">
                <img src="/images/panorama3.png" alt="Panorama">
                <img src="/images/panorama3.png" alt="Panorama">
            </div> 
            </h2>

            <section>
            <h4>A.Willi A.G für Menschen zur Stelle</h4>
            Die A.Willi A.G ist als Personalverleiher in der gesamten Schweiz und im Ausland erfolgreich tatig mit über 
            30-jahrige Erfahrung in dieser Sparte.
            </section> 

            <footer class="footer-distributed"> 
                <div class="footer-left"> 
                    <img src="/images/awilliag2.png" alt="A.Willi A.G" height="50" width="250"/> 
                    <p class="footer-links">     
                    <a href="#">Home</a>·
                    <a href="#">Zertifikate</a>·
                    <a href="#">Datenschutz-Bestimmungen</a>·
                    <p class="footer-company-name">&copy;2016 A.Willi A.G</p>
                </div>

                <div class="footer-center"> 
                    <div>
                        <i class="fa fa-map-marker"></i>
                        <p><span>Wasgenring 94</span> CH-4055 Basel</p>
                    </div>   
                    <div>
                        <i class="fa fa-phone"></i>
                        <p>
                          <span>Fax +41 (0)61 856 14 38</span>
                          <span>Tel. +41(0)61 646 18 18</span>
                          <span>info@awilliag.ch</span>
                        </p>
                    </div>
                    <div>
                        <i class="fa fa-envelope"></i>
                    </div>
                </div>

                <div class="footer-right"> 
                  <p>Wir möchten uns bei alle unseren Kunden bedanken.</p>
                    <div class="slideshow2"> 
                       <img src="/images/iwb.png" alt="IWB">
                       <img src="/images/jc.png" alt="Johnsons      Control">
                       <img src="/images/engie.png" alt="Engine">
                    </div>
                </div>
            </footer>  
        </div>





    </body> 
</html>

Blockquote

body 

{ font-family: verdana; background:whitesmoke ; color:black; }


.menu { 

background: black; 
width:100%;}


ul {
    list-style-type: none;
    margin: 0 auto;
    display:table;
    padding: 0;
    z-index: 100;
    overflow: hidden;
}

#header {
    width:100%;
    text-align:center;

}

#header img{
    display:inline-block;
    height:100px;
    margin: 0 auto;

}




li {
    float: left;
}


/* DROPDOWN Txt Color */

li a, .dropbtn {
    display: inline-block;
    color: whitesmoke;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


/* DROPDOWN Txt BOX Color */


li a:hover, .dropdown:hover .dropbtn {
    background-color: #103151;
}



li.dropdown {
    display: inline-block;
}


/* DROPDOWN content clr */

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 100;
}

/* DROPDOWN TEXT CLR */

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}


/* DROPDOWN COL BOX */
.dropdown-content a:hover {

    background-color: whitesmoke}



.dropdown:hover .dropdown-content {
    display: block;
}

        @keyframes fade {
        0%   { opacity: 0; }
        11.11%   { opacity: 1; }
        33.33%  { opacity: 1; }
        44.44%  { opacity: 0; }
        100% { opacity: 0; }
}

/* MENU COL */

.menu { 
  position: absolute;
  z-index: 0;
  top: 0;
  margin-bottom: -0.4em;
  margin-top: 0em;
  z-index:1000;
  width:100%;

  background-color:#103151;
}



/* slideshow header */



.slideshow { 
position: relative;
    max-width: 90%;
    width: 100%;
    top: 0em;
    box-sizing: border-box;
    height: 250px;
    max-width: 100%;
    bottom: 20px;
  }

.slideshow img{
    margin:0 auto;
    width: 100%;
    max-height: 100%;
}



.slideshow img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
    .slideshow img:nth-child(1) { animation-delay: 0s;  }
    .slideshow img:nth-child(2) { animation-delay: 3s;  }
    .slideshow img:nth-child(3) { animation-delay: 6s;  }



/* slideshow2 header */



.slideshow2 { 
position: relative;
    z-index: ;
    width: 200px;
    height: 70px;
    top: 0em;
    box-sizing: border-box;
    max-width: 100%;
    bottom: 20px;
  }

.slideshow2 img{
    margin:0 auto;
    width: 100%;
    max-height: 100%;
}



.slideshow2 img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
    .slideshow2 img:nth-child(1) { animation-delay: 0s;  }
    .slideshow2 img:nth-child(2) { animation-delay: 3s;  }
    .slideshow2 img:nth-child(3) { animation-delay: 6s;  }




/* page container */



.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}



/* article from jobs */


.article {
    text-align: left;
    height: 200px;
    margin-bottom:11px
}




/* body of text */



textinfo {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;



/* footer opts */



}

.footer-distributed{
    background-color: #103151;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
    box-sizing: border-box;
    width: 100%;
    text-align: left;
    font: 15px verdana;

    padding: 30px 30px;
    margin-top: 100px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
    display: inline-block;
    vertical-align: top;
}

/* footer left */

.footer-distributed .footer-left{
    width: 40%;
}

/* the company logo */

.footer-distributed h3{
    color:  #ffffff;
    font: normal 15px 'Verdana', cursive;
    margin: 0;
}

.footer-distributed h3 span{
    color:  #5383d3;
}

/* footer links */

.footer-distributed .footer-links{
    color:  #ffffff;
    margin: 20px 0 12px;
    padding: 0;
}

.footer-distributed .footer-links a{
    display:inline-block;
    line-height: 1.8;
    text-decoration: none;
    color:  inherit;
}

.footer-distributed .footer-company-name{
    color:  #8f9296;
    font-size: 15px;
    font-weight: normal;
    margin: 0;
}

/* footer center */

.footer-distributed .footer-center{
    width: 35%;
}

.footer-distributed .footer-center i{
    background-color:  #33383b;
    color: #ffffff;
    font-size: 15px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    text-align: center;
    line-height: 42px;
    margin: 10px 15px;
    vertical-align: middle;
}

.footer-distributed .footer-center i.fa-envelope{
    font-size: 17px;
    line-height: 38px;
}

.footer-distributed .footer-center p{
    display: inline-block;
    color: #ffffff;
    vertical-align: middle;
    margin:0;
}

.footer-distributed .footer-center p span{
    display:block;
    font-weight: normal;
    font-size:14px;
    line-height:2;
}

.footer-distributed .footer-center p a{
    color:  #5383d3;
    text-decoration: none;;
}


/* footer right */

.footer-distributed .footer-right{

    width: 20%;
    color: white;
}

.footer-distributed .footer-company-about{
    line-height: 20px;
    color:  #92999f;
    font-size: 15px;
    font-weight: normal;
    margin: 0;
}

.footer-distributed .footer-company-about span{
    display: block;
    color:  #ffffff;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 20px;
}

.footer-distributed .footer-icons{
    margin-top: 25px;
}

.footer-distributed .footer-icons a{
    display: inline-block;
    width: 35px;
    height: 35px;
    cursor: pointer;
    background-color:  #33383b;
    border-radius: 2px;

    font-size: 15px;
    color: #ffffff;
    text-align: center;
    line-height: 35px;

    margin-right: 3px;
    margin-bottom: 5px;
}

/* un responsive rmoval */

@media (max-width: 880px) {

    .footer-distributed{
        font: bold 14px sans-serif;
    }

    .footer-distributed .footer-left,
    .footer-distributed .footer-center,
    .footer-distributed .footer-right{
        display: block;
        width: 100%;
        margin-bottom: 40px;
        text-align: center;
    }

    .footer-distributed .footer-center i{
        margin-left: 0;
    }


logo {

margin-bottom:100px;

     }




input {
        font-size: 100px;

    }




 .g-recaptcha div { 

    width: 50%;
    display: block;

    }



    a.specialeffects:hover {
  color: black ;
  background-color: #ff0 ;
}



    #rig {
    max-width:900px;
    margin:0 auto; /*center aligned*/
    padding:0;
    font-size:0; /* Remember to change it back to normal font size if have captions */
    list-style:none;
    background-color:#000;
}
#rig li {
    display: inline-block;
    *display:inline;/*for IE6 - IE7*/
    width:25%;
    vertical-align:middle;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* The wrapper for each item */
.rig-cell {
    /*margin:12px;
    box-shadow:0 0 6px rgba(0,0,0,0.3);*/
    display:block;
    position: relative;
    overflow:hidden;
}

/* If have the image layer */
.rig-img {
    display:block;
    width: 100%;
    height: auto;
    border:none;
    transform:scale(1);
    transition:all 1s;
}

#rig li:hover .rig-img {
    transform:scale(1.05);
}

/* If have the overlay layer */
.rig-overlay {
    position: absolute;
    display:block;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    background: #3DC0F1 url(img/link.png) no-repeat center 20%;
    background-size:50px 50px;
    opacity:0;
    filter:alpha(opacity=0);/*For IE6 - IE8*/
    transition:all 0.6s;
}
#rig li:hover .rig-overlay {
    opacity:0.8;
}

/* If have captions */
.rig-text {
    display:block;
    padding:0 30px;
    box-sizing:border-box;
    position:absolute;
    left:0;
    width:100%;
    text-align:center;
    text-transform:capitalize;
    font-size:18px;
    font-weight:bold;
    font-family: 'Oswald', sans-serif;
    font-weight:normal!important;
    top:40%;
    color:white;
    opacity:0;
    filter:alpha(opacity=0);/*For older IE*/
    transform:translateY(-20px);
    transition:all .3s;
}
#rig li:hover .rig-text {
    transform:translateY(0px);
    opacity:0.9;
}

@media (max-width: 9000px) {
    #rig li {
        width:25%;
    }
}

@media (max-width: 700px) {
    #rig li {
        width:33.33%;
    }
}

@media (max-width: 550px) {
    #rig li {
        width:50%;
    }
}

最佳答案

从正文中删除边距。

body {
margin: 0;
}

fiddle :https://jsfiddle.net/a1k3qrs9/2/

关于html - 如何修复幻灯片？空白出现 HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40958838/

27 4 0
文章推荐： javascript - 如何让我的按钮将用户答案与 "correct"答案进行比较？
文章推荐： javascript - 单击链接不起作用时添加类(class)
文章推荐： php - 如何使用 PHP 抓取此内容并仅获取纬度/经度
文章推荐： html - 有没有办法找到我的 HTML 代码使用的所有 CSS 代码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com