个人中心
gpt4 book ai didi

html - 将图像添加到标题后，左侧边栏消失了

转载 作者：行者123 更新时间：2023-11-28 06:25:32 24 4
gpt4 key购买 nike

我的左侧边栏在向页眉添加图像后消失了!

现在是这样的:enter image description here

通常左边的边栏和右边的水果一样。有人知道为什么会这样吗？

我添加的图像在“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/

24 4 0
文章推荐： javascript - ng 模型值在自定义指令中打印未定义
文章推荐： ios - Fluent.EntityError 错误 0
文章推荐： javascript - 如何设置自定义对象属性以在 Angular typeahead 中进行过滤？
文章推荐： javascript - 在 Onclick 中集成两个函数。 JavaScript
行者123
个人简介

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

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