הכנסת עותק ללוח הלוח בדף אינטרנט: 5 שלבים (עם תמונות)

2025 מְחַבֵּר: John Day | [email protected]. שונה לאחרונה: 2025-01-23 14:46

זה אולי נשמע פשוט, ואולי נראה מטופש להעלות אותו על Instructables, אבל במציאות זה לא כל כך פשוט. יש CSS, Jquery, HTML, כמה JavaScript מפואר, ובכן, אתה יודע.

שלב 1: צור עט

יש את האתר המגניב הזה שנקרא Codepen. בעבר, רק כדי לקודד ב- HTML, הייתי חייב פעם

1. הפעל את סייר הקבצים.
2. עבור אל המסמכים שלי.
3. צור קובץ txt.
4. שנה את שם הקובץ ל "MyHTMLDoc.html".
5. לחץ על אישור לתיבת הדו -שיח של האזהרה.
6. סגור את סייר הקבצים.
7. פתח את Visual Studio שנמשך חמש דקות.
8. פתח את הקובץ ב- Visual Studio, שאורך עוד חמש דקות. VS איטי מאוד.
9. התחל.
10. כשאני מסיים, אני חייב לפתוח את הקובץ ב- Edge כדי לצפות בעבודתי.

עכשיו, כל מה שאתה צריך לעשות הוא

1. הפעל את Edge.
2. עבור אל
3. בפינה הימנית העליונה, לחץ על עט חדש.
4. התחל קידוד.

רואים כמה זה יותר קל? פשוט הזן את JS, CSS ו- HTML בתיבות המתאימות להם. התוצאות מופיעות אוטומטית מימין.

למעשה, קודפן הרבה יותר טוב, שאני ממליץ לך ללכת ליצור את החשבון שלך כבר עכשיו. כן, אני שונא להיות הפרסום היחיד, אבל אני לא יכול שלא. זה הרבה יותר טוב. אין לי מה לעשות בנידון.

לחלופין, אם אינך רוצה ליצור חשבון, תוכל ליצור עט ללא חשבון. אתה יכול לשמור את העט שלך תחת שם המשתמש "קפטן אנונימי".

שלב 2: הוסף הפניות

מכיוון שאנו הולכים להשתמש ב- Jquery וב- tingajammy המגניב הזה (ממש) שנקרא "Balloon.css", עלינו להוסיף הפניות תחילה. אם אתה חדש, אגיד לך כיצד לעשות זאת ב- Codepen.

1. לחץ על הגדרות.
2. תלוי אם ההפניה היא גליון סגנון או סקריפט, לחץ על CSS או Javascript.
3. תחת הוסף חיצוני (Javascript או CSS) הוסף את ההפניות.

לְהוֹסִיף:

בלה בלה בלה: BLAAAAAAA !!!!

כעת הסר זאת והכנס את תג HTML המקשר ל- CDN המועדף עליך עבור Jquery ו- Balloon.css.

שלב 3: קוד

מתחת לזה, הוסף את הקוד הזה.

codepen.io/slate-coding/pen/oepQpX

העתק/הדבק את הקוד בעט שלך.

שלב 4: שינוי קוד זה בהתאם לצרכיך

אתה יכול להתעסק כמה שאתה רוצה עם העט שיתאים לצרכים שלך, ואז להעתיק ולהדביק את הקוד לאן שאתה רוצה.

שלב 5: הדגמה

codepen.io/alexvgs/pen/oepQpX