Antara Muka Kad Profil Peribadi-tutorial css-php.cn

Antara Muka Kad Profil Peribadi

Patricia Arquette

Lepaskan： 2024-12-17 01:56:25

asal

143 orang telah melayarinya

Personal Profile Card Interface

Ini ialah projek mesra pemula yang ringkas untuk membantu anda mempelajari HTML dan CSS dengan mencipta kad profil bergaya yang memaparkan foto, nama, peranan dan pautan media sosial.

? Gambaran Keseluruhan Projek

Projek ini akan mengajar anda cara:

Struktur dokumen HTML asas.
Gunakan CSS untuk menggayakan kandungan anda.
Buat reka letak kad ringkas dengan bucu bulat dan bayang-bayang.
Tambah dan gayakan imej, teks dan pautan.
Gunakan Flexbox untuk menyusun elemen.

? Struktur Fail

Projek anda akan mempunyai dua fail:

personal-profile_card/
│-- index.html      ← The HTML structure
└-- styles.css      ← The CSS styling

Salin selepas log masuk

? Fail HTML (index.html)

Fail ini mengandungi struktur (atau rangka) halaman web. Begini rupanya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Personal Profile Card</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<h3>
  
  
  <strong>Explanation of Key Elements</strong>
</h3>

<ol>
<li><p><strong>Profile Card Container</strong> (<div><br>
A box that holds the image, name, role, and social links.</p></li>
<li><p><strong>Image Tag</strong> (<img>)<br><br>
Displays the profile picture.

Salin selepas log masuk

Headings and Paragraph

for the user's name.
for the user's role.

Links

tags for social media links.

? CSS File (styles.css)

This file adds styling to your HTML. Here's what it looks like:

body {
  background-color: #f0f8ff;
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.profile-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
  width: 300px;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 15px;
}

.profile-name {
  font-size: 1.5em;
  margin: 10px 0 5px;
  color: #333;
}

.profile-role {
  font-size: 1em;
  color: #777;
  margin-bottom: 20px;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.social-link {
  text-decoration: none;
  color: #008cba;
  font-weight: bold;
  transition: color 0.3s ease;
}

.social-link:hover {
  color: #005f73;
}

Salin selepas log masuk

Penjelasan Gaya Utama

Latar Belakang dan Pemusatan:

Badan memusatkan kad profil menggunakan Flexbox dan menetapkan warna latar belakang biru muda.
Penggayaan Kad Profil:
- warna latar belakang: Menetapkan latar belakang putih.
- jejari sempadan: Membulat sudut.
- box-shadow: Menambahkan bayangan halus untuk kedalaman.
Penggayaan Imej:
- lebar dan tinggi: Tetapkan saiz imej.
- jejari sempadan: 50%: Menjadikan imej bulat.
Penggayaan Teks:

Gayakan nama dan peranan dengan saiz dan warna fon yang berbeza.
Pautan Sosial:
- Disusun dengan Flexbox untuk jarak.
- Kesan tuding untuk menukar warna pautan.

? Cara Menggunakan Projek Ini

Muat turun Fail:

Muat turun atau salin fail index.html dan styles.css.
Buka Fail HTML:

Klik dua kali fail index.html untuk membukanya dalam penyemak imbas anda.
Edit Kandungan:
- Tukar nama dan peranan.
- Ganti URL imej dengan gambar profil anda sendiri.
- Kemas kini pautan media sosial.
Percubaan dengan CSS:

Cuba tukar warna, fon dan saiz dalam styles.css untuk melihat cara ia mempengaruhi reka bentuk!

? Apa yang Anda Akan Pelajari

Cara membuat reka letak HTML.
Cara menggayakan elemen dengan CSS.
Cara menggunakan Flexbox untuk penjajaran.
Cara menambah kesan tuding untuk interaktiviti.

? Langkah Seterusnya

Tambah Lebih Banyak Ciri: Sertakan bahagian bio atau butang kenalan.
Jadikan Ia Responsif: Ketahui cara menjadikan kad kelihatan bagus pada peranti mudah alih.
Tambah Animasi: Gunakan animasi CSS untuk menjadikan kad lebih interaktif.

Selamat Pengekodan! ??

Atas ialah kandungan terperinci Antara Muka Kad Profil Peribadi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!