So erstellen Sie eine Portfolio-Galerie mit HTML und CSS-HTML-Tutorial-php.cn

So erstellen Sie eine Portfolio-Galerie mit HTML und CSS

王林

Freigeben： 2023-09-02 19:57:16

nach vorne

1490 Leute haben es durchsucht

So erstellen Sie eine Portfolio-Galerie mit HTML und CSS

Übersicht

Eine Portfolio-Galerie kann eine Sammlung beliebiger Fotos und Videos aus früheren Arbeiten sein. Um eine Portfolio-Galerie zu erstellen, verwenden wir HTML und CSS. HTML hilft uns beim Aufbau des Grundgerüsts der Portfolio-Galerie, während CSS zur Gestaltung des Portfolios verwendet wird. Da das Portfolio auch ein wichtiger Teil unserer Website ist, werden wir einige CSS-Eigenschaften verwenden, um diese Seite responsiv zu gestalten.

Algorithmus

Schritt 1 – Erstellen Sie ein HTML-Boilerplate in Ihrem Texteditor.

Schritt 2 – Erstellen Sie einen Container für den Seitenkopf.

Schritt 3 – Erstellen Sie nun einen weiteren Div-Container, um eine Galerie zu erstellen und den Container elastisch und wickelnd zu machen. um die Seite responsive zu machen.

<div class="gallery"></div>

Nach dem Login kopieren

Schritt 4 − Fügen Sie die Karten zur Galerie hinzu und legen Sie die Größe der Karte fest.

<div class="card">
   <div class="imgs">
      <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
   </div>
   <p>Java projects 2023 Edition</p>
</div>

Nach dem Login kopieren

Schritt 5 – Wiederholen Sie Schritt 4, wenn Sie dem Div-Container weitere Karten hinzufügen möchten.

Schritt 6 − Fügen Sie das Bild zu den Karten hinzu.

Schritt 7 – Galerie-Portfolio erfolgreich erstellt.

Beispiel

In diesem Beispiel haben wir zwei Dateien erstellt, die uns beim Erstellen der Portfolio-Galerie helfen. In der HTML-Datei haben wir das Stylesheet verlinkt, um der Seite den Stil zu verleihen

<html>
<head>
   <title>Portfolio Gallery</title>
   <link rel="stylesheet" href="style.css">
   <style>
      *{
         margin-top: 0;
         font-family: 'Segoe UI';
      }
      .title{
         font-size: 2rem;
         font-weight: 700;
         background-color: white;
         width: 100%;
      }
      .subtitle{
         font-size: 0.8rem;
      }
      .dash{
         width: 100%;
         height: 2px;
         background-color: rgb(143, 143, 143);
         margin-bottom: 0.5rem;
      }
      .gallery{
         width: 100%;
         display: flex;
         justify-content: center;
         flex-wrap: wrap;
         gap: 2rem;
         padding: 1rem 0;
      }
      .card{
         width: 15rem;
         height: 15rem;
         box-shadow: 0 0 5px rgb(165, 165, 165);
         border-radius: 5px;
         padding: 0.5rem;
      }
      .card:hover{
         transform: scale(1.009);
         cursor: pointer;
      }
      .imgs{
         background: rgb(219, 218, 218);
         height: 60%;
         border-radius: 5px;
      }
      img{
         width: 100%;
         height: 100%;
         border-radius: 5px;
      }
      p{
         padding: 1rem 0.5rem;
         font-weight: 600;
      }
   </style>  
</head>
<body>
   <div class="title">
      Portfolio
      <div class="subtitle">
         Developers best projects of all the domain
      </div>
      <div class="dash"></div>
   </div>
   <div class="gallery">
      <div class="card">
         <div class="imgs">
            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt="">
         </div>
         <p>HTML5 and CSS3 projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt="">
         </div>
         <p>Python projects 2023 Ediiton</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt="">
         </div>
         <p>Java projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="https://www.tutorialspoint.com/android/images/android-mini-logo.jpg" alt="">
         </div>
         <p>Android Development projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg" alt="">
         </div>
         <p>Fullstack Projects 2023 Edition</p>
      </div>
   </div>
</body>
</html>

Nach dem Login kopieren

Das Bild unten ist ein responsives Bild des obigen Beispiels. Der obige Code ist responsiv und kann auf jedem Bildschirm angezeigt werden. Die folgenden Bildschirme sind Desktop-, Tablet- und Mobilbildschirme.

Desktop-View-Portfolio-Website kann auf einem großen Bildschirm mit guten Betrachtungswinkeln angezeigt werden.

Fazit

Eine Portfolio-Galerie ist eine Komponente, die in vielen Arten von Websites verwendet werden kann, beispielsweise auf der Website einer Organisation, die anstehende Projekte und deren Fachwissen in diesem Bereich in einer Portfolio-Galerie präsentiert, damit Kunden entscheiden können, ob sie sich für ein bestimmtes Unternehmen entscheiden. Die Zusammenarbeit bietet Referenz . Portfolio-Galerien werden von Entwicklern auch genutzt, um rekrutierenden Unternehmen ihre besten Projekte vorzustellen. Mit anderen Worten: Wir können auch sagen, dass es wie unsere Handy-Galerie ist, die eine Reihe von Fotos und Videos enthält.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Portfolio-Galerie mit HTML und CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!