我的左侧边栏在向页眉添加图像后消失了!
现在是这样的:
通常左边的边栏和右边的水果一样。有人知道为什么会这样吗？
我添加的图像在“headerimage”类中。 HTML 和 CSS 代码如下所示。
HTML 代码:
<body>
<!-- HEADER -->
<div class="header">
<a href="Design.html"><img src="Logo Greenery.png" class="image"</a>
<div class="headerimage"><img src="vegatbles.png" style=" width:200px; height:150px; /></div>
</div>
<!--LEFT-BAR-->
<div class="left-side"></div>
<!--NAV-BAR-->
<div class="navbar-nav" style="text-align: center;">
<!-- Navigatiebar met de links erin -->
<button type="button"><a href="HtmlPage.html">Producten</a></button>
<button type="button"><a href="#">Registreren</a></button>
<button type="button"><a href="#">Over ons</a></button>
<button type="button"><a href="#">Contact</a></button>
</div>
<!--RIGHT-BAR-->
<div class="right-side"></div>
<!--CONTENT-->
<div class="Content">
<h1 style="text-align:center;">Hoofdstuk 1</h1>
<h3>Een digitale tekst, elektronische tekst of e-tekst bestaat in principe uit een code voor ieder teken (in tegenstelling tot een grafische weergave zoals bij een letter op papier, en in tegenstelling tot een klank), eventueel aangevuld met opmaakcodes. (De meest basale codes die geen zichtbare tekens representeren zijn die voor de spatie en de nieuwe regel.) Dit maakt efficiënte elektronische opslag mogelijk, bijvoorbeeld als een txt-, html-, doc- of pdf-bestand, of in een van de speciale formats voor e-boeken.
Voordelen van een digitale tekst ten opzichte van een tekst op papier zijn (een en ander voor zover deze mogelijkheden niet zijn ingeperkt, zoals bij Digital Rights Management, en verder afhankelijk van het bestandstype en de software) de doorzoek-, bewerk-, kopieer- en verzendbaarheid (onder andere e-mail en sms), de geringe massa en het geringe volume van een gegevensdrager, de instelbaarheid van de lettergrootte met automatische aanpassing van de hoeveelheid tekst op een regel aan de scherm- of vensterbreedte zodat zo veel mogelijk tekst op een regel staat zonder dat horizontaal scrollen nodig is, en de mogelijkheid tot keuze van een lettertype.
Een nadeel is dat een apparaat en software nodig zijn om een tekst te kunnen lezen (de codes worden daartoe terugvertaald naar de grafische weergave op een beeldscherm) of te annoteren/bewerken/schrijven.
Een tussenvorm waarbij de voordelen gedeeltelijk van toepassing zijn is het als afbeelding opslaan van ingescande tekstpagina's. Dit wordt toegepast als de tekst oorspronkelijk op papier stond en het te veel werk is om de tekst te digitaliseren (eventueel met OCR), of als men de oorspronkelijke opmaak exact wil behouden. In het laatste geval wordt ook wel een combinatie. toegepast van digitalisatie ten behoeve van doorzoekbaarheid, maar weergave als afbeelding.
Omzetting van digitale tekst naar tekst op papier gebeurt met een printer.</h3>
</div>
<!--FOOTER-BAR-->
<div class="footer-side">
</div>
代码 CSS:
body {
margin-left:240px;
background-color:antiquewhite;
}
.header{
width: 1300px;
height: 154px;
background-color: green;
border-radius: 25px;
}
.headerimage{
margin-right: 30px;
float: right;
}
.navbar-nav {
background-color: tan;
text-align: center;
vertical-align: center;
height: 60px;
width: 1300px;
margin-left: 0px;
border-radius: 25px;
}
.left-side {
float: left;
width: 100px;
height: 1000px;
margin-top: 60px;
margin-right: 50px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;
}
.right-side {
float: right;
width: 100px;
height: 1000px;
margin-top: 0px;
margin-left: 40px;
background-image: url('fruittest.png');
background-size: auto;
border-radius: 25px;
}
.footer-side{
height: 100px;
width: 1300px;
background-color:green;
text-align: center;
margin-top:1000px;
}
.content{
margin-top: -1000px;
margin-bottom: 200px;
}
最佳答案
你在这行有错误:
<a href="Design.html"><img src="Logo Greenery.png" class="image"</a>
替换为
<a href="Design.html"><img src="Logo Greenery.png" class="image"></a>
关于html - 将图像添加到标题后，左侧边栏消失了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35325551/