个人中心
gpt4 book ai didi

html - 一个元素不想留在原地

转载 作者：太空宇宙 更新时间：2023-11-04 07:18:49 26 4
gpt4 key购买 nike

所以我正在做一个单页网站，我的问题是下一个:在我的主页上，我想要网站的标题和 2 个装饰，但问题是他们不想留在原地。我希望第一个位于左上角，第二个位于右下角。我尝试用 top: 0px;、bottom: 0px; 和 position: absolute; 来处理它，但他们不想留在原地。

请帮帮我。

/* RÉGLAGES GÉNÉRAUX */

body {
    font-family: 'Roboto', sans-serif;
    color: #222222;
    background-color: beige;
}

/* RÉGLAGES DES SECTIONS */

section {
    height: 100vh;
    width: 90%;
    overflow: auto;
    vertical-align: middle;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    padding: 50px auto 50px auto;
    font-size: 1.5em;
    position: relative;
}

.home{
    width: 100%;
    height: 100%;
    position: relative;
}


/* Style des déco */

#3rectangles {
    top: 0px;
    left: 0px;
    position: absolute;
}

#3rectanglesUD {
    right: 0px;
    bottom: 0px;
    position: absolute;
}
<!DOCTYPE html>
<html>

<head>
    <title>Comprendre l'Intelligence Artificielle</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <script src="js/jquery-3.3.1.slim.min.js"></script>
    <script src="js/script.js"></script>
</head>

<body>
    <div id="nav" class="container">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="overlay-content">
            <a href="#home" onclick="closeNav()">Accueil</a>
            <a href="#iaCestQuoi" onclick="closeNav()">L'IA c'est quoi?</a>
            <a href="#iafaible" onclick="closeNav()">L'IA faible</a>
            <a href="#iaforte" onclick="closeNav()">L'IA forte</a>
            <a href="#iahier" onclick="closeNav()">L'IA d'hier</a>
            <a href="#iaauj" onclick="closeNav()">L'IA d'aujourd'hui</a>
            <a href="#iademain" onclick="closeNav()">L'IA de demain</a>
            <a href="#aPropos" onclick="closeNav()">À propos de nous</a>
            <a href="#contact" onclick="closeNav()">Contact</a>
        </div>
    </div>
    <span style="font-size:30px;cursor:pointer" onclick="openNav()" id="openNav">&#9776;</span>
    <section id="home">
        <div class="home">
            <img id="3rectangles" src="https://imgur.com/a/7aSMZis/">
            <h1>
                Comprendre<br> l'Intelligence
                <br> Artificielle
                <br>
            </h1>
            <img id="3rectanglesUD" src="https://imgur.com/a/jiyXKj7/">
        </div>
    </section>
    <section id="iaCestQuoi">
        <div>
            <h1>
                L'intelligence artificelle c'est quoi?
            </h1>
            <p>
                L’ordinateur dépasse déjà l’humain dans les tâches répétitives telles que le calcul ou encore la mémorisation. Mais ce n’est pas de l’intelligence.<br> Jacques Attali définit l’intelligence lors d’une conférence avec le chercheur en intelligence artificielle Jean Ponce “comme la faculté du cerveau humain à faire des liens entre des choses qui n’en avaient apparemment pas”.<br> Les chercheurs en IA veulent développer – artificiellement donc – cette intelligence. Ils cherchent donc le moyen de faire en sortes que les ordinateurs puissent accomplir les mêmes tâches que l’homme et puissent développer une capacité intellectuelle comparable ou supérieure à celle de l’homme.<br> Le but des chercheurs est d’optimiser pour au rentabiliser au mieux les performances de l’algorithme afin qu’il puisse égaler l’humain dans toutes ses capacités intellectuelles jusqu’à même avoir des sentiments. Les algorithmes simples ne font pas partie de l’IA comme le mode conduite automatique de Tesla qui se base sur un GPS et une caméra.<br> L’importance et l’utilité de l’IA ne sont plus à démentir car elles aident déjà beaucoup dans le secteur médical, automobile ou encore l’exploration spatiale et ses petits robots.<br> Cette technologie a déjà largement démontré qu’elle peut surpasser l’humain autant sur le plan physique que sur le plan intelligent.
            </p>
        </div>
    </section>
    <section id="iafaible">
        <div>
            <h1>
                IA faible
            </h1>
            <p>
                L’intelligence artificielle faible reproduit le plus fidèlement possible un comportement ou un système de réflexion préprogrammé, mais ne comprend pas son fonctionnement.<br> Le principe de compréhension ne s’effectue pas là car elle imite sa cible.<br> Même si elle paraît intelligente, elle ne fait que lire l’algorithme elle n’est donc intelligente que pour un regard extérieur.<br> L’intelligence artificielle faible n’est pas fait pour évoluer seule par ce n’est qu’un assemblage de programmes et d’algorithmes informatiques qui ne servent qu’à la tâche précise et spécifique pour laquelle ils ont été conçus.
            </p>
        </div>
    </section>
    <section id="iaforte">
        <div>
            <h1>
                IA forte
            </h1>
            <p>
                L’IA forte, aussi appelée ascendante, est au contraire de l’IA faible une intelligence au sens plein ; la machine fait preuve d’anticipation, d’adaptation et peut atteindre les capacités intellectuelles humaines.<br> Elle peut non seulement effectuer des actions rationnelles et réfléchies en analysant des situations, mais également être consciente et comprendre ses choix.<br> Actuellement, programmer une conscience semble impossible. Cependant, les chercheurs se penchent déjà dessus et les recherches avancent vitesse grand V.
            </p>
        </div>
    </section>
    <section id="iahier">
        <div>
            <h1>
                L'IA d'hier
            </h1>
            <h2>
                Sa naissance
            </h2>
            <p>
                De nombreuses légendes racontent que des êtres artificiels auraient déjà vu le jour, créés par des maîtres artisans et ayant une conscience propre.<br> L’homme a simplement toujours rêvé d’immortalité, peu importe la sorte.<br> Ce qui l’a conduit à divers projets ayant pour but de le copier.<br> Cette méthode lui permettrait d’être maître de l’évolution et de prendre le contrôle de la nature en essayant de tracer sa propre destinée.<br> Les premières machines à calculer apparaissent par exemple dès l’antiquité. Ces inventions, qui ont été perfectionnées au cours des siècles, ont présagé l’existence de technologies accompagnant ou reproduisant les capacités humaines qui tendent à se développer de façon exponentielle aujourd’hui.
            </p>
            <h2>
                De 1950 à nos jours
            </h2>
            <p>
                La première forme de démocratisation de l’intelligence artificielle est lancée par Alan Turing, que l’on considère souvent comme un père de l’I.A., au travers de son article « Computing Machinery and Intelligence » en 1950 qui porte sur les fondamentaux des machines intelligentes.<br> Dans cette avancée d’esprits et de technologies, John McCarthy inventera plus tard la technique du temps partagé, qui permettait aux ordinateurs qui coutaient un bras à l’époque de s’optimiser en effectuant plusieurs tâches simultanées. Il inventa aussi le premier langage de programmation, le LISP, qui fut le langage de référence de l’IA des années 70-80 et qui est encore utilisé sur le web ou en finance.<br> Après de longues années d’espérance à la création d’intelligences artificielles, se suivirent de longues années de désillusions étant donné que les technologies passées n’étaient pas assez puissantes pour en créer de réelles. C’est seulement grâce à internet au début des années 2000 et au partage de connaissance qu’elle offre que le projet put continuer à se développer, ainsi que grâce aux avancées technologiques sur la puissance des ordinateurs. Actuellement on peut retrouver des I.A. partout pour effectuer les tâches les plus simples et répétitives des hommes en les exécutant même mieux grâce à la puissance de calcul et l’efficacité informatique.
            </p>
        </div>
    </section>
    <section id="iaauj">
        <div>
            <h1>
                L'IA d'aujourd'hui
            </h1>
            <p>L’I.A. rentre aujourd’hui dans une phase de croissance exponentielle grâce à l’optimisation et au développement des technologies qui sont de plus en plus rapides. Mais tout cela n’aurait pas eu lieu si vite si de nombreux chercheurs n’auraient pas fait évoluer le sujet théorique des années au par avant. Même les entreprises les plus influentes en ont compris les enjeux et y investissent.
            </p>
            <h1>Les apps</h1>
            <p>L’Intelligence Artificielle est désormais utilisée partout comme dit au-dessus, comme par exemple :</p>
            <ul>
                <li>Le traitement d’images et de vidéos (reconnaissance d’images)</li>
                <li>Le traitement du langage (reconnaissance vocale et Chatbots)</li>
                <li>Les analyses prédictives (basées sur une grande base de données)</li>
                <li>La programmation des jeux (surtout grâce aux adversaires qui ont un comportement de plus en plus réaliste)</li>
                <li>L’automatisation intelligente (développée dans l’industrie)</li>
                <li>La conception de robots humanoïdes</li>
                <li>La santé et la bio-informatique</li>
                <li>L’art où la machine peut concevoir des chefs-d’œuvre</li>
                <li>La simulation de systèmes complexes</li>
            </ul>
            <h1>Les techniques</h1>
            <p>L’Intelligence Artificielle se base sur diverses disciplines scientifiques comme par exemple :</p>
            <ul>
                <li>Les systèmes experts</li>
                <li>Le machine learning</li>
                <li>Le deeplearning</li>
                <li>La résolution de problèmes</li>
                <li>Le traitement automatique du langage</li>
            </ul>
        </div>
    </section>
    <section id="iademain">
        <div>
            <h1>
                L'IA de demain
            </h1>
            <p>Aujourd’hui et surtout dans les prochaines années, les programmes intelligents sont et seront en pleine voie d’extension. Les progrès se font surtout dus à une pression économique et politique des états Américains et Chinois.<br> La période de l’avancée technologique dans ce domaine n’en est donc qu’à son début étant donné qu’il nous manque encore des connaissances même si elles seront vites acquises afin de construire de vrais robots humanoïdes ayant leur propre conscience et fonctionnement. Les experts disent que la découverte de cette technologie pousserait toutes les autres à évoluer par un effet boule de neige.<br> L’hypothèse de la technologie qui prend le dessus sur l’humanité et souvent vue et revue par Hollywood comme par exemple dans le film Transendance ou encore I-Robot qui met en avant les 3 lois de la robotique d’Isaac Asimov qui sont :</p><br>
            <ol>
                <li>Aucun robot ne peut faire de mal à un humain ou le laisser exposé à un danger</li><br>
                <li>Tout robot doit obéir aux ordres de l’humain sauf si l’ordre est contraire à la loi n°1</li><br>
                <li>Le robot doit protéger son existence sauf si cette protection entraîne une contradiction avec les règles n°1 et n°2</li><br>
            </ol>
            <p>Le fait qu’une intelligence artificielle s’améliore toute seule semble n’être que fiction comme la fin de l’humanité qui se ferait dominer par cette dernière. Quelles que soient les conjectures, l’IA va avoir une influence considérable sur notre quotidien et va sans nul doute révolutionner la conduite du monde.</p>
        </div>
    </section>
    <section id="aPropos">
        <div>
            <h1>
                À propos de nous
            </h1>
        </div>
    </section>
    <section id="contact">
        <div>
            <h1>
                Contact
            </h1>
        </div>
    </section>
</body>

</html>

最佳答案

我不完全理解您的最终结果，但如果我可以提出一些小建议。

而不是有两个 <img>并将它们用作背景图像，您可以使用背景属性来实现所需的布局。

您可以为背景属性设置多个图像。您只需要用逗号分隔每个属性，其他属性也一样。

像这样:

background-image: url('first alink') , url('second image link');

要按照你喜欢的方式定位它们，你可以使用 background-position this :

background-position: top left, right bottom;

还可以根据自己的喜好调整它们的大小，也可以只有一个声明，如果有很多图片，它会重复

/* This */
background-size:  100% 15%;
/* Is equivalent to This */
background-size:  100% 15% , 100% 15%;

和往常一样不要忘记不重复

background-repeat: no-repeat;

/* RÉGLAGES GÉNÉRAUX */


/* You Might wanna add this, to remove unwanted white space. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  color: #222222;
  background-color: beige;
}


/* RÉGLAGES DES SECTIONS */

section {
  height: 100vh;
  width: 90%;
  overflow: auto;
  vertical-align: middle;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  padding: 50px auto 50px auto;
  font-size: 1.5em;
  position: relative;
}

.home {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url(https://i.imgur.com/qpP5rKO.png), url(https://i.imgur.com/qUGXcWz.png);
  background-position: top left, right bottom;
  background-size: 100% 15%;
  background-repeat: no-repeat;
}
<section id="home">
  <div class="home">
    <h1>
      Comprendre<br> l'Intelligence
      <br> Artificielle
      <br>
    </h1>
  </div>
</section>

关于html - 一个元素不想留在原地，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50518479/

26 4 0
文章推荐： python .lower() 不工作
文章推荐： java - 使用 Java google apps 目录 API 获取特定电子邮件 ID 的组时出错
文章推荐： python:以更好的方式编写代码？
文章推荐： java - 将 MouseClick 事件从 Papplet 传播到对象类
太空宇宙
个人简介

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

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