HTML, CSS dan jQuery: Bina antara muka kegemaran yang cantik-tutorial js-php.cn

HTML, CSS dan jQuery: Bina antara muka kegemaran yang cantik

王林

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

asal

846 orang telah melayarinya

HTML, CSS dan jQuery: Bina antara muka kegemaran yang cantik

Dalam era moden penyemakan imbas web, kegemaran telah menjadi alat penting untuk pengguna menyimpan dan mengatur halaman web kegemaran mereka. Antara muka kegemaran yang cantik dan mudah digunakan adalah penting untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML, CSS dan jQuery untuk membina antara muka kegemaran yang cantik, dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta fail HTML utama untuk membina antara muka kegemaran. Berikut ialah struktur HTML ringkas:

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

Salin selepas log masuk

Dalam struktur HTML di atas, kami telah memperkenalkan fail CSS luaran (styles.css) dan fail JavaScript luaran (script.js), fail ini akan membantu kami mencantikkan dan antara muka kegemaran interaktif .

Seterusnya, mari kita tentukan beberapa gaya CSS untuk mencantikkan antara muka kegemaran kita. Berikut ialah kod contoh fail 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;
}

Salin selepas log masuk

Dalam kod CSS di atas, kami mentakrifkan beberapa gaya asas untuk mencantikkan antara muka kegemaran. Kami menggunakan reka letak grid untuk mencipta reka letak kegemaran gaya air terjun. Setiap koleksi mempunyai latar belakang putih, sempadan bulat dan kesan bayang-bayang.

Kini, kami memerlukan beberapa data kegemaran awal. Berikut ialah tatasusunan mudah objek JavaScript yang mensimulasikan data kegemaran yang diperoleh dari bahagian belakang:

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

Salin selepas log masuk

Seterusnya, kita perlu menulis beberapa kod JavaScript untuk menjana antara muka kegemaran secara dinamik berdasarkan data awal dan melaksanakan fungsi menambah kegemaran baharu . Berikut ialah contoh kod fail 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);
   });
}

Salin selepas log masuk

Dalam kod JavaScript di atas, kami menggunakan fungsi sedia jQuery untuk memastikan kod yang berkaitan dilaksanakan selepas halaman dimuatkan. Kami mentakrifkan fungsi generateBookmarks untuk menjana antara muka kegemaran berdasarkan data kegemaran. Kami juga menggunakan fungsi klik jQuery untuk melaksanakan fungsi menambah kegemaran baharu.

Kini, apabila kita membuka fail HTML, kita seharusnya melihat antara muka kegemaran yang cantik, dan kita boleh mengklik butang "Tambah Kegemaran" untuk menambah kegemaran baharu.

Untuk meringkaskan, artikel ini memperkenalkan anda kepada cara menggunakan HTML, CSS dan jQuery untuk membina antara muka kegemaran yang cantik. Kami menggunakan susun atur grid dan beberapa gaya CSS untuk mencantikkan antara muka, dan menggunakan jQuery untuk menjana antara muka kegemaran secara dinamik dan menambah kegemaran baharu. Saya harap artikel ini dapat membantu anda membina antara muka kegemaran anda sendiri.

Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina antara muka kegemaran yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!