HTML, CSS, and jQuery: Build a beautiful favorites interface-JS Tutorial-php.cn

HTML, CSS, and jQuery: Build a beautiful favorites interface

王林

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

Original

854 people have browsed it

HTML, CSS, and jQuery: Build a beautiful favorites interface

HTML, CSS and jQuery: Build a beautiful favorites interface

In the modern era of web browsing, favorites have become an important tool for users to save and organize their favorite web pages. . A beautiful and easy-to-use favorites interface is crucial to improving user experience. This article will introduce you to how to use HTML, CSS and jQuery to build a beautiful favorites interface, and provide specific code examples.

First, we need to create a main HTML file to build the favorites interface. The following is a simple HTML structure:

<!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>

Copy after login

In the above HTML structure, we have introduced an external CSS file (styles.css) and an external JavaScript file (script.js), these files will have Help us beautify and interact with the favorites interface.

Next, let’s define some CSS styles to beautify our favorites interface. The following is the sample code of the styles.css file:

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;
}

Copy after login

In the above CSS code, we define some basic styles to beautify the favorites interface. We used a grid layout to create a waterfall-style favorites layout. Each collection has a white background, rounded borders, and shadow effect.

Now, we need some initial favorites data. The following is a simple JavaScript object array that simulates the favorites data obtained from the backend:

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

Copy after login

Next, we need to write some JavaScript code to dynamically generate the favorites interface based on the initial data and add new favorites function. The following is the sample code of the script.js file:

$(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);
   });
}

Copy after login

In the above JavaScript code, we use jQuery's ready function to ensure that the relevant code is executed after the page is loaded. We define a generateBookmarks function to generate the favorites interface based on the favorites data. We also used jQuery's click function to implement the function of adding new favorites.

Now, when we open the HTML file, we should see a beautiful favorites interface, and we can click the "Add Favorites" button to add new favorites.

To summarize, this article introduces you to how to use HTML, CSS and jQuery to build a beautiful favorites interface. We use grid layout and some CSS styles to beautify the interface, and use jQuery to dynamically generate the favorites interface and add new favorites. I hope this article can help you build your own favorites interface.

The above is the detailed content of HTML, CSS, and jQuery: Build a beautiful favorites interface. For more information, please follow other related articles on the PHP Chinese website!