我上传了我的网页截图以及HTML,CSS和JavaScript。 <h1>
标记中以及<section>
标记中都有一些空格,我无法解析。
var myIndex = 0;
carousel();
function carousel() {
var i;
var x = document.getElementsByClassName("mySlides");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
myIndex++;
if (myIndex > x.length) {myIndex = 1}
x[myIndex-1].style.display = "block";
setTimeout(carousel, 2000); // Change image every 2 seconds
}
* {margin: 0; padding: 0;}
.mySlides {display:none;}
.logo{
float:left;
margin-right: 100px;
}
.navigation{
background-color:skyblue;
height:55px;
}
.navbar li {
list-style-type: none;
display:inline;
font-family: 'Fjalla One', sans-serif;
font-size: 1.5em;
font-weight: bold;
margin-right: 4em;
}
.navbar a{
text-decoration: none;
color: black;
}
header{
float:left;
}
.sidebar h1{
font-family: 'Pacifico', cursive;
text-align: center;
}
.footer{
clear:both;
background-color: grey;
height: 207px;
width:100%;
}
.links{
margin-bottom:3px;
}
.bottomlinks{
list-style-type: none;
font-family: verdana;
font-weight: bold;
text-decoration: none;
margin-left: 100px;
margin-right:100px;
margin-top: 15px;
margin-bottom: 55px;
float:left;
}
.bottomlinks li a{
text-decoration: none;
color: black;
}
.address{
margin-top:15px;
margin-right: 400px;
list-style-type: none;
font-family: verdana;
font-weight: bold;
float:left;
}
.social-icons{
margin-top:70px;
float:right;
list-style-type: none;
}
.social-icons li{
display: inline;
margin-right: 20px;
}
.social-icons a {
color: white;
opacity:0.8;
}
.social-icons i{
font-size: 1.5em;
}
.fa-facebook {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-facebook:hover {
background-color: #3d5b99;
}
.fa-twitter {
padding:10px 12px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-twitter:hover {
background-color: #00aced;
}
.fa-instagram {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-instagram:hover {
background-color:#bc2a8d;
}
.fa-youtube {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-youtube:hover {
background-color: #e64a41;
}
.fa-linkedin {
padding:10px 14px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-linkedin:hover {
background-color: #0073a4;
}
.fa-google-plus {
padding:10px 9px;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition: .5s;
}
.fa-google-plus:hover {
background-color: #d34836;
}
.copyright{
clear: both;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cafe New Bengaluru | Home</title>
<link rel="icon" href="icon.png" type="image/png" sizes="16x16">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="logo">
<a href=""><img src="logo.png" width="70px" height="50px"></a>
</div>
<nav class="navigation">
<ul class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<header>
<img src="home.jpg" width="840px" height="400x" alt="Hotel Entry Image">
</header>
<section class="sidebar">
<h1>Menu of the day</h1>
<img class="mySlides" src="pekingrice.jpg" width="500px" height="326px">
<img class="mySlides" src="chickenmomo.jpeg" width="500px" height="326px">
<img class="mySlides" src="lollipop.jpg" width="500px" height="326px">
</section>
<footer class="footer">
<ul class="bottomlinks">
<li><p class="links">Links</p></li>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="address">
<li><p class="links">Address</p></li>
<li>#123, Arcade Heights</li>
<li> Delta Block</li>
<li> Indiranagar, StageII</li>
<li>Karnatake: 560008</li>
</ul>
<ul class="social-icons">
<li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-instagram"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-youtube"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
<li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
</ul>
<p class="copyright">©2017.All Rights Reserved </p>
</footer>
<script src="myfile.js"></script>
</body>
</html>
答案 0 :(得分:0)
尝试这样做。
问题在这里
<section class="sidebar">
<h1>Menu of the day</h1>
<img class="mySlides" src="pekingrice.jpg" width="500px" height="326px">
<img class="mySlides" src="chickenmomo.jpeg" width="500px" height="326px">
<img class="mySlides" src="lollipop.jpg" width="500px" height="326px">
</section>
你必须为你的部分标签设置边距和填充,或者在Css中设置他的课程
示例:的
.sidebar{
margin: 0;
padding: 0;
}
注意:
您必须调整图像chickenmomo.jpg
宽度和高度,以便在
答案 1 :(得分:0)
边距是问题。在正文标记
之后将其嵌入到HTML代码中<style type="text/css">
.sidebar h1{
margin: 0px;
}
</style>
此代码修复<h1></h1>
但该滑块未修复您需要更改滑块css以修复该错误