HTML, CSS und jQuery: Erstellen Sie eine schöne Favoritenoberfläche-js-Tutorial-php.cn

HTML, CSS und jQuery: Erstellen Sie eine schöne Favoritenoberfläche

王林

Freigeben： 2023-10-27 13:02:09

Original

902 Leute haben es durchsucht

HTML, CSS und jQuery: Erstellen Sie eine schöne Favoritenoberfläche

Im modernen Zeitalter des Webbrowsens sind Favoriten für Benutzer zu einem wichtigen Werkzeug zum Speichern und Organisieren ihrer Lieblingswebseiten geworden. Eine schöne und benutzerfreundliche Favoritenoberfläche ist entscheidend für die Verbesserung des Benutzererlebnisses. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und jQuery eine schöne Favoritenoberfläche erstellen und spezifische Codebeispiele bereitstellen.

Zuerst müssen wir eine Haupt-HTML-Datei erstellen, um die Favoritenoberfläche zu erstellen. Das Folgende ist eine einfache HTML-Struktur:

<!DOCTYPE html>
<html>
<head>
   <title>我的收藏夹</title>
   <link rel="stylesheet" type="text/css" href="styles.css">
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
   <h1>我的收藏夹</h1>
   <div id="bookmarks"></div>
   <button id="addBookmark">添加收藏</button>
</body>
</html>

Nach dem Login kopieren

In der obigen HTML-Struktur haben wir eine externe CSS-Datei (styles.css) und eine externe JavaScript-Datei (script.js) eingeführt. Diese Dateien helfen uns, die Benutzeroberfläche für interaktive Favoriten zu verschönern und zu verschönern .

Als nächstes definieren wir einige CSS-Stile, um die Benutzeroberfläche unserer Favoriten zu verschönern. Das Folgende ist der Beispielcode der Datei „styles.css“:

body {
   font-family: Arial, sans-serif;
   background-color: #f5f5f5;
}

h1 {
   text-align: center;
   color: #333;
}

#bookmarks {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 20px;
   margin: 20px;
}

.bookmark {
   background-color: #fff;
   padding: 10px;
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.bookmark .title {
   font-weight: bold;
   margin-bottom: 5px;
}

.bookmark .url {
   color: #666;
}

Nach dem Login kopieren

Im obigen CSS-Code definieren wir einige grundlegende Stile, um die Favoritenoberfläche zu verschönern. Wir haben ein Rasterlayout verwendet, um ein Favoritenlayout im Wasserfallstil zu erstellen. Jede Sammlung hat einen weißen Hintergrund, abgerundete Ränder und einen Schatteneffekt.

Jetzt brauchen wir noch ein paar erste Favoritendaten. Das Folgende ist ein einfaches Array von JavaScript-Objekten, das die vom Backend erhaltenen Favoritendaten simuliert:

var bookmarksData = [
   {
       title: "Google",
       url: "https://www.google.com"
   },
   {
       title: "GitHub",
       url: "https://www.github.com"
   },
   {
       title: "Medium",
       url: "https://www.medium.com"
   }
];

Nach dem Login kopieren

Als nächstes müssen wir JavaScript-Code schreiben, um die Favoritenschnittstelle basierend auf den Anfangsdaten dynamisch zu generieren und die Funktion zum Hinzufügen neuer Favoriten zu implementieren . Das Folgende ist der Beispielcode der Datei script.js:

$(document).ready(function() {
   // 生成初始的收藏夹界面
   generateBookmarks(bookmarksData);
   
   // 添加收藏夹
   $("#addBookmark").click(function() {
       var title = prompt("请输入收藏夹标题:");
       var url = prompt("请输入收藏夹链接:");
       var bookmark = {
           title: title,
           url: url
       };
       bookmarksData.push(bookmark);
       generateBookmarks([bookmark]);
   });
});

function generateBookmarks(bookmarks) {
   var bookmarksContainer = $("#bookmarks");
   bookmarks.forEach(function(bookmark) {
       var bookmarkHtml = '<div class="bookmark"><div class="title">' + bookmark.title + '</div><a class="url" href="' + bookmark.url + '">' + bookmark.url + '</a></div>';
       bookmarksContainer.append(bookmarkHtml);
   });
}

Nach dem Login kopieren

Im obigen JavaScript-Code verwenden wir die Ready-Funktion von jQuery, um sicherzustellen, dass der relevante Code nach dem Laden der Seite ausgeführt wird. Wir definieren eine Funktion „generateBookmarks“, um die Favoritenschnittstelle basierend auf den Favoritendaten zu generieren. Wir haben auch die Klickfunktion von jQuery verwendet, um die Funktion zum Hinzufügen neuer Favoriten zu implementieren.

Wenn wir nun die HTML-Datei öffnen, sollten wir eine schöne Favoritenoberfläche sehen und können auf die Schaltfläche „Favoriten hinzufügen“ klicken, um neue Favoriten hinzuzufügen.

Zusammenfassend führt Sie dieser Artikel in die Verwendung von HTML, CSS und jQuery ein, um eine schöne Favoritenoberfläche zu erstellen. Wir verwenden ein Rasterlayout und einige CSS-Stile, um die Benutzeroberfläche zu verschönern, und verwenden jQuery, um die Favoritenoberfläche dynamisch zu generieren und neue Favoriten hinzuzufügen. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, Ihre eigene Favoritenoberfläche zu erstellen.

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Erstellen Sie eine schöne Favoritenoberfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!