Innehållsförteckning:
- Steg 1: Skapa en penna
- Steg 2: Lägg till referenser
- Steg 3: Kod
- Steg 4: Ändra den koden för att passa dina behov
- Steg 5: Demo
Video: Sätta en kopia till Urklippsknappen på en webbsida: 5 steg (med bilder)
2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44
Det här kan låta enkelt, och jag kan se dum ut för att lägga det på Instructables, men i verkligheten är det inte så lätt. Det finns CSS, Jquery, HTML, lite snyggt javascript, och, oja, du vet.
Steg 1: Skapa en penna
Det finns denna coola sajt som heter Codepen. Tidigare var jag tvungen att bara koda i HTML
- Starta File Explorer.
- Gå till Mina dokument.
- Skapa en txt -fil.
- Byt namn på filen till "MyHTMLDoc.html".
- Slå OK till varningsdialogen.
- Stäng File Explorer.
- Öppna Visual Studio, vilket tar fem minuter.
- Öppna filen i Visual Studio, vilket tar ytterligare fem minuter. VS är väldigt långsamt.
- Start.
- När jag är klar måste jag öppna filen i Edge för att kunna se mitt arbete.
Allt du behöver göra är nu
- Starta Edge.
- Gå till
- I det övre högra hörnet trycker du på ny penna.
- Starta kodning.
Ser du hur mycket lättare det är? Ange bara din JS, CSS och HTML i sina respektive rutor. Resultaten visas automatiskt till höger.
I själva verket är Codepen sååå mycket bättre, att jag rekommenderar dig att gå och skapa ditt konto just nu. Ja, jag hatar att vara den som annonserar, men jag kan inte låta bli. Det är mycket bättre. Det finns inget jag kan göra åt det.
Eller om du inte vill skapa ett konto kan du skapa en penna utan ett konto. Du kan spara din penna under användarnamnet "Captain Anonym".
Steg 2: Lägg till referenser
Eftersom vi kommer att använda Jquery och den här (riktigt) coola saken som kallas "Balloon.css" måste vi lägga till referenser först. Om du är ny kommer jag att berätta hur du gör detta i Codepen.
- Klicka på Inställningar.
- Beroende på om referensen är ett formatmall eller ett skript, klicka antingen på CSS eller Javascript.
- Under Lägg till externt (Javascript eller CSS) lägger du till referenserna.
Lägg till:
bla bla bla: BLAAAAAAA !!!!
Ta nu bort det och sätt i HTML -taggen som länkar till ditt favorit -CDN för Jquery och Balloon.css.
Steg 3: Kod
Lägg till den här koden under det.
codepen.io/slate-coding/pen/oepQpX
Kopiera/klistra in koden i din penna.
Steg 4: Ändra den koden för att passa dina behov
Du kan leka så mycket du vill med pennan efter dina behov och sedan kopiera och klistra in koden var du vill.
Steg 5: Demo
codepen.io/alexvgs/pen/oepQpX
Rekommenderad:
"The George" Liverpools leverbyggnadsklocka kopia: 13 steg (med bilder)
"The George" Liverpools Liver Building Clock Replica: Från Liverpool är jag oerhört stolt över var jag kommer ifrån och så länge jag kan minnas har jag fascinerats av en byggnad i staden, Royal Liver Building, och specifikt är det häpnadsväckande klocka. Den här klockan är känd för att vara den största
ESP8266 POV -fläkt med klocka och textuppdatering av webbsida: 8 steg (med bilder)
ESP8266 POV -fläkt med klock- och webbsida Textuppdatering: Detta är en variabel hastighet, POV (Persistence Of Vision), fläkt som intermittent visar tiden och två textmeddelanden som kan uppdateras "direkt". POV -fläkten är också en enda webbserver som låter dig ändra de två textmeddelandena
Hur man använder några träbitar för att sätta ihop till en söt och kraftfull trärobotarm: 10 steg
Hur man använder några träbitar för att sätta ihop till en söt och kraftfull trärobotarm: Robotarmens namn är WoodenArm. Det ser väldigt sött ut! Om du vill ha mer information om WoodenArm, se www.lewansoul.com Nu kan vi göra en introduktion om WoodenArm, låt oss gå vidare
ESP8266 -NODEMCU $ 3 WiFi -modul #2 - Trådlösa stift som styrs via WEBBSIDA: 9 steg (med bilder)
ESP8266 -NODEMCU $ 3 WiFi -modul #2 - Trådlösa stift som styrs via WEBBSIDA: En ny värld av dessa mikroberäkningar har kommit och det här är ESP8266 NODEMCU. Detta är den första delen som visar hur du kan installera miljön för esp8266 i din arduino IDE genom att komma igång -videon och som delarna i
Hur man lägger till användarnivåer från NUMA till din kopia av N med NumADD Firefox AddOn: 4 steg
Så här lägger du till användarnivåer från NUMA till din kopia av N med NumADD Firefox AddOn: Alla användare av Metanets N -användardatabas NUMA kommer att veta hur klumpigt gränssnittet är för att kopiera användarskapade nivåer till din kopia av spelet. NumADD, utraderar behovet av kopiering och klistra in och gör överföringsnivåer till en musklic