Question

所以我试图创建一个网站，一切正常！但是当我调整窗口大小以确定它是否也兼容Mobile时，我得出的结论是，除了我的幻灯片外，一切都在调整大小！有人能告诉我我的代码有什么问题吗??? 我幻灯片的div ID是＆＃34;幻灯片＆＃34;

＆＃13;

.header-basic {
	background-color: #292c2f;
	box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.15);
	padding: 20px 40px;
	height: 80px;
	box-sizing: border-box;
}

.header-basic .header-limiter {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

/* Logo */

.header-basic .header-limiter h1 {
	float: left;
	font: normal 50px Cookie, Arial, Helvetica, sans-serif;
	line-height: 40px;
	margin: 0;
}

.header-basic .header-limiter h1 span {
	color: #5383d3;
}

/* The header links */

.header-basic .header-limiter a {
	color: #ffffff;
	text-decoration: none;
}

.header-basic .header-limiter nav{
	font:16px Arial, Helvetica, sans-serif;
	line-height: 40px;
	float: right;
}

.header-basic .header-limiter nav a{
	display: inline-block;
	padding: 0 5px;
	text-decoration:none;
	color: #ffffff;
	font-size: 16px;
	opacity: 0.9;
}

.header-basic .header-limiter nav a:hover{
	opacity: 1;
}

.header-basic .header-limiter nav a.selected {
	color: #608bd2;
	pointer-events: none;
	opacity: 1;
}

/* Making the header responsive */

@media all and (max-width: 600px) {

	.header-basic {
		padding: 20px 0;
		height: 75px;
	}

	.header-basic .header-limiter h1 {
		float: none;
		margin: -8px 0 10px;
		text-align: center;
		font-size: 24px;
		line-height: 1;
	}

	.header-basic .header-limiter nav {
		line-height: 1;
		float:none;
	}

}


/* For the headers to look good, be sure to reset the margin and padding of the body */

body {
	margin:0%;
	padding:0%;
	background-color: #F2F2F2
}
	
	#slideshow { 
    margin: 70px auto; 
	position: absolute;
    float: left;
    width: 46.3%; 
	left: 10%;
    height: 56.8%; 
    padding: 0.5%; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
	float: left;
	}
	
	
	
	#slideshow > div{
	position: absolute;
    top: 0%; 
    left: 0%; 
    right: 0%; 
    bottom: 0%; 
	width: 5%; 
    height: 5%; 
	}
	
	#slideshow > img{
	position: absolute;
    top: 0%; 
    left: 0%; 
    right: 0%; 
    bottom: 0%; 
	width: 5%; 
    height: 5%; 
	}



	#slideshowtext {
	text-align: center;
	float: right;
	padding-right: 0%;
	padding-top: 4%;
	}
	
	#slideshowtext > img{
	box-shadow: 0 0 20px rgba(0,0,0,0.4); 
	font: Arial, Helvetica, sans-serif;
	}
	
	#slideshowtext  > p{
	padding-top: 75px;
	font: 20px Arial, Helvetica, sans-serif;
	}
	
	#slideshowtext > h1{
	font: normal 50px Cookie, Arial, Helvetica, sans-serif;
	line-height: 40px;
	margin: px;
	color: #ffffff;
	text-shadow: 0 0 10px rgba(0,0,0,0.4); 
	}
	
	#slideshowtext > h1 span{
	color: #5383d3;
}

	
	hr {
    display: block;
    height: 1%;
	position: absolute;
    border: 0;
    border-top: 1px solid #787A7C;
    margin: 1em 0;
    padding: 0;
	top: 85.6%;
	width: 100%;
	}
	
	#portfolio {
	left: 5%;
	margin-left: auto;
	margin-right: auto;
	float: left;
	margin: 3%;
	padding: 3%;
	margin-top: 2%;
	
	}

＆＃13;

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="Rick de Jong - Portfolio" content='width:1080'>
                    <title>Rick de Jong - Portfolio</title>
                    <link rel="stylesheet" href="assets/demo.css">
                        <link rel="stylesheet" href="assets/header-basic.css">
                            <link href='http://fonts.googleapis.com/css?family=Cookie' rel='stylesheet' type='text/css'>
                                <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                                <script>
	$("#slideshow > div:gt(0)").hide();

    	setInterval(function() { 
                 $('#slideshow > div:first')
                .next()
                .fadeIn(1000)
                .end()
                .appendTo('#slideshow');
    	},  4000);
	    </script>
                            </head>
                            <body>
                                <header class="header-basic">
                                    <div class="header-limiter">
                                        <h1>
                                            <a href="#">
                                                <span>Rick</span> de
                                                <span> Jong</span>
                                            </a>
                                        </h1>
                                        <nav>
                                            <a href="index2.html" class="selected">Home</a>
                                        </nav>
                                    </div>
                                </header>
                                <div id="wrapper">
                                    <div id="Wrappertop">
                                        <div id="slideshow">
                                            <div>
                                                <a href="https://www.youtube.com/channel/UCcAZmwd5nzvh37wPdvpNCMQ" target="_blank">
                                                    <img src="fotos\Partnership.png">
                                                    </a>
                                                </div>
                                                <div>
                                                    <a href="http://www.mi-winkel.nl" target="_blank">
                                                        <img src="fotos\Twitterbanner.png">
                                                        </a>
                                                    </div>
                                                </div>
                                                <div class="vertical-line">
                                                    <ul></ul>
                                                </div>
                                            </div>
                                            <div id="slideshowtext">
                                                <img src="fotos\rickpf.jpg" width="47%" height="47%">
                                                    <h1>Hallo, ik ben 
                                                        <span>Rick</span>
                                                    </h1>
                                                    <p>Welkom op mijn portfolio!
                                                        <br>Hiernaast ziet u een slideshow met verschillende
                                                            <br> Projecten waar ik aan meewerk.
                                                            </p>
                                                        </div>
                                                        <div class="block_1"></div>
                                                        <hr />
                                                    </div>
                                                </div>
                                                <div class="maincontent">
                                                    <div id="portfolio">
                                                        <a href="fotos\portfolio.jpg" targer="_blank"> 
                                                            <img src="fotos\portfolio.jpg" width="30%;">
                                                            </a>
                                                        </div>
                                                    </div>
                                                </body>

＆＃13;

我的幻灯片图片有什么问题？

0 个答案: